Google Login in React

Hello developers,
in this blog I am going tell you that how can you implement google signin/login in your app/website. I am using react-google-login library for this blog. Else you can do it with firebase too but it has a different process.

First Steps.

• You must need a google account.
• You have to generate a client id with google api.
• While generating a client id, you need to permit the url in which the login system will work. example: mysite.com.

Following me on twitter will help us both so consider following

Using the library

npm install react-google-login or yarn add react-google-login

import { GoogleLogin } from 'react-google-login';

function App() {
  const responseGoogle = (response) => {
    console.log(response);
  }

  return (
    <GoogleLogin
      clientId="your-client-id"
      buttonText="Login"
      onSuccess={responseGoogle}
      onFailure={responseGoogle}
      cookiePolicy={'single_host_origin'}
    />
  )
}

How to keep you logged in

To keep your user logged in you need you use isSignedIn props.

<GoogleLogin
  clientId="your-client-id"
  onSuccess={responseGoogle}
  isSignedIn={true}
/>

Get user info to display

It is pretty simple to get user info, in case you want to display it.

const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [picture, setPicture] = useState("")

const responseGoogle = (response) => {
  console.log(response);
  // getting user info
  setName(response.profileObj.name)
  setEmail(response.profileObj.email)
  setPicture(response.profileObj.imageUrl)
}

+Bonus

you can use a loginStatus, setLoginStatus useState system to redirect you once someone is logged in.

Thanks for reading this blog till now, if you get any errors, or questions. You can ask me those in the comments below.