How to add Google sign-in to your Web app

How to add Google sign-in to your Web app

In this next part of the series, I’ll be walking you through an implementation of google sign-in with a simple react app and a bonus react-router example.

Up until now, we've seen 2 different hello world examples of how to add google sign-in on the front-end - using plain HTML and vanilla JS. It's been all nice and dandy for a hello world, but one thing thats been missing while I was figuring out google sign-in is what a working implementation looks like - especially in React.

*There is a react-google-login component that configures all of google sign-in behind a <GoogleLogin> tag. It's quite useful and I've used it in a few instances - my one complaint is that you can't get at the return value of the gapi.auth2.init() method. This post will show whats going on under the covers if you prefer not to use a library.

Creating a new react app with Google sign-in

First - create the app create-react-app google-auth-demo. The files we'll mainly be working with are App.js and index.html.

Add the google sign-in script tag to your public/index.html

  <script src="" async defer></script>

Add the login button

In App.js - add some state to keep track of when the user has signed in

contructor(props) {
    this.state = {
        isSignedIn: false,

Add the button to the component

render() {
  return (
    <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />

      &lt;p&gt;You are not signed in. Click here to sign in.&lt;/p&gt;
      &lt;button id="loginButton"&gt;Login with Google&lt;/button&gt;

) }

Wait, how do I avoid showing this if the user is signed in? We can use the state to conditionally show it.

getContent() {
  if (this.state.isSignedIn) {
    return <p>hello user, you're signed in </p>
  } else {
    return (
        <p>You are not signed in. Click here to sign in.</p>
        <button id="loginButton">Login with Google</button>


render() { return (
<div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Sample App.</h2>


); }

  • Since conditionals are a little hard to write with inline JSX, I've pulled out the conditional block to another method to provide the component that we want.

At this point, you'll have a button that does nothing (the best type of button) and you'll see the "You are not signed in" message

Add sign-in

To finish setting up google sign-in, you'll want to initialize the library using gapi.auth2.init(). A good place to do that is inside of componentDidMount()callback.

componentDidMount() {
  window.gapi.load('auth2', () => {
    this.auth2 = gapi.auth2.init({
      client_id: '',

To use the default styling, use the gapi.signin2.render method when initializing your component.

onSuccess() {
    isSignedIn: true

componentDidMount() { window.gapi.load('auth2', () => { this.auth2 = gapi.auth2.init({ client_id: '', })

window.gapi.load('signin2', function() {
  // render a sign in button
  // using this method will show Signed In if the user is already signed in
  var opts = {
    width: 200,
    height: 50,
    onSuccess: this.onSuccess.bind(this),
  gapi.signin2.render('loginButton', opts)

}) }

When using this method, the button will automatically show whether you're signed in, but the onSuccess callback won't actually run unless the user clicks it when it says "Sign In". Otherwise, you are logged in automatically. One way to hook into the end of that auto sign in process is by adding a callback to the promise returned by gapi.auth2.init:

window.gapi.load('auth2', () => {
  this.auth2 = gapi.auth2.init({
    client_id: '',

this.auth2.then(() => { this.setState({ isSignedIn: this.auth2.isSignedIn.get(), }); }); })

Making a "protected" route

If you're using react-router and you want to add a "protected" route to your React app, you can hijack the render prop of a <Route>. You can do something like this:

authCheck(props, Component) {
  return this.auth2.isSignedIn.get() ? <Component {...props} /> : <UnauthorizedPage/>


render() { ... <Route path="/home" render={this.authCheck.bind(this, HomePage)}/> ... }

By hooking into the render property on <Route>, you can dynamically define what component will load when you try to access that Route.

This is the strategy employed by the react-private-route project library to make it a little bit easier to write, definitely worth checking out.


If you're implementing google sign-in in a React app - check out my github repo intricatecloud/google-sign-in-demo to see all the code above in a working setup.

Throughout this 3-part series, we've covered going from a hello-world example of google sign-in, to using the javascript library to do some hacky things. Now, we've reviewed all the code you need to integrate with the Google Sign-In button.

Sometimes, tutorials like this can be hard to follow, and it just won't click unless you see it.

Thanks For Visiting, Keep Visiting

☞ React - The Complete Guide (incl Hooks, React Router, Redux)

☞ Modern React with Redux [2019 Update]

☞ The Complete React Developer Course (w/ Hooks and Redux)

☞ React JS Web Development - The Essentials Bootcamp

☞ React JS, Angular & Vue JS - Quickstart & Comparison

☞ The Complete React Js & Redux Course - Build Modern Web Apps

☞ React JS and Redux Bootcamp - Master React Web Development

Originally published on

reactjs react-native web-development security google-chrome

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.