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

[@ConsultingNinja]

Check the description for lots of useful post release information!

[@ezeportaep]

Hello there, how can i send the jwt token to the fortend to storage in the localstorage

[@dismasbanda8153]

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.

[@ConsultingNinja]

Glad it helped!

[@FutureMind323]

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?

[@shadmanfatin777]

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

[@ConsultingNinja]

You are very welcome! I am glad this has helped you! Thank you for the like and subscribe!

[@shadmanfatin777]

​@@ConsultingNinja❤

[@greycode_dev]

The video was very helpful. I have noticed that you used express but seems like you have used a boilerplate that already had cors and other staff setup for you already, if soo can you please the name of it soo that i also look into it?

[@muhammadnoman6513]

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

[@ConsultingNinja]

Glad it was helpful!

[@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?

[@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

[@ConsultingNinja]

Yes, you can. Sorry if that wasn't clear. I ended up making another video to try to clarify that here kzbin.info/www/bejne/eZm4cpaMZauXrK8. I was just showing that you can also make use of that API if you needed for testing quickly. You would NOT want to do that in production.

[@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?

[@ConsultingNinja]

Hello, It sounds like you are probably more comfortable working in the front-end. If that is the case, then I would suggest you implement the Google GSI method of OAuth as it is mostly done in the front end. Check out the video on this method here: kzbin.info/www/bejne/qKO2l6aue9Zjetk At the end of that video you would simply save whatever user information you want in your backend and the rest is returned to your front-end already (which you can add to if you like). Hope this helps!

[@famousfigures]

@@ConsultingNinja Thank you! I watched the vid and it helps, but I have a tricky situation and was hoping you could make a recommendation: I have a user admin dashboard app (lets you look up users, see & change their info, etc) that consists of 2 parts: 1) A React SPA frontend for the UI, and 2) a simple Express server backend providing API endpoints that get and update the user data. This is sensitive info, so now we want to secure this app such that only our team members can login & use it. Furthermore, we want to give varying levels of access within the team like admin vs viewer roles. We already use Google workspace for all our logins at work (ie, we have gmail accounts that use our own domain name) and want to continue using those Google logins for this app if possible. So my questions are: What kind of auth flow should we use in this situation? Do we need to store info per user in our server? And critically: How would you recommend we handle the levels of access/roles needed? Ideally I was hoping that we could manage those levels within Google somehow (eg, create Google Groups to represent roles, assign users to those Groups, then our app looks up the user's group somehow during authorization) so that we don't have to keep a separate user DB with access info elsewhere. What do you think?

[@ConsultingNinja]

Sorry for the delay I didn't see this response. These questions I can't answer without understanding your current architecture. These would all depend on what is already implemented. If I was starting from scratch to implement what you are describing and it is already decided I need my own server I would implement my own users. I would allow OAuth, but I would only use it to sign up and sign in and behind the scenes be routing the info from Google through my server to verify. I would attach role information in my server and NOT in Google. You say "Ideally I was hoping that we could manage those levels within Google", can I ask why? Working with Google is a nightmare. The documentation sucks and is frequently outright wrong, misleading, or missing. This also would create a debugging nightmare since if any of the closed door stuff goes wrong at Google you have no idea what it might be and could potentially spend tons of time trying to figure out a bug that isn't caused by anything in your control. Even in your example this would require you to verify that you write your app with a way to verify the role in your own backend, so just skip that whole step and implement your roles in your backend to begin with. Just my two cents.

[@famousfigures]

@@ConsultingNinja Thanks for the response, I appreciate it! We're hosting our apps on Azure (but our login uses Google). Looks like we can do the roles through Azure with some extra hoops to jump through, but if not then we will go the local user DB way like you said. Thanks again!

[@basithp9467]

Please do a video on Google Sign in using Flutter and NodeJs

[@ConsultingNinja]

I can add that one to the list.

[@willalexander1595]

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.

[@ConsultingNinja]

Hello, It sounds like you are probably more comfortable working in the front-end. If that is the case, then I would suggest you implement the Google GSI method of OAuth as it is mostly done in the front end. Check out the video on this method here: kzbin.info/www/bejne/qKO2l6aue9Zjetk At the end of that video you would simply save whatever user information you want in your backend and the rest is returned to your front-end already (which you can add to if you like). Hope this helps!

[@diggman33]

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

[@ConsultingNinja]

This happens when your redirect url in google console is redirecting the request to the wrong spot. Where is your route being hosted? That is where the redirect url should be pointing. Double check that in your Google developer console. And make sure it matches your actual route.

[@RitikRaj-we2sc]

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.

[@ismaelpaul367]

If you are hosting client and server with different domains, the cookies won't work as you can't exchange cookies cross domain. I am having the same problem.

[@RitikRaj-we2sc]

@@ismaelpaul367 hey I got the solution. You just need to add this line to your code to make it work. app.enable("trust proxy")

[@OrelHindi]

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

[@ConsultingNinja]

Oauth2client.getAccessToken() getAccessToken(): Promise; Get a non-expired access token, after refreshing if necessary

[@sdavidpringle]

How can Google access the 'localhost' domain on your computer?

[@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?

[@ConsultingNinja]

Yes they are the same. oauth2 is just a standard authentication (who the user is) implementation. That can be used for both signing in and signing up. I think this other video will help you. Check this out. kzbin.info/www/bejne/eZm4cpaMZauXrK8 As to the last question, what I do is I take the information that comes back from the oauth2 response and create a user in my database with all (or most) of the information from payload (explanation in that video link). I add one field to my users ; which Is an application specific id (specific to MY application). Technically the never changing value (for Google) is the sub property, short for subject. That is the id in Google that never changes and is account specific. You could just use that if you want, but I like to always have two completely unique values in my applications that should never change and thus two ways to find a user. Most all of the other information is possible to be changed, including email address. Hence why Google always has users setup multiple email addresses for account recovery. But that is a story for another day. I hope that this helps! Mitch Migala (CN)

[@icalculi]

@@ConsultingNinja thanks, very helpful cheers!

[@renjuag8279]

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.

[@dhanujayayapabandara384]

Did you do successfully this task

[@swagz6440]

I am being returned the error: "{ error: 'invalid_request', error_description: 'Invalid Credentials' }" even though i console.logged the user being requested and i got the access token, refresh token and everything

[@ConsultingNinja]

Try the following: Go to console.developers.google.com/ Select your project. Click 'APIs & auth' Make sure your scope includes "email" and "profile" Wait 10 minutes.

[@swagz6440]

@@ConsultingNinjaThank you however I fixed it in the url I added an = after the ?access_token

[@bigbadcatbigbcy2933]

It was a great tutorial thanks

[@shivamarora7422]

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

[@ConsultingNinja]

What does it say in the console?

[@shainemamigo7133]

Did you fix this issue bro, i got rhe same problem

[@LaLaPaPa]

Thanks for the video CN 🎉❤

[@ConsultingNinja]

My pleasure!!

[@RamBadrinathReddy]

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

[@RamBadrinathReddy]

i also did not get a refresh token as well

[@ConsultingNinja]

Check your email

[@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 ,

[@alenaju1847]

send your github url

[@jinamsancheti2212]

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

[@32srajanr39]

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

[@ConsultingNinja]

This is most likely because there are pretty tight restrictions to using this in "testing" mode You have to publish your app in order to use in hosted domains. Go to my website : www.consultingninja.tech/ and use the contact form to send me a message with your email. I will send some screenshots to guide you. Sorry for the delay I didn't see this.

[@nuvotion-live]

Wow so easy. Thanks

[@mojgankavehei]

great video! Thanks

[@ConsultingNinja]

You're welcome!

[@Edgar-pu1lc]

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

[@ashwanthdurairaj7148]

yo, how to access email address from OAuth function

[@ConsultingNinja]

add this to the example console.log('credentials',user); const ticket = await oAuth2Client.verifyIdToken({idToken:user.id_token,audience:process.env.CLIENT_ID,}); console.log('ticket',ticket); There is extra information inside of [ticket], this will also tell you if the email has been verified. BUT remember that the email CANNOT be saved as the user! If a person has created a Google account with another email they can change the email to another one then their account will be broken in your app.

[@themacosguy]

@@ConsultingNinja But this code doesnt give us an email address. How do we decode the output give the email address.

[@ConsultingNinja]

Using the above function const ticket = await oAuth2Client.verifyIdToken({idToken:user.id_token,audience:process.env.CLIENT_ID,}); console.log('ticket',ticket); That will in fact give you the email address as well as other information.

[@shainemamigo7133]

Thank you so much

[@Anushkai1]

Nice Explain

[@ConsultingNinja]

Thanks and welcome

[@mohaklondhe3020]

Alligator Brackets

[@PabloMinor-v1c]

Normal

[@Joaoboscodelima.Boscodelima.]

Emuitocompricado.

[@ConsultingNinja]

There is a more simplified way to implement oauth in your app using Google GSI, you can see that here: kzbin.info/www/bejne/qKO2l6aue9Zjetk