sahilrajput.com

Learn Google Auth

• Google Auth Library: npm: This is Google’s officially supported node.js client library for using OAuth 2.0 authorization and authentication with Google APIs.
• GoogleApis: npm: Click here
• @react-oauth/google: npm, github (used in sahilrajput03/react-google-oauth)
• react-google-login: npm, github (package is no longer maintained as mentioed on its github repo)

Authorization issue - 13 Dec 2023

UPDATE: 13 Dec 2023 - This happens only when pushed to vercel site (subdomain) and I am hoping that the issue will be gone after the app is switched to “production” as suggested by an answerer in the above stackoverflow question.

• Google query to explore more: Click here
• Stackoverflow question from above google search: Click here

Implementing google signin (Totel Scam Project)

Quick Links:

• My Github Repo: sahilrajput03/react-google-oauth
  • Deploye at: https://example-react-google-oauth.vercel.app/
  • Source (original Totel project notes): Click here
  • OTHER SIMILAR PROJECT (might be helpful) found on GITHUB via search:
    • (react+java) spring-boot-react-oauth2-social-login-demo
• Google APIs console: Click here
  • Source: Official google signin docs
  • Follow along video by an amazing person: @youtube

On Oauth Consent Screen you need to fill it like this:

By default we get general details of the user who is logging-in in our app but we want more details from the user, we can get it by selecting some desired scopes from the list (point 2):

We don’t want any test users so we can click save and continue:

In the end it shows the summary and you can simply click “BACK TO DASHBOARD” now:

Out consent screen is ready now we can create the OAuth credentials:

And finally you get the clientId and clientSecret like that:

NOTE: for nextjs’s nextauth we change the redirect url like that, (Since I am running on port 3001, I need make the port as 3001)