Google Identity Services Login with React (2023 React Google Login)

🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
In this video I go over implementing login using the new Google Identity Services login. We use the Google Identity Services to authorize a successful Google login and then save the JWT in our React project. This tutorial is also useful when using external authorization alongside the google login authorization. This video is also helpful for Google One Tap (Google one-tap) login and is a similar setup.
Business inquiry? Email [e-mail]

[@thecyrusj13]

Thanks!

[@CooperCodes]

Yo this is my first super thanks! And the fact that its 10 bucks! You are way too kind, thank you so much :) this channel is genuinely a labor of love which I hope people see in the content, and I look forward to providing more in the future. This donation genuinely means so much to me. Thank you for your kindness.

[@thecyrusj13]

@@CooperCodes Oh yeah. You're welcome. Enough for a down payment on a six pack of beer right? Good luck with everything.

[@CooperCodes]

Hahaha I'll use my down payment wisely, thank you for the kind words and support

[@HemantDuttaHD]

You're a life saver mate! I was following a 5 hour long tutorial trying to make social media app using react and the guy was using the outdated method for this google oauth thing and I was losing my mind. Thank you so much! You've been a huge help!

[@CooperCodes]

You are absolutely welcome, glad to see my video got you on your way.

[@weizhao7896]

hey, have u successfully updated the google sign-in from the old version? I watched this video and come back try to fix the old one, but just get stuck T^T

[@HemantDuttaHD]

@@weizhao7896 I followed this tutorial and things worked perfectly

[@ayushnegi3610]

From javascript mastery right?

[@weizhao7896]

@@ayushnegi3610 for me, yes. Lol

[@fardinkashef3604]

That's how a tutorial should be. Great job. I really liked it.

[@kushagra4401]

Thank you so much for this. you are a life saver. i was having problems working with old oauth and spent hours on it. finally this worked

[@CooperCodes]

Glad to see it was helpful! Thank you for watching and supporting :)

[@kushagra4401]

@@CooperCodes Hey! is there any way we can customize the button rendered by it, like i want to align it center by default it is right aligned. i have tried css properties and different ways but couldn't figure it out

[@rajatkushwaha279]

can u send the code?? It's too long to write :{

[@kushagra4401]

@@rajatkushwaha279 const googleLogin = (res) => { const userCred = res.credential; const user = jwtDecode(userCred); // use the user data }; useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "your client id here", callback: googleLogin, }); // mention id of btn, here i used googlelogin google.accounts.id.renderButton(document.getElementById("googleLogin"), { theme: "outline", size: "large", fullWidth: true }); }, []);

[@rajatkushwaha279]

@@kushagra4401 Thanks :)

[@shireensheikh505]

2024 Jan- this works! Thanks man for making this video! Helped me loads

[@sangkyunkim-n5g]

Awesome!! Clear and accurate explanation. It helps me a lot. Thank you so much!

[@solo-yl8uc]

does anyone get "Cross-Origin-Opener-Policy policy would block the window.postMessage call." error?

[@faheemahmad5882]

You are so underrated 🙌 thanks

[@CooperCodes]

Thanks for watching Faheem, appreciate yah :)

[@knuckless__]

somebody wrote on ts? do you know how solve the problem with that(type script can not find a google..) maybe later gonna be more problems witch you solved can you write here solve?

[@rahulprajapat1087]

Great Work Bro , Appreciated !!

[@abdulladoo5096]

very much thank you! You are a really good teacher. Thank you again :)

[@CooperCodes]

Thank you kindly for the comment :) always appreciate those who are willing to learn, thank you for the kind words.

[@underworld-of-gaming]

How to display google sign up button instead of google sign in button

[@brandonwie4173]

Thanks a ton. Wish they had typescript files for d.ts. Subed!

[@dudewithdonuts7639]

Great tutorial man

[@carmelchurchsatchiyapuram2292]

you are literally the best

[@ishakbekhti6175]

Trying to make a soft you hear in your head co to life might be the hardest part starting out but I guess that requires so solid

[@aylanelson1012]

Love the Tutorial: Is there any reason that the token might fail? And do you have suggested work arounds! Cross-Origin-Opener-Policy policy would block the window.postMessage call.

[@carriep7812]

This was awesome! Thanks for putting it out there

[@guruigang]

Thank you so much. So clear.

[@saerakurbanova680]

thank you so much for this tutorial❤❤❤

[@lucassu9099]

How can this apply to multipage? I found myself auto signed out when switching pages..

[@niravthakar3813]

Thank you for providing valuable contents. Do you have any example to work with oauth 2.0 working with scope parameter to fetch the authorization code and then token? It will be great help if you have it. Thank you for your time.

[@viktoriazruttova]

Hi, since you commented 11 days ago I assume you were successfully able to run this tutorial. I ca't run this because it shows error: 'google' is not defined... I included script in index.html...

[@antoniutzu]

big like brah, thanks!

[@fredycoronado8262]

If replicate the code in next in the project is necesary add two uris: localhost and localhost:3000

[@tajindersingh806]

great booster, thanks you bro

[@hamednaderi7675]

many thanks 🙏

[@JahinZaman]

Thanks!

[@badboys7656]

Thanks bro..

[@vitor-is5od]

Nice video! Can I make the login, checking user-mail in db? I think the userObject will have the email if user sign in google, right? Is it safe only check if the userObject email exists in my db?

[@edgarhovsepyan893]

Can someone help to understand why I'm receiving response as undefined?

[@emirhanguleroglu9902]

hello, ı am getting the same problem that returns the console undefined. did u solve the problem? thanks

[@coderart__2802]

Hey, could u tell the same how to get token ID in redirect mode. Could u just make out a video for it. I need your help as soon as possible,

[@ThanHtutZaw3]

why you don't need to store user state in localStorage , your state is not persisting

[@zandyasin1321]

Thanks

[@knowledgepower5192]

thank you

[@ethangordon3935]

So this gives an accessToken but when I do passport.js google OAUTH the accessToken is much different. And if I try to use this accessToken with another API call(the youtube data API) it says invalid. Any reason why?

[@Omar-vx1jh]

How do I pull up those effects slots on the left of the setuper?

[@spurgeongnanprakasham]

Sometimes this fails. Showing Google not found error in the console. Because the page loads before the Google script loads. Is there any work around for this behaviour.

[@arvinsim]

Is there an implementation that just uses HTML data attributes?

[@zhenyong89]

How can I embed this into my HTML code?

[@justineroanpacia7436]

Are the sample softs there when you open the software or do you have to download them from sowhere

[@zankgotothemoon6802]

Hi, I not found picture object after login success.

[@sdaiwepm]

11:16 Anyone else failing (80% of the time, not always) with a console.log of "google is not defined"?

[@rahmanhamim]

i'm using nextJS with typescript . google is not defined. I've tried window.google and /* global google */ not working...

[@CooperCodes]

I think Next.JS may load in the scripts of the HTML differently than React which could be the root of the issue. I can look into this and create a Next.JS and typescript authentication example. The loading is an issue b/c the google keyword is coming from a script that React is waiting on, once the script is loaded then React starts up so you can use that google keyword. So if Next loads everything at once, and doesn’t wait on the script, the google keyword won’t exist. Hope this explains a little.

[@rahmanhamim]

@@CooperCodes pls make a video with NextJS ASAP. There is no tutorial on KZbin with NextJS. Thank you ❤️

[@mohithkumar1624]

@@CooperCodes i also have the same issue,please make a video using next.js,please,,,,,was struggling to find solution for this from past 2 days still didn't got any reference anywhere😭

[@Evan-ho7mn]

I was able to get this to work on my next js, non typescript though. Here is my useEffect const [loadGoogle, setLoadGoogle] = useState(false) useEffect(() => { if (loadGoogle){ /* global google */ google.accounts.id.initialize({ client_id: process.env.GOOGLE_OAUTH_CLIENT_ID, callback: handleCallbackResponse }) google.accounts.id.renderButton( document.getElementById('signInDiv'), { theme: 'outline', size: 'medium' } ) } }, [loadGoogle]) Then in _app this was my script tag setLoadGoogle(true)}/>

[@SirKenGme]

I also use nextJS with typescript like you, here this code work for me. create file ---> useScript.ts --- export function useScript(url: any, onload: any) { useEffect(() => { const script = document.createElement('script') script.src = url script.onload = onload document.head.appendChild(script) return () =>{ document.head.removeChild(script) } }, [url, onload]) } file ---> LoginGoogle.tsx import { useScript } from './useScript' declare const google: any export default function LoginGoogle() { useScript('accounts.google.com/gsi/client', () => { google.accounts.id.initialize({ client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID, callback: handleCallbackResponse }) google.accounts.id.renderButton( document.getElementById('signInDiv'), { theme: 'outline', size: 'large' } ) }) }

[@songsonggaming814]

Why i got disallowed useragent when login in instagram web browser? Can you explain to me

[@Victor-wh9bs]

Supperrre

[@elanzini]

When you set the src of the img to be the link to the picture, don't you need to authenticate that call with an access_token? I had problems in the past where at some point it would start to return 403

[@kamichikora6035]

The pupop doesn't appear on mobile!!! I'm so dead right now please help

[@csbhagwant]

This is the start of a comment thread.

[@ahmadhasham6890]

does this only works with test users?

[@philcajurao]

how about for sign up?

[@zerocadev]

i had : Uncaught ReferenceError: google is not defined

[@X-ine]

ok I’ll try that lol

[@akungubrian6406]

how can we use this with redux

[@vallard-]

yeah, unfortunately it doesn't look like this works anymore as all of the recent comments are seeing google is undefined. Even with adding the /* global google */ comment and const google = window.google below the imports. 😞

[@kartik9892]

Its all confusing. Till now ive come across 3 ways to achieve "Signin with google" functionality 1. The old way (gapi) - the one google now says is deprecated gapi.client.init({...}) 2. The new way google.accounts.oauth2.initTokenClient({...}) 3. The way you showed in video google.accounts.id.initialize({...})

[@mohammadrahman8911]

Thank you for this! Qq...once the user is logged in...what's the recommended approach for backend API authorization? If I have an Express backend...can you send the Bearer token in the header?

[@osrs-raph]

You could use a library that allows you to set cookies and create a "token" cookie, then on the backend verify that token. I'm not sure about the backend details but I'm sure there is a function to validate it.

[@huzaifac137]

Not working it's throwing error google is not defined in the browser and script link is throwing 404 aborted in console

[@aneeshmohanan5121]

10:49 The updated jwt decode code is import {jwtDecode} from 'jwt-decode'; const userObject = jwtDecode(response.credential) console.log(userObject) posting this as I had error when executing the code in video. so thought might be helpful for anyone watching

[@SuperChrisssssssss]

jwt-decode no longer has a default export. here's the updated import code: import { jwtDecode } from 'jwt-decode'; import './App.css'; function App() { function handleCallbackResponse(response) { console.log("Encoded JWT ID token: " + response.credential); var userObject = jwtDecode(response.credential); console.log(userObject);

[@luberalexanderechavarriabe4156]

Everyone does not have the skill to teach easily and clearly mate, but you do. You made it simple and straightforward, thanks a lot. I got the error, google doesn't exist, Just in case someone else gets the same, you have to add window. google.............(add window before google)

[@Manja-rd3dr]

Thanks 😃

[@DanielMShawn]

This saved me hours, thank you!

[@solo-yl8uc]

thanks, but I wonder why is he didn't get an google doesn't exist error...

[@charleneleclerc9205]

not working for me, i have always an error "window.google.account is undefined" and i don't understand why😢 Sorry in advance for my english

[@Magnify.]

If the user logged in and then refreshed the page will it undo their log in and ask them to log in again?

[@oscargalvez7]

Amazing tutorial! I have watched plenty of tutorials overall and this is one of the easiest to understand and straight to the point. Also, I loved how I just did what you said and it worked the first time! That doesn't happen often. Keep it up 💯💯

[@CooperCodes]

Thanks so much for the comment! Glad the content was helpful :)

[@oscargalvez7]

@@CooperCodes Sure it was, I already implemented it into my app. Great work!

[@kanhatiwari7150]

why i am getting error every-time that "google is not defined" although my app is working fine but error message show every-time and then i have to close it manually any solution to this issue?

[@pippinbloom]

In viewing this, I didn't realize that the comment /* global google */ was actually necessary and not just a regular comment.Thank you so much!!

[@forever-knight]

Thanks man it helped me too

[@foreigner268]

Thanks for the video. Is there a way to format the Google signin button to use Material UI? I want it to use my theming.

[@learnerboy4405]

I am getting this error : "[GSI_LOGGER]: The given origin is not allowed for the given client ID. _.z @ m=credential_button_library:44" , But I added exactly what you instructed can you help pls?

[@artistic_bad_boy]

Hi, can some one help me with that error? : [GSI_LOGGER]: The client ids used by Google Sign In and One Tap should be same or from the same project. One Tap may be blocked in the near future if mismatched.

[@joeljosephct6549]

add this in css to hide the error#webpack-dev-server-client-overlay{ display: none; }

[@kuentasapp1199]

Great video! just one question, how can I use the token to avoid the login every time the page gets refreshed?

[@PardoLiat]

I think I have the same problem, when refreshing it asks me to login again. Did you find any solution for that?

[@sahilverma_dev]

for this you have to store the user data in localstorage and if there is no data in localstorage only then make a login call

[@sahilverma_dev]

@Sai karthik Varanasi you can find detailed articles on the web.

[@sahilverma_dev]

@Sai karthik Varanasi basically when user gets logged in google returns a object. just store that object into the localstoage and for next write the code in such way that first it'll look to the localstorage for the user data if its null or not exist login the user and if user data is present in the localstorage then no need to login the user.

[@kushagra4401]

@Sai karthik Varanasi you have to store data in localstorage. you can do it by localStorage.setItem() function it takes two parameters first, what you want to name it lets say 'profile' and in second you have to pass data in string format (JSON.stringify). now when you want to access the data on refresh you can get data in useEffect (after refresh) using localStorage.getItem('profile') you have to pass the name you chose like i took profile for example.

[@thecyrusj13]

Thanks so much dude. Google Technical Support couldn't even help me out as much as you did. The official Google docs on this didn't even mention React (as far as I know). The docs were frightening and I thought I would never figure this out with all the rabbit holes and snail trails. But anyway, I've watched 4 other videos on one-tap and yours is the first one that makes use of the sign in button if the user is not already logged in. One note I would add is that instead of using /* global google */ you can use window.google.accounts.id, etc. When I searched for "google one-tap" I didn't find your video. I had to search for "google signin". So if you added "one-tap" as a tag or search word it might increase your views (if you haven't already). It's nice that I didn't have to set up fake server and use the google-auth-library package for this to work also.

[@CooperCodes]

Yeah hah when I made this video this stuff was super fresh. If I were to do the video over again I would definitely grabh google from the window object like you suggest, luckily its a one line fix but still wish it was in the video. Glad this was helpful! The Google documentation is surprisingly awful... considering its yah know... Google???

[@onegentig]

But what if I need some restricted scopes?

[@goksuokar288]

Hi!! I'm still getting a google not defined error during mounting, how do you fix that??? I put the script in and you can access google object from the console but react will throw an error while rendering (not compiling, I disabled the linter for that) and will not render anything.

[@instaboy007]

I implemented the login button it works fine but the problem is that I cannot style/customize the google button. I wanted to make the button responsive how can I do that ?. I tried using CSS Bootstrap nothing worked 😭

[@levankantara]

Thank you! Works fine in Localhost, but i want to make it public. now I get error '[GSI_LOGGER]: The given origin is not allowed for the given client ID.' I can only log in with an Email that I manually added while in Testing stage. What extra steps do I need to make it useable " IN Production"?

[@romanhrytsyshyn1966]

Did you find out the answer?

[@levankantara]

@@romanhrytsyshyn1966 If i remember correctly, problem was in Javascript Origins. I forgot to include my website URL with 'www.' Make sure you include both with and without WWW

[@romanhrytsyshyn1966]

@@levankantara Well, as I understood, I have another problem. I deployed my app using Github Pages and this auth doesn’t work because Github Pages works only with static data.

[@levankantara]

@@romanhrytsyshyn1966 Yea, i hear people complain about github pages a lot. I used firebase for hosting as well

[@levankantara]

it is very easy to deploy

[@nextdev3637]

Thanks bro. I just put credentials instead of credential. The little 's' made me brower for 30 minutes.

[@Bruno87198]

Thanks for the video! The "/* global google */ explanation was really helpful!

[@CooperCodes]

Thank you, appreciate it! The global google is a little strange, but I found it to be a good solution when depending on scripts from your HTML like I discussed in the video. Appreciate the support

[@SubashBalasubramanianLatentVie]

Hello, index.html Using both async and defer together is technically allowed, but it does not follow the intended usage of these attributes and can cause confusion. According to the HTML specification, if both attributes are present, the async attribute takes precedence, and the defer attribute is ignore.

[@ankitverma4159]

Can you please share the link to the documentation that you followed ?

[@ruben1626]

This is the official Google Identity documentation for web: developers.google.com/identity/gsi/web/guides/overview He basically goes through the 'get started' and 'sign in with google button' sections.

[@frontend_ko]

thanks, man. it works perfectly. instruction is simple and concise

[@joshuajaydan]

How can you use returned token and ask for access to Google API's like Calendar etc?

[@kushalafk6299]

my google script is loading after the react page is loaded I even used async and defer. This sends me an error google not found as it is not loading before the page rendering

[@labibhossain6519]

any solution bro?

[@hackemmemes]

Same I'm getting google is not defined, any solutions?

[@burhanali4961]

I'm also getting this problem some times

[@labibhossain6519]

​ @Em Jack ​ @Burhan Ali Here is my solution : inside `​index.html` file i didn't used the word 'async` & `defer` i just used the script tag with src. then i declare google as : import jwt_Decode from "jwt-decode"; declare var google: any; function App () { useEffect(...) return( ...code ) }

[@hohooh0320]

While I clicked google login button, it does pop up a window. But in the window, it's blank, there is no account selection option. May I ask how to deal with that ?

[@CooperCodes]

That is strange, do you have pop up blockers on possibly? Or have tried a different browser? The window functionality is fully managed by google so that is strange

[@KUNTALROY13]

@@CooperCodes same problem

[@vaishnavijaiswal9347]

Same problem were you able to find the solution?

[@praveenkrishnan4935]

Same Problem. Follow this steps to solve the issue Add both localhost and localhost: to the Authorized JavaScript origins box for local tests or development URL : stackoverflow.com/questions/68438293/the-given-origin-is-not-allowed-for-the-given-client-id-gsi

[@felixndifon8511]

Sir, i kept on having this error "The given origin is not allowed for the given client ID.", how can i fix this?

[@airplaneCrashe]

Where is the link on gihub? It doesn't work and I don't know if mistake is in my code or it's something else. I checked everything. If you give a tutorial you can give the link on the project as well(

[@050abhishakekumar6]

can you please help , it is showing that google is not defined please help

[@hamzaahmad5795]

Don't forget to add 'global google' comment useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "1000455773534-splesvkav6nhnsqh465a2t5j1cmib7sp.apps.googleusercontent.com", callback: handleCallbackResponse, }); google.accounts.id.renderButton(document.getElementById("signInDiv"), { theme: "outline", size: "large", }); }, []);

[@codersdance]

There is no access token included in the jwt from Google. How to request for the access token to be included in the jwt?

[@stebro2101]

also need to figure out how you get access tokens? Did you figure it out?

[@adityatile2970]

After signing out and then signing back in using the Google Sign-In button, our email should not be visible.

[@jordankhalil8961]

Im having trouble implementing this in typescript react. An error keeps being thrown at me stating that 'can not find name google'.

[@jordankhalil8961]

well the global google note in my useEffect is not doing what is suppose to do. My typescript is still saying google is not defined. I dont know how to figure this out someone help?

[@vladyslavdremliuha6147]

Hi! And how do I get access token to use Google OAuth 2 from JWT token?

[@hackytech7494]

You mentioned that in order to log in successfully we only have to use the accounts which we have under test users, so My question is, how other users will login using their google account ?

[@icyclestick178]

its only for testing, once you published the project, others can access it

[@ImReed292]

Google is not defined

[@ranamdissa]

Thanks a lot for this great tutorial. it solved me lots of trouble. Thanks

[@ceez3317]

I just get a google is not defined error I tried everything its so annoying

[@leandromarquez9257]

Hi Cooper, What if I need to send an auth code to the backend to get access and refresh tokens ? Should I use another way ?

[@tanayparashar1487]

Any leads on this I need access token for accessing sheets API? Where I can get access token of logged in user?

[@getachewsharew5904]

why don't you put it on the request header portion.

[@shizhanli6765]

Thanks a lot for your video. Do you know how to judge if a token has expired? I know there is token.exp in old version google login. But I could not find one in new version.

[@CooperCodes]

You can just create your own JWT to manage the time you want your login to expire when the Google sends you that successful token. Redux can help you manage multiple things such as your own expiring token alongside the Google information. I am most likely going to do a video on something like Redux soon. If you're unfamiliar with creating your own expiring JWTs, take a look at this www.codegrepper.com/code-examples/javascript/how+to+set+expire+time+of+jwt+token+in+node+js Hopefully this helps, thanks for your comment.

[@themacosguy]

​ @CooperCodes All of this work fine. But dont know while hosting this code it says CORS error. I am using CORS package as well and it doesnt even show up on local server though I dont use any CORS blocking extension. I have been mad as all of my work is based on google login. Please help

[@chaosbib]

If you're using typescript and having a problem with google.accounts.id.initialize({}) Add this to the top among the imports: declare let google: any;

[@nastasiya_pant]

Ok, but my code isn't working cause "google is not defined", how I can fix it?

[@jordan_777.]

Same. Did you find anything?

[@selectablekitchen5315]

OMG THANK YOU!!! I went through hours of "beginner" guides before I could find tNice tutorials and at least make a simple soft... Only video I've

[@tudoreugenchindea2414]

Amazing video. I need to integrate this to my spring boot backend which uses JSESSIONID. Do you know how I could integrate that from this JWT token?

[@1coolguy647]

Thanks for the tutorial, do you know how to extend/refresh a user's token because it expires after a little

[@CooperCodes]

If you look at the end of my Get Access Token video (recent upload) I explain the two different auth flows. With only the client side you unfortunately need to constantly ask for permissions, but if you do refresh tokens (and store in your own database) they can last way longer (days to months). Gonna make a refresh token video soon