DEV Community

Cover image for React Js google auth
Praveen Kumar
Praveen Kumar

Posted on

React Js google auth

Install react-google-login module
npm install react-google-login

step 2 :
Open Google developers console

Create new project
Image description

Enter The Project Name
Image description

Select you project -> Dashboard

select OAuth in the left side menu
Image description

Creating OAuth Credentials:
1.
Image description

  1. Enter Project name and select you gmail id

    Image description

  2. Add your add domain for react add (https://localhost:3000)
    Image description

Now You can see the credentials in the dashboard
Image description

Setting Up in react

<GoogleLogin
         clientId={props.authid} // provide your clint id here
         onSuccess={responseGoogle}
         render={(renderProps) => (
           <button
             onClick={renderProps.onClick}
             disabled={renderProps.disabled}
             class="bi bi-google btn btn-dark"
           ></button>
          )}
          theme="dark"
          icon="false"
          onFailure={responseGoogle}
 />
Enter fullscreen mode Exit fullscreen mode
const responseGoogle = (e) => {
   console.log(e.profileObj) //Data Of the User logged in
}
Enter fullscreen mode Exit fullscreen mode

that's it you have successfully created an clint side google auth now you can use the data to store it into your backend and use it like normal JWT authentication.

Image description

Discussion (0)