Тёмный

Google OAuth 2.0 Login for React in 5 minutes 

Cooper Codes
Подписаться 13 тыс.
Просмотров 333 тыс.
50% 1

Опубликовано:

 

21 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 183   
@AhmedRaza-ll5yv
@AhmedRaza-ll5yv 6 месяцев назад
Kind of tutorial I want for any tech related problem striaght to the point like an arrow and no time wasting BS! Thanks a lot man
@picassoofai4061
@picassoofai4061 Год назад
Most straight forward video, I lost too much time searching for that.
@yairlevi8469
@yairlevi8469 10 месяцев назад
FINALLY a tutorial for more advanced people who just dont want to scatter around the web...
@gorkemgok9313
@gorkemgok9313 11 месяцев назад
The kind of tutorial we need and we want.
@stephanieeaton449
@stephanieeaton449 7 месяцев назад
This was so fast and easy! I love concise tutorials such as this. I guess what I would like to have added though is resources on how to use the logged in user (some of us are real nuggets), and also the next steps to take this to a production environment. But this a great start!
@Lucas-jb8ce
@Lucas-jb8ce 2 года назад
Can you please upload an updated version? I'm very confused as to how the implementation should be done.
@banjomichael4229
@banjomichael4229 6 месяцев назад
This was fast and straight to solving my problem. Definitely subscribing to this. Thanks a lot Mr Cooper Codes
@Winedineandrhyme
@Winedineandrhyme 2 года назад
Umm, what if i want multiple users to login? cus from what i'm seeing here, only test users can login. I need login access to be made public.
@AindriuMacGiollaEoin
@AindriuMacGiollaEoin 2 года назад
Thanks so much, I was following a React tutorial which broke and this fixed the OAuth login.
@CooperCodes
@CooperCodes 2 года назад
Glad to see it fixed your issues, thanks for watching!
@atleast_me
@atleast_me Год назад
Fast and no unwanted content..
@manueljarrin4582
@manueljarrin4582 Год назад
I just wanted to thank you! was trying for days to exchange a firebase id token with an auth2 one and wasnt able to do it, so I am going purely on auth. Any video on exchange tokens would be great, but anyways keep going with this type of content to the point tutorials you earned a sub!
@CooperCodes
@CooperCodes Год назад
Hey M Jay, thank you so much for your support! It means a bunch and I'm glad the video was helpful :)
@yoyo-yx1qx
@yoyo-yx1qx 2 года назад
if you get an error saying "you need both client id and scope to initialise oauth" simply make sure you got your client id and also add scope like this, scope:"profile",i had this error now and this fixed
@vincentvermeire966
@vincentvermeire966 2 года назад
Thanks!
@karimm5956
@karimm5956 Год назад
where i can change the scope please ? i am beginner in react. thanks on the dashbord, i have already give the scope but nothing and i have the same error.
@ssteven_johnson
@ssteven_johnson 4 месяца назад
WTF!!!!! I've wasted hours/weeks/months in the docs section of Google APIs and this video has been here for TWO YEARS🤯🤯🤯🤯🤯... How tf am I just seeing this now. . . I subscribed asap!! THANK YOU
@hamzarizwan1715
@hamzarizwan1715 4 месяца назад
Womp Womp
@mutahir2002
@mutahir2002 Месяц назад
@@hamzarizwan1715 what
@piyushaggarwal5207
@piyushaggarwal5207 2 года назад
Could you update the video for the new Sign In with Google ?
@essayawesome
@essayawesome 3 месяца назад
Did you get the job after all you're in computer science fields more then two years, can you help me, are you working
@piyushaggarwal5207
@piyushaggarwal5207 3 месяца назад
@@essayawesome Yes. I have been employed. But what do you need help with? It's all out there. If you have a question search for it. If you don't find the answer, ask in Reddit communities.
@omarcortes9787
@omarcortes9787 2 года назад
thank you! I had like 3 hours looking for this
@CooperCodes
@CooperCodes 2 года назад
No problem! 😁
@frostfire7434
@frostfire7434 Год назад
Thank you, 5 mins explained everything
@joshb6315
@joshb6315 9 месяцев назад
Clean and concise! I subscribed instantly. Thank you!
@hustler2246
@hustler2246 Год назад
react-google-login has been deprecated.
@emmang2010
@emmang2010 4 месяца назад
Yes and I believe now it's react-oauth/google
@akhil_sarikonda
@akhil_sarikonda 8 месяцев назад
How to handle Redirect URI for vercel preview links? Upon successful authentication, Google redirects the user to the URL which we set in the "Redirection URI" field in the Google Console. As the URLs change for every vercel preview deployment, setting a static URL in the "Redirection URI" results in a mismatch. So how to handle this?
@adityalenka1499
@adityalenka1499 2 года назад
Thank you,Your video help me to resolve my Google Oauth issue
@CooperCodes
@CooperCodes 2 года назад
Glad to see it helped :)
@abc_cba
@abc_cba 2 года назад
Hi, I get the error "'React' must be in scope when using JSX react/react-in-jsx-scope" in "./src/components/logout.js" on line 12 & 13. also, ./src/index.js Module not found: Can't resolve 'react-dom/client' in 'C:\Users\Samue\OneDrive\Desktop\auth\authentication\src' Can you please help with that ?
@andrews13
@andrews13 7 месяцев назад
You earned my sub!
@mohdanas8027
@mohdanas8027 2 года назад
Thanks its working fine in my projects
@prakarshshrivastava6422
@prakarshshrivastava6422 Год назад
the react-google-login package is depreciated now,
@ayush_bhardvaj
@ayush_bhardvaj 5 месяцев назад
What to do when we need to save user details in database?
@ashiqdey
@ashiqdey 2 года назад
how to do this using hooks? As I dont want to display the logout button as shown in video
@jawyor-k3t
@jawyor-k3t Год назад
react-google-login library is deprecated. create-react-app is also very old boilerplate generator.
@ardhrubo8455
@ardhrubo8455 10 месяцев назад
so which thing you suggested?
@HungNguyen-le8pg
@HungNguyen-le8pg 11 месяцев назад
react-google-login package is not available from Sep 2023. How to subtitude it
@trishitanandy4735
@trishitanandy4735 9 месяцев назад
how you solved it?
@antimuggle_ridhi2565
@antimuggle_ridhi2565 9 месяцев назад
what to do?
@Ontropy
@Ontropy 4 месяца назад
the react-google-login library has been deprecated, any alternatives for that.
@annarj123
@annarj123 Месяц назад
Did you find an alternative package? react-google-login won't work with React 18 and up :(
@SonaCricketAcademy
@SonaCricketAcademy Месяц назад
npm i @react-oauth/google
@haldharpatel3915
@haldharpatel3915 Месяц назад
I dont want to rewatch but where did you used client secret?
@aldygunawan8089
@aldygunawan8089 11 месяцев назад
do you have an example if the login is failed?
@ben5238
@ben5238 2 года назад
Awesome!! Do you have any idea how to make the login state persist so a user doesn't have to login every refresh?
@TheVedantshah
@TheVedantshah 2 года назад
maybe store token on successful login on localstorage
@bigbadcatbigbcy2933
@bigbadcatbigbcy2933 2 месяца назад
use sessions
@Gokuuubro
@Gokuuubro Месяц назад
Dont I need to have refresh tokens ? If I have some publics scopes defined, can I access them anytime with the same access token ?
@levankantara
@levankantara 2 года назад
I get 403 error. The given origin is not allowed for the given client ID. on my devices ( PC and android Phone) it works fine, there are no errors. but it does not work for anyone else. What could be the issue? I have exited Testing mode and moved to Production.
@BeastRacid
@BeastRacid 2 дня назад
Man, I don't think you needed to create React tree to add a log in button into index.html. Lost track in the middle. I wanted one button. Not the struggle with understanding the code from tutorial.
@ghauri001
@ghauri001 Год назад
Thanks, it was really helpful
@hongbo-wei
@hongbo-wei 2 месяца назад
Great tutorial, thx!
@slogone2336
@slogone2336 4 месяца назад
God, you are a god fr. Just perfect
@jeflo_punks
@jeflo_punks Год назад
really helpful men many thanks!
@leobuezo3600
@leobuezo3600 Год назад
Wow, super easy! thank you so much for sharing!
@CooperCodes
@CooperCodes Год назад
You're welcome, glad it helped :)
@kacperkepinski4990
@kacperkepinski4990 9 месяцев назад
Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
@thalistrisch9635
@thalistrisch9635 2 года назад
Thank you! your video helped me so much😆
@notorious43
@notorious43 10 месяцев назад
Hi, your videos are very helpful, can you please make one vedio for login with google and at the time of login google calendar access will be asked, if yes then create access_token and send it to backend
@viraldimention
@viraldimention Год назад
Nice, Does it work inside a webview?
@pricesmith1793
@pricesmith1793 9 месяцев назад
I don't understand.. Client secret wasn't used... isn't that pretty important for oauth? Also, what's the difference between google-auth-library, gapi, and googleapis?
@fabre6733
@fabre6733 Год назад
I'm quite confuse, how do users register if we need to manually add the allowed users only in the oauth consent screen
@faisalsaddique3323
@faisalsaddique3323 Год назад
those are the test users only
@hiphop861
@hiphop861 Год назад
bro nice video, But How can we do login from all the emails. Here we are checking with testing emails
@ruairidhgrass3479
@ruairidhgrass3479 Год назад
I'm getting an error saying that this library will soon be deprecated and that you must use newer libraries instead. Do you know what the new google login library is and how to implement it?
@Escrotomortal2
@Escrotomortal2 Год назад
x2
@BGS42069
@BGS42069 Год назад
did you ever figure this out? in the same spot
@CooperCodes
@CooperCodes Год назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-roxC8SMs7HU.html Check out this video here. It is the new library, this one has been up to help people migrating / switching over. Sorry if this wasn't super obvious.
@AlexHitchon
@AlexHitchon Год назад
Hey thanks for the quick explanation. Was wondering at the end once i get the accessToken can i use this in my script for my account and not have to keep logging in. Will it expire ever?
@faisalsaddique3323
@faisalsaddique3323 Год назад
yes most of the time that token expires, but you are being given a refresh token, and you could use that to request a new token
@SlothHuntOnYou
@SlothHuntOnYou 10 месяцев назад
why 60fps for videos like that? it's tutorial - 30fps is enough - because all watch it on speed 2x
@abrutii
@abrutii Год назад
Why is anyone doing it either on the front-end side or the back-end side ? no one is showing the full-stack example
@Lotpite
@Lotpite Год назад
why do we need google login only for using with test email ?
@kamalsutte2742
@kamalsutte2742 11 месяцев назад
If we implement jwt token from backend , then by sign in with google how can we get the token
@joshuacushing2858
@joshuacushing2858 2 года назад
Thanks so much for helping me get this going!
@CooperCodes
@CooperCodes 2 года назад
Happy to help! Thanks for watching :)
@sathwikmatcha5511
@sathwikmatcha5511 9 месяцев назад
This no longer works with the react-google-login library being deprecated.
@mustafakhodor5119
@mustafakhodor5119 2 года назад
Hello pls there's a problem that the same account is taken automatically each time i press the button
@inxastralmarsbasement
@inxastralmarsbasement Год назад
how would I style the button in CSS?
@good6894
@good6894 Год назад
This isn't a complete example. Lots of stuff is left out.
@acandrescardenas
@acandrescardenas 4 месяца назад
How could I make it work in an Android app?
@shahzaib715
@shahzaib715 11 месяцев назад
Hi bro I wanna ask I have made Todo list User can create account then after login to use now I want to add login by google how how I will grab or which password I will store to my Database when using google auth means I will get name email like that but what about password which user will put to login again?????? please guide me I am stuck here....
@Valenscheuermann
@Valenscheuermann 9 месяцев назад
Hey, I have a question. I got a Deployed vite react app, im trying to add a login from google option, the problem is, i need to give acces to any account from google to log in, i mean not just add test accounts in the config of google cloud, is that possible?
@Jestudos-g3b
@Jestudos-g3b 9 месяцев назад
thats bc your in the moment your app goes to production, google enable access from any google account, the test user is only for while dev process
@JesterPiero
@JesterPiero 2 года назад
THANKS !!!!!!!!!!!! IT WORKS !!!!
@edarcode8124
@edarcode8124 2 года назад
Greetings from Colombia! in the domains section am I not supposed to put localhost...? And if my App is in vercel, what should I put?
@CooperCodes
@CooperCodes 2 года назад
For React, the default domain for running locally is localhost:3000 . So you should put whatever Vercel uses when you run locally, for example if it’s localhost:4000 you should use that. To the domains comment, I believe in the video I cover all the spots where you need to put the domain. If there is another section it most likely won’t break it but the video should cover what you need. If you could point to the specific domains section you’re talking about I could help more. Thank you for the comment!
@edarcode8124
@edarcode8124 2 года назад
@@CooperCodes If I am using the google button at localhost:3000/login, should I put /login in authorized sources?
@CooperCodes
@CooperCodes 2 года назад
I believe that if you use localhost:3000 it should cover all routes (all routes meaning anything like /login or /register etc.)
@bricejoosten5173
@bricejoosten5173 2 года назад
@@edarcode8124 I did the situation you're asking for, React app with React Router, my google button is in /profile and no, in authorized sources there is only localhost 3000, no "/profile" and it works fine
@houaidakrifa6091
@houaidakrifa6091 2 года назад
It's very helpful ❤👏
@bilalillahi6347
@bilalillahi6347 2 месяца назад
dont forget to add any api route created in backend. must include it
@doofenshmurts2439
@doofenshmurts2439 Месяц назад
how do i know or check if any were created? please help me sorry im new
@bilalillahi6347
@bilalillahi6347 Месяц назад
@@doofenshmurts2439 For example if You created, /oauth in backend for the purpose of google auth (check routes in backend). do add *localhost:/oauth* in redirect uri, at timestamp 1:45. Add all api routes with that purpose in google console, so that you dont face much errors. replace localhost:with actual url when deployed
@jackmiller2518
@jackmiller2518 Год назад
Will this work in React Native as well?
@ananyatiadi6559
@ananyatiadi6559 9 месяцев назад
I am getting error unable to resolve dependency tree
@dilshadzm786
@dilshadzm786 8 месяцев назад
how can we do cross-application authentication with google authentication
@raviteja8798
@raviteja8798 11 месяцев назад
how to make it work for all gmail accounts ?
@ArchanaRawat-r3f
@ArchanaRawat-r3f 9 месяцев назад
Do I have to paid for google cloud platform to this. Can someone please help.
@Vignaya_143
@Vignaya_143 10 месяцев назад
Uncaught TypeError: o3 is not a function
@rogelioperezmena3460
@rogelioperezmena3460 2 года назад
Thanks bro!
@samareshdas767
@samareshdas767 Год назад
How to get the google access token?
@tanhnoinoilanh
@tanhnoinoilanh 3 месяца назад
Is there any one know why this button can't be displayed and the hook useGoogleLogin is not responded when using the webview of react native. How to solved that? Thanks
@kapilbadokar
@kapilbadokar 2 месяца назад
Did u figure out a solution for this? Even i want to implement it on react-native-web
@kushalappaca5324
@kushalappaca5324 5 месяцев назад
How do i get a bearer token if I want to hit a spring boot backend using OAuth2.0?
@manfromthewest
@manfromthewest 2 месяца назад
Did you find a solution? I'm also looking for a way to get fresh bearer token.
@sandeepmaurya5262
@sandeepmaurya5262 Год назад
Showing no longer supported error on build
@ΔημητρηςΝουβακης
@ΔημητρηςΝουβακης 9 месяцев назад
Amazing! TY!
@mretineh1172
@mretineh1172 2 года назад
Thanks alot for this
@johnfargo9774
@johnfargo9774 2 года назад
not work useEffect : Uncaught TypeError: Cannot read properties of undefined (reading 'apiKey')
@CooperCodes
@CooperCodes 2 года назад
Sorry I've been busy, I will look into this
@vitaliidolotov4226
@vitaliidolotov4226 Год назад
Thank you for the video! Could you please advise how to securely save google cliend_Id? What is the best practice for this? Thanks
@debianstark2181
@debianstark2181 Год назад
save it on a .env file
@lukaschiaradia568
@lukaschiaradia568 Год назад
Hey can u do the same for Spotify pls ?
@peasantfolkhero
@peasantfolkhero Год назад
many thanks
@m.likhitha2300
@m.likhitha2300 Год назад
i am getting invalid hook call warnings..
@stricklybisnez3296
@stricklybisnez3296 2 года назад
greetings from Bogotá great video ! Im not sure why but my logout isn't working properly even though our codes are identical
@CooperCodes
@CooperCodes 2 года назад
This could have something to do with your browser cache, are you using the latest version of Google Chrome?
@stricklybisnez3296
@stricklybisnez3296 2 года назад
@@CooperCodes you were right!! thanks man !
@CooperCodes
@CooperCodes 2 года назад
@@stricklybisnez3296 Hah that is awesome that was actually the fix. The libraries I use help make things easier, and they are very well supported. But you still run into strange things like that, glad to see its fixed.
@theofanisbirmpilis7364
@theofanisbirmpilis7364 Год назад
really nice tutorial
@ramoverboard6093
@ramoverboard6093 7 месяцев назад
the access token does not work
@kamichikora6035
@kamichikora6035 2 года назад
Dude this thing is not working on mobile... I'm going crazy
@Vishayam
@Vishayam 2 года назад
tahnk u so much man
@drofatfoed
@drofatfoed Год назад
Is Google Oauth 2.0 totally free for use?
@good6894
@good6894 Год назад
yes
@mudit6339
@mudit6339 8 месяцев назад
its sad that this google login dependency is deprecated now
@SonaCricketAcademy
@SonaCricketAcademy Месяц назад
npm i @react-oauth/google Try this !
@zafarhussain5063
@zafarhussain5063 2 года назад
you deserve like
@pranjaldoorwar9743
@pranjaldoorwar9743 2 года назад
Amazing thanks
@somnathgolui2912
@somnathgolui2912 Год назад
I want all users to sign in not just test users I add how to do that.
@abduvalimurodullayev-or1el
@abduvalimurodullayev-or1el 7 месяцев назад
thanks
@kirtanmodi8598
@kirtanmodi8598 2 года назад
why do we need to init gapi script??
@CooperCodes
@CooperCodes 2 года назад
This is a great question! The reason why we need to initialize the gapi script is because in the background our imported login / logout buttons are using gapi to make calls to the google service we created. gapi.init "caches" our google credentials so if we use gapi anywhere else it will reference the properties we passed in. This is the simple explanation, but hopefully helpful!
@g43s
@g43s 2 года назад
you can no longer create a project without an organization or a folder
@anasouardini
@anasouardini Год назад
all of this just to avoid 10 lines of code???
@aleksandarurovic7300
@aleksandarurovic7300 Год назад
love you brother
@thatogabanakgosi4077
@thatogabanakgosi4077 2 года назад
The react-google-login package has been deprecated so this video's solution is very much outdated.
@CooperCodes
@CooperCodes 2 года назад
Gonna edit the top of the description, the video for the new login stuff is here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-roxC8SMs7HU.html
@fabian2314
@fabian2314 3 месяца назад
message of love
Далее
Setup Google OAuth sign in 6 minutes
6:51
Просмотров 72 тыс.
Как не носить с собой вещи
00:31
Просмотров 894 тыс.
NestJS Google OAuth 2 + React App
28:04
Просмотров 3,6 тыс.
Add Login/Auth to your React app in 5 mins
13:36
Просмотров 294 тыс.
NodeJS & Express - Google OAuth2 using PassportJS
20:33
OAuth 2.0 and OpenID Connect (in plain English)
1:02:17
React visually explained: 'use client'
15:57
Просмотров 53 тыс.