Forem

Cover image for React Js google auth
Praveen Kumar
Praveen Kumar

Posted on

2

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay