- 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: npm, github
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
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
- 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)
