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:

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

GoogleGSI is probably easier to implement check it out here:

My channel membership is live check it out here!:

Membership perk video:

SvelteKit OAuth2 Video:

PocketBase SvelteKit OAuth2 Video Here:

*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:

Check out my channel @ConsultingNinja for more videos like these.

Requirements when using Google Sign in Docs:

Source Code Available Here:

Vite Video Here:

Express Video Here:

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

[ConsultingNinja]

Check the description for lots of useful post release information!

[dismasbanda]

Your video is very helpful, especially your advice on how to avoid cross-site request forgery. I had to remove Google sign-in from my previous app because I couldn't handle CSRF.
Thanks for the video and continue your good work.

[muhammadnoman]

Thankyou for the video the way you describe make everything simple !

[shadmanfatin]

Thank you so much bro. You are a genius! May you go a long way insha Allah ♥ (Liked and subscribed)

[FutureMind]

Thank you for the insightful video. I have a query regarding the implementation of complete authentication, this is for both sign-in and sign-up functionalities. What steps should I take after this? Should I opt for JWT implementation, utilize sessions, or consider other options?

[DenysBabych]

great video, but how i can send a json response with the user on front end if i'm redirecting in oauth get route?

[jinamsancheti]

How can i fetch users data after they have logged in, in my react app?

[willalexander]

After this, how do we get the user info again on the front end? we can console.log it on the backend, but then we cant do anything with it.

[zzxkddd]

great!
how can you validate the token with and generate new token if needed? (if you have refresh token)

[famousfigures]

Thanks for the video, but I have a few questions: What is happening at 25:20 once the user signs in? You show a separate screen with all the console logs of token info. The end user (ie, the person who clicked on the button on the frontend) can never see any of that, right? Because those console logs are all happening on the server side.

How might we then display some of that information back to the end user on the frontend?

[jagdish-main]

Thanks for the explanation, just had one doubt why we are calling google api to get user data when we already have user data on the access token itself.. can't we just decode the access token it will save some time

[Alchemist_dream]

i got those info, but since im in a redirect url, how am i suppose to set cookie inside browser, i got stuck there, i cannot send those info or token in front, i saved it in data base, but again i don't have a unique identifier to find that user, i just stuck with those info in redirect url, two days and i haven't find a solution,

[srajanr]

It works on localhost, but fails in live site, i have added live site link also live site backend route to credentials, i am getting invalid_grant error when i try from live site after the user selects the account

[diggman]

hmmmm.... I am getting a 404 after selecting a valid google account from the 'Choose an account' page... reviewed code in github and everything matches, so Im not sure why this is happening

[Edgar-pulc]

What about github oauth ? Can you make a video about that one ?

[ynqrhur]

hey i did the google login just like you explained and i am getting the most part except for the users actual data in the final reaponse in the oauth.js file

do you have any idea about why that is happening
this is the data object i recieved to my /oauth route
data: { error: 'invalid_request', error_description: 'Invalid Credentials' }

if anyone knows the solution please help

[icalculi]

are signup and signin the same for oauth2.0?
also, what do i need to save in the database to 'identify' and or distinguish the user?

[renjuag]

Thanks for the video. Once the authentication is successful, google redirects the flow back to the application with the 'signin-google' route.But im getting 500 Internal Server error and the request fails every time.

[RitikRaj-wesc]

Hey I have implemented google auth using passportjs. Now, locally it's working fine, but after I deployed it to vercel, then ven though consent screen is shown, I am not getting back the cookie, and therefore use is not getting authenticated.

Please tell me what could I be doing wrong. I am stuck on this for more than two days.

[shivamarora]

Having the problem after logging the details I am unable to redirect to the frontend homepage it gets stuck on Google Sign In page only