Google sign-in with pwa_auth

Do you need one of those universal sign in buttons Google / Facebook / Microsoft ?

Take a took a look at pwa-auth, a JavaScript tool to handle the login process for Microsoft, Google and Facebook accounts. We started with npx create-react-app and changed App.js as follows:

	import React from 'react';
	import logo from './logo.svg';
	import './App.css';
	import config from './config.js';
	class App extends React.Component {
	constructor(props) {
	super(props)
	this.handleSignin = this.handleSignin.bind(this);
	this.handleSignout = this.handleSignout.bind(this);
	this.state = {
	loggedIn: false,
	user: undefined
	}
	};
	componentDidMount() {
	document.querySelector("pwa-auth").addEventListener("signin-completed", this.handleSignin);
	const script = document.createElement("script");
	script.src = "https://cdn.jsdelivr.net/npm/@pwabuilder/pwaauth/dist/pwa-auth.js";
	script.async = true;
	script.type="module";
	script.onload = () => {console.log("loaded pwa-auth.js")}
	document.body.appendChild(script);
	}
	componentWillUnmount() {
	document.querySelector("pwa-auth").removeEventListener("signin-completed", this.handleSignin);
	}
	handleSignin(ev) {
	const signIn = ev.detail;
	if (signIn.error) {
	console.error("Sign in failed", signIn.error);
	this.setState({loggedIn:false, user:signIn});
	} else {
	console.log("Email: ", signIn.email);
	console.log("Name: ", signIn.name);
	console.log("Picture: ", signIn.imageUrl);
	console.log("Provider (MS, Google, FB): ", signIn.provider);
	console.log("Raw data from provider: ", signIn.providerData);
	this.setState({loggedIn:true, user:signIn});
	}
	}
	handleSignout(ev) {
	console.log("handleSignout");
	this.googleSignout();
	this.setState({loggedIn:false, user:undefined});
	}
	googleSignout() {
	console.log("googleSignout");
	if( window.gapi ) {
	console.log("googleSignout found gapi");
	let auth2 = window.gapi.auth2.getAuthInstance();
	auth2.signOut().then(function () {
	console.log('User signed out.');
	});
	} else {
	console.log('Signout: No Google API object found');
	}
	}
	render() {
	return (
	<div className="App">
	<header className="App-header">
	<img src={logo} className="App-logo" alt="logo" />
	<p>
	Edit <code>src/App.js</code> and save to reload.
	</p>
	<pwa-auth googlekey={config.googlekey}>
	</pwa-auth>
	You are {this.state.loggedIn?'signed in with '+this.state.user.provider : 'not signed in.'}
	{this.state.loggedIn &&
	<div className='dropdown'><button className="signin-btn" onClick={this.handleSignout}>Sign out</button></div>
	}
	</header>
	<script
	type="module"
	src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwaauth/dist/pwa-auth.js">
	</script>
	</div>
	);
	}
	}
	export default App;

view raw app.js hosted with ❤ by GitHub

This only implements the Google sign-in and nothing for the back-end verification, but it's a start.

Also, see this article on Medium.com