Login / Signup / SignIn with Google | OAuth2.0 | Using React and Express JS

In this video I show how to setup your Google Developer Console to create an OAuth 2.0 consent screen and OAuth2 client id credentials to allow signing in with Google. I then show where to get the official google-auth-library for creating the initializing url and verifying tokens and extracting credentials. After that I show how to setup two Express Routes! One will build the url and pass it back to our React front-end. The other will receive the reply from Google and authenticate the code. I also show how to setup your React UI to ping our backend to retrieve the built URL and ping the GoogleAuth api using the redirect! As a bonus I also show how to use this access token to request the users information from the googleapis for userinfo! I hope that you find this helpful!

Opening Tokens:
   • OAuth2 JWT Tokens: How to Open Tokens...  

There is additional information in here please read thoroughly such as the following

GoogleGSI is probably easier to implement check it out here:
   • Login / Signup / SignIn with Google G...  

My channel membership is live check it out here!:
   / @consultingninja  

Membership perk video:
   • I launched a chatbot with my channel ...  

SvelteKit OAuth2 Video:
   • Sign Up / In with Google! | SvelteKit...  

PocketBase SvelteKit OAuth2 Video Here:
   • OAuth2 using Google, PocketBase, and ...  

Note Save yourself the headache and do NOT attempt to have a different a separate origin URI from your redirect URI : i.e. do NOT initiate the request from origin URI localhost:5173 and then try to redirect in your backend back to Google. Google will not send the code it will send a Cross Site Request Forgery token that you need an additional package and TONS of work (they rotate the keys), to pull out and verify!



OAuth2Client docs here:
https://cloud.google.com/nodejs/docs/...

Need help? visit https://www.consultingninja.tech
Check out my channel @ConsultingNinja for more videos like these.

Requirements when using Google Sign in Docs:
https://developers.google.com/identit...

Source Code Available Here:
https://github.com/consultingninja/oA...

Vite Video Here:
   • Front-end framework tool VITE , walkt...  

Express Video Here:
   • MERN Project: Create & Hookup NodeJS/...  

00:00 - Intro
01:27 - Google Console Setup
06:00 - ENV Setup in Express
07:32 - Express Setup
20:44 - React Setup
25:52 - Wrap-Up

post release update Googles Documentation is not great and you should play around a bit with opening different pieces of this to see what is inside. As an example: One place in Googles docs said that the field "id_token" only had 4 properties and none of them very useful. However after opening with const ticket = await oAuth2Client.verifyIdToken({idToken: id_token,audience:process.env.CLIENT_ID,}); I found this contained all user information as well. I have found other instances of Googles docs being misleading and or inaccurate. Just a note!