Google Identity Services Login with React (2023 React Google Login)
HTML-код
- Опубликовано: 2 окт 2024
- 🎓 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 thecoopercodes@gmail.com
![OsamaSon - ik what you did last summer [Official Music Video]](http://i.ytimg.com/vi/4DIQDnu3mr4/mqdefault.jpg)
Thanks!
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.
@@CooperCodes Oh yeah. You're welcome. Enough for a down payment on a six pack of beer right? Good luck with everything.
Hahaha I'll use my down payment wisely, thank you for the kind words and support
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!
You are absolutely welcome, glad to see my video got you on your way.
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
@@weizhao7896 I followed this tutorial and things worked perfectly
From javascript mastery right?
@@ayushnegi3610 for me, yes. Lol
Thanks a lot! Not just for the Google Login, you are telling what are you doing step by step. This is so important to understand the logic of the code.
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 💯💯
Thanks so much for the comment! Glad the content was helpful :)
@@CooperCodes Sure it was, I already implemented it into my app. Great work!
Thank you som much for this tutorial! I've been looking for well-explained installation and usage of the new Google login!
It was helpful as hell, like a bless after hours spended with implicit google API docs
Among all the other videos related with React and Google auth, this is the far most helpful video. I can't thank you enough =))
just started learning react and came across your video. it took my entire day but worth it as its working same as he shown his video! but there were some code declaration errors which I faced. but still bundles of thanks
Thanks a lot for this great tutorial. it solved me lots of trouble. Thanks
This is exactly what I was looking for!
Thanks!
Awesome explanations, thank you very much Sir.
Thanks so much for your thoughtful and detailed videos! On to the soft!
Thank you! I used old version of google sign in and it threw me an error. So I decided to use new method and found your video. Thanks again for helping)))
That is so great to hear that the video solved your problem! I made the video for people transitioning to the new login system, so glad to see it helped that case :)
Great video, helped me create a sequence diagram for explaining this process. Liked!
Glad it was helpful :) thanks for watching
Life saving my man, life saving!
Thanks! Your video content is the safest and most useful
Thank you! Appreciate the comment and glad it was useful
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?
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.
Insane thank you man!
Your a life saver tipo thank you for this I've been struggling with this for weeks now thank you
Glad I could help, thanks for watching!
Bro I am struggling Can any one help me I got "Google is not defined" error
@@durgaprasadthandra4066 nah for some reason this stopped working for me
Awesome! Learnt a few tricks from this.
does anyone get "Cross-Origin-Opener-Policy policy would block the window.postMessage call." error?
Thanks works perfectly 🎉
Worked , thanks a lot!
up to now. Your soft is great too!
Thank you, thank you, thank you!!! I have been trying to get an old program running for two days. None of my old stuff worked. All the tutorials I tryed did not work. Nothing gave me the token!
Glad the tutorials could help, thanks so much for commenting! :)
Really, a very useful video, thanks!
Thanks man. I was struggling to find the google auth latest solution.
Great! Thanks for the solution.
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?
big like brah, thanks!
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)
Thanks 😃
This saved me hours, thank you!
thanks, but I wonder why is he didn't get an google doesn't exist error...
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
Thank You Very Much..................................................
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
Not working it's throwing error google is not defined in the browser and script link is throwing 404 aborted in console
Thank you so much , your video helped alot.
You are very welcome! Thank you for watching :)
It was Great, Thanks
Thanks for tutorial
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.
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???
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?
Thank you 🙏
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.
How to display google sign up button instead of google sign in button
thanks, i will do my best to have patience for tNice tutorials because i normally don't have much, i wish there were chapters here so i could skip
in the details. when you get stuck, roll back to the beginning and start over. The other weay is to focus entirely on one set of commands
life saver video, thanks*inf
lovely video with in depth explanation but 1 question. How does one do the importings
help me I got "Google is not defined" error
Great video! just one question, how can I use the token to avoid the login every time the page gets refreshed?
I think I have the same problem, when refreshing it asks me to login again. Did you find any solution for that?
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
@Sai karthik Varanasi you can find detailed articles on the web.
@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.
@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.
Thank you so much for tNice tutorials tutorial! It's best one of the ones I have seen. You explained all very clearly and gave important tips. All
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?
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!!
Thanks man it helped me too
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);
But what if I need some restricted scopes?
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.
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 ?
its only for testing, once you published the project, others can access it
Can you please share the link to the documentation that you followed ?
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.
HI ! thanks for the video , can you shortly brief whats the different between this and the video of Google OAuth 2.0 Login for React in 5 minutes?
Thanks!
You are very welcome! Thank you so much for the super thanks, it is greatly appreciated :)
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.
add this in css to hide the error#webpack-dev-server-client-overlay{
display: none;
}
Genio😄
Google is not defined
thanks, man. it works perfectly. instruction is simple and concise
Thanks for such a great tutorial! It helped me out so much. Also, do you know if there are refresh tokens with the new google sign in library and how I can access them?
Same the token expires in 1hr. How to solve that? Did you find the answer?
@@ankitpanda1860 Did you find the answer to refresh id token mate ?
Thanks for the video! The "/* global google */ explanation was really helpful!
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
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.
thanks much, please, how to get DOB and Gender from google account?
Thanks bro. I just put credentials instead of credential. The little 's' made me brower for 30 minutes.
How can you use returned token and ask for access to Google API's like Calendar etc?
Sir, i kept on having this error "The given origin is not allowed for the given client ID.", how can i fix this?
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.
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 ?
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
@@CooperCodes same problem
Same problem were you able to find the solution?
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
Thanks I wanna get into electronic soft.
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(
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
any solution bro?
Same I'm getting google is not defined, any solutions?
I'm also getting this problem some times
@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
)
}
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 😭
How can this apply to multipage? I found myself auto signed out when switching pages..
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
Hi! And how do I get access token to use Google OAuth 2 from JWT token?
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?
After signing out and then signing back in using the Google Sign-In button, our email should not be visible.
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 ?
Any leads on this I need access token for accessing sheets API? Where I can get access token of logged in user?
why don't you put it on the request header portion.
You catch on really fast, it seems complex but once you learn the basics it pretty much branches into experintation
😢 I got "Google is not defined" error
@@durgaprasadthandra4066 same here! did you manage to fix it? also I would like to have a custom buttons for login
@@mythoredofficial yah finally it get solved
@@durgaprasadthandra4066 how pls tell us
I just get a google is not defined error I tried everything its so annoying
Great tutorial, I got everything working perfectly on Chrome, Edge and Brave. Only slight issue is my site crashes when initialising the gsi client in our useEffect while using Safari - my current work around is to check if we’re using Safari and if so I’m no longer rendering anything related to Google authentication, any idea how to fix this?
Please let me know if you got this answer! I have the same situation... Thank you.
You've earned a sub and a like, you know how to program things really well and explain it to beginners so we dont scratch our heads until hair starts falling off. You showed me that I have a programming knowledge deficiency.
There is no access token included in the jwt from Google. How to request for the access token to be included in the jwt?
also need to figure out how you get access tokens? Did you figure it out?
Wow, this is a great tutorial. I'm having to force the npm install of react-google-login. Is there another updated package? I'm googling where to find such an update since the deprecation on July 29th. Thank you for taking the time to make this video for all to see.
Great Tutorial! But i have a question. Your tutorial made use of jwt token but mine returns an access token which can't be decoded the way you did with the jwt. How do i go about this?
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.
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...
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"?
Did you find out the answer?
@@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
@@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.
@@romanhrytsyshyn1966 Yea, i hear people complain about github pages a lot. I used firebase for hosting as well
it is very easy to deploy
can you please help , it is showing that google is not defined please help
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",
});
}, []);
Can someone help to understand why I'm receiving response as undefined?
hello, ı am getting the same problem that returns the console undefined. did u solve the problem? thanks
Cool video man, but I'm trying to figure out how to validate the user in my backend, so that I can create an account. Any idea about that. Thanks for the tutorial!
I may do a tutorial soon with this addition. The basic idea is that the google identity services has that callback function that gets hit (the one in the tutorial), you can do a request to your server inside of that callback function on the react side. The logic is like this:
Google validates login -> callback function gets called -> make a request to your own backend server and pass in the email from google -> on your backend code, see if a user has been created with that email in your backend -> if not, create new user
This is kinda tricky, but hopefully you can see each step. When I say “request to your own server” I mean you would do something like fetch(“YOUR_BACKEND_URL”) from the react side.
@@CooperCodes I was thinking about it and when I think validating, I would also expect the backend to do the check with Google Identity. Let me explain what I have exactly in mind. :)
1. Client app - I login to my google account and get the JWT token (or this auth code only? Not sure yet)
2. On the backend I have no users in the db but I relay on Google accounts' email addresses and I have a list of white listed users who can access the resources of my app.
3. Whenever I want to access the backend resources I need to authorise the user. In the client I store JWT since login and add it to the request header whenever I call my backend server.
3. The backend calls the Google Auth to decode the JWT token and verify it, make sure it is still valid and belongs to the white listed user.
This way I know the user's session is valid and I get to know the user's identity. What do you think?
@@kasiafrania1478 That's exactly what I was asking how to validate the token is authentic. Not a forgery. It turns out I already figured it out.
You need to send the jwt in the callback to your server and there use google api's Library to validate and decode the token. Then you can go and create user account or whatever.
Here are the details: developers.google.com/identity/gsi/web/guides/verify-google-id-token
@@CooperCodes please do it, we are waiting on it !
If someone else's program is connected to Google login, how do I get this "jwt token"? Are there any corresponding videos or articles?
@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
Ok, but my code isn't working cause "google is not defined", how I can fix it?
Same. Did you find anything?
how do you setup the scopes to use google apis?
This is insanely helpful. Thanks so much.
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.
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.
How can I embed this into my HTML code?
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;