How To Integrate Google Login in React! [Easy] | Add Auth To Your React Project
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- Are you looking to integrate google login in your react website. In this video, i will show you how to add google sign in Auth to your react project easily!
💖Be A Patron(Support On Monthly Basis)-
☑ / codewithmasood
Get Source Code and Other Perks!
👋Connect With Me:
▶Facebook - / official.codewithmasood
▶Instagram - / codewithmasood.official
▶Blog - / codewithmasood
▶Pinterest - / codewithmasood
📙Must Read Books That Will Transform Your Thinking-
▶Psychology of Money: amzn.to/3jqvhyp
▶How to Win Friends and Influence People: amzn.to/3GifLh7
▶Power of Habit: amzn.to/3FRszcW
▶Ego is the Enemy: amzn.to/3GmZA26
▶Cracking the Coding Interview: amzn.to/3C2bYBW
▶Introduction to Algorithms: amzn.to/3jzkt1f
▶Cryptography and network security: amzn.to/3WQrol3
#react
#tutorial
#codewithmasood
#programming
#coding
DISCLAIMER: Some of the links in the description above are affiliate links, which means that if you click on one of the links and make a purchase, I will receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for your support!
![Megan Thee Stallion - Neva Play (feat. RM) [Official Video]](http://i.ytimg.com/vi/TpYTyAaTRts/mqdefault.jpg)
I spent 2 days trying to figure out how to get it done!! Bro u are Amazing. Thank u from the depth of my heart!! I was stuck with how to get data from acess token actually.
Glad to hear that!
Masood thank you for this amazing tutorial. I was stuck trying to implement this on my own and you accomplished more in 5 minutes than I did all day. Giving me hope for my first custom React app. Thank you 🙏
thank you it worked perfectly !
awesome lesson, thank you
You are welcome:)
Thank you
thank you brother
Thank you ,
Cross-Origin-Opener-Policy policy would block the window.closed call. how to fix this error, when google popup opens
Thank you so much man. You made my day.
blank page comes
Fixed it by setting only localhost
Same if you find solution tell me
I watched another video and did it .
Send that video @@Karadiofficial
how plss tel which video?@@Karadiofficial
Thanks a lot, very helpful 😁
Thanks
thanks bro , saved my hours .
Cross-Origin-Opener-Policy policy would block the window.closed call. how to fix this error, when google popup opens
have you found the solution yet?
I implement like the video, but the popup show on right-center not center-center, do you know why?
great job man
Please do the facebook login next! thank you for the tutorials!
Okay! Will upload soon
thanks its working
thk man, u save me
Why doesn't Mine return Access_token?
what happen if a i'd like logout?
I followed your steps and it's working, thank you! But there is a error "Cross-Origin-Opener-Policy policy would block the window.closed call." How to fix this?
Welldone champ!
hay. i from vietnam
hey can u do a tutorial about how to do it in a server? cus setting the google api key for the public to view is dangerous right
Okay! Will make it soon!
This method is the easiest. I want to update my API for authentication with node express. But it's alot harder doing it on the backend. Since you worried about security on the client side, I can help you with that. In your react app, at the root level, create a new file ".env" then pass in environment variables e. GOOGLE_CLIENT_ID = the id from Google.
The go to you registration page and to get the Google client id. If it's vite, do import.meta.VITE_GOOGLE_CLIENT_ID if vanilla react, replace the VITE with REACT. You welcome your keys are safe. I personally will prefer all my site logic on the server, I just think it's better to separate it. But the above method I gave you is quite secure. When you host it, pass the .env key and value pair on the site you hosted it
bro what is this error an error occurred the current origin is not registered with the google oauth client
thank you
You are welcome!
thanks bro it is very halpful for me to impliment google login
Glad to hear that!
and also i got only white screen when I click on the button
Watch the video again carefully bro and you will get it done. Moreover, you can message me on Patreon or Instagram for guide
how to resolve cors origin opener policy error
Thank you 🇧🇷 🤝 🇮🇳
You are Welcome
Hello brother i have a doubt, this code is used only for the test users that we've provided. how to make it work for every user
Do you recommend using this method with next.js framework in place of next-auth package?
hi, why show error when you try to login? I mean cross-origin-opener-policy, how to prevent it?
FYI react-google-login library is deprecated
actually it is not updating the sign the as
any updates on COOP error ?
jwt_decode library is out of date and also returns an error that the google access token returned by google is not the right format? bad guide
You should be more carefull to say "bad guide".
Package.json
External libraries may be updated at any time
In this case you can fix it with
...
"jwt-decode": "^4.0.0",
"@react-oauth/google": "^0.12.1",
...
It´s obvious that if the library is "out of date" you MUST update it..
@@ThePerrocraft The guide does not work as intended and promised by the creator. So, it is a bad guide. If the package is updated, the creator should update the video/guide. If not, bad guide
@@tylerdurden4563 Update the video at every library update?. u serious?
No way.
A programmer must think about this things.
But how will I use it in backend??
Pls explain I've stuck
If you use backend like 'node', just call your api endpoint inside the 'onSuccess' callback function, pass 'credentialResponse.credential' as payload, use jwt-decode to get the actual json data....!
if you are like me, using nextjs, just use server action, pass 'credentialResponse.credential' as payload, use jwt-decode to get the actual json data....!
you can save the data to your database and register user session.
There is a bug in library it always asks for consent popup @@MrAlao675
Hello
Please tell me how to get refresh token?
How about for logout? Mine not working
You can either clear the cookie if you are using it with backend!
Did you achieve logout functionality ? If yes then can you please share the code ?
@@gaganvishwakarma6494 when the page refreshes you are logged out, so I asume upon a reload you are logged out, but if you use your backend to save a cookie based on the token and compare it every time then you can make the logout button so that it removes the cookie and refreshes the page. But I don't think that's the best way so I'm waiting for his response too
how will token refresh after 1 hours ?
I didn't completely get your question however, if you want to delete the session or expire the token and make the user logout, you can store the token in db and when user login store the login with data in cookies or session and if the user logout delete the cookie simple!
similarly, you can delete the cookie in 1 hour using some time constraints.
I'm having trouble finding solutions for this extremely simple task. HOW TO IMPLEMENT LOGOUT?!!!!
this is the problem with google, their documentation is alway terrible.
Can you logout using google API?
I also want to know this, I've been having issues with the log out
bro it is saying
index.esm.js:83 Uncaught TypeError: onSuccessRef.current is not a function
at bp.callback
Did you find a solution?
most likely it is because you are doing and not
@@secretagent1004ya bro that was a client id problem 😂
u say about 3000 and u write sth different...