Using Google's One Tap Sign-In for Web with React (using hooks)
HTML-код
- Опубликовано: 2 окт 2024
- Check out this live code tutorial where I set up Google's passwordless sign-in using One Tap Sign in For Web.
Video Overview:
0:29 - A demo of the sign-in prompt
1:00 - Setting up initial React app
3:33 - Adding in the Google Sign in Library
7:30 - Creating a new Google Client ID
12:45 - Showing the prompt
14:15 - Dont click the X! This is what happens if you click the X.
17:14 - How to find out why your prompt isn't showing
20:29 - Exponential Cool Down mode
21:05 - Getting the users info after sign in
29:06 - How to kinda sign out?
33:50 - Limitations of the library
This video follows my tutorial on how to integrate the One Tap Sign In Library with a react app - available here if you want to follow by text.
www.intricatec...
I've pushed this sample code to github available on intricatecloud/google-one-tap-web-demo. Instructions to run the demo in the README.
If you need to create a new Client ID in the Google Developer API Console - follow the link at the top of this page - developers.goo...
Thanks for watching y'all! Leave me a comment on what else I should cover on my channel.
Lucid Dreaming by | e s c p | escp-music.ban...
Music promoted by www.free-stock...
Attribution 4.0 International (CC BY 4.0)
creativecommon...
when you cleared cookies you google session became "paused". You just need to logs in back to google and re try onTap
Bro I've just decided to implement it for my apps. The're 0 videos about it except yours. Thanks!
Спасибо!!! from Russia ;)
You're great at this. Thank you for sharing
very helpful.
also, i sometime had to use window.google to access the google object because the page will load first while waiting for the gsi client to load up.
WIll it be possible to make a new video about this topic , because google made serious changes and also , react 3rd party libraries are not working , so can you help with that
the content is dope hope you continue to make such content or course
Bro i did one tap payment for 8 ball pool game...
I minimized that for payment after payment I went there it's again asking to pay...
Plzz plzzz plzz help broo
I need... Ur help plz...
How to get my money back..?
Plzzz..
But... Payment was successful
Absolutely amazing! Thank you... just one question: is there a way to return "code" instead of the jwt token?
Not sure what you mean by "code". What are you trying to do?
Great question! I wonder that too! if you find an answer please reply!
"code" means authentication code for OAuth 2.0 to obtain the token in server side.
It is much more secured approach
@@memo3294
If you have a backend, since Google already gives you a jwt token )like you see in this video using response.credential) you can send that jwt to your backend using axios, etc. in a post request. Then on the backend use a library called google-auth-library to validate the token and send back something to the backend. You can also send user info to the backend like to store the user’s email address on your database for 1st time users or recognizing past users already in your db.
thank you bro i will try normal javascript and html it's work thank so much
GENIUS
Thank you! Can i use som of the informtion that we get in the video to pull data from the google apis and if yes? how?
We are getting error 504 on our laravel app. The endpoint is using laravel socialite. Can someone help?
I've been searching for solution for two days and kept getting errors with previous version of google oauth.
I am so happy Ive found your video. You are a life saver!!!!
Hi Danny, I must say you are the best youtube teacher out there, very detailed explanation. I learned a lot and was able to integrate it with my app in less than 15 minutes after watching your video. Very impressive, thank you.
hey how can I find personalise sign in button script??
Once you do this, how does it go onto your website? Upload all these to your public folder? I am a bit lost. Thanks for any help.
How do we refresh the id token after it is expired as the one tap response does not return refresh token?
Can you make it for flask
Thank you sir for the amazing video
Any library for React Native
Has anyone used this using express.js for a full stack project? Trying to see how to properly track user sessions and log out. I currently persist the sign in using local storage and clear it on sign out. The docs give a g_state cookie for sign in/out but I don’t know what to do with it.
Also to see the cookie using axios (something similar with fetch & Ajax) you have to include withCredentials: true in your axios config & add your urls in cors({ origin […], secure: true}) and might also have to import cookie-parser to the backend.
The ways I've seen of accomplishing this is by implementing sign-in with a service like Firebase Auth, Auth0 which also let you sign-in with google on the server-side, or using passport-js if you want to build the auth yourself.
One Tap Sign-In and the rest of the Google Sign-In for Web library is meant to run in browsers, and is not meant to be used from express, so you need a different service to do it.
@@DannyAslamPerez But don’t we at least verify the jwt on the backend? I used google-auth-library for that. Also, I think the docs say the devs are responsible for tracking the user sessions since an app & google are independent of each other. Don’t know where you get that one tap can’t be used to send something like the jwt or g_state cookie to the backend, but I vaguely remember reading something like what you said but I don’t know if that was in the correct docs since I honestly was lost there until I found my place with the HTML & JavaScript APIs for this new Google Identity Services sign in implementation.
Hi Danny, thank you for this video
I have question how can I get user phone number
I don't think you can get the users phone number from their Google account (at least from what's provided from Google identity services). This post suggests you may be able to do it with their People API if theyve added it to their contact info stackoverflow.com/a/59944033
pass the code
HI Danny, Great video and the original one from two years ago about the old sign in button. The Credentials screens on the GCP website have changed and they now seem to require verification of the project. If you don't have that it says "Google hasn’t verified this app" and won't complete the login for the user. Even if scope only includes the email and user profile, it still says verification needed when choosing to go to production. Any tips in this area as no one seems to be talking about this elsewhere.
I played with this recently and I didn't see that verification warning on a brand new Google Cloud console project. I think you see that warning if you've enabled any other API in your account (like Calendar/Gmail).
@@DannyAslamPerez The issue is with the icon on the OAuth consent screen. If you include an icon, google then insists on verification and there is no way to remove the icon other than making a new project. However even once this was done logging in sent me to a “this is an unverified site” warning advising not to proceed which is not useable for a live app.
Thank you so much sir for your video 😃🙏
Thanks for the suggestion!
can you make it for js only
For the next video, i was planning on showing how to send the token to a js backend and validate it. Stay tuned!
@@psillness How about also using that g_state cookie Google gives you to track users on frontend & backend? Right now I just use local storage using the Google jwt & clear it when logging out. Just wanted to cover all the bases I can since the docs are a bit obscure on tracking users & signing out.
use this to logout