Using Google's One Tap Sign-In for Web with React (using hooks)

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.

I've pushed this sample code to github available on intricatecloud/google-one-tap-web-demo. Instructions to run the demo in the README.

Thanks for watching y'all! Leave me a comment on what else I should cover on my channel.

Attribution 4.0 International (CC BY 4.0)

[sanzhar.danybayev]

Bro I've just decided to implement it for my apps. The're 0 videos about it except yours. Thanks!

[irabolyukh]

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!!!!

[ekotenggara]

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.

[egorshumanskii]

when you cleared cookies you google session became "paused". You just need to logs in back to google and re try onTap

[ade-joshe]

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.

[artistic_bad_boy]

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?

[albythekkedan]

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

[testertest]

the content is dope hope you continue to make such content or course

[stephennwakasi]

You're great at this. Thank you for sharing

[IR]

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.

[pushkardureja]

How do we refresh the id token after it is expired as the one tap response does not return refresh token?

[collegefind]

We are getting error 504 on our laravel app. The endpoint is using laravel socialite. Can someone help?

[raba]

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.

[pranjalkumar]

hey how can I find personalise sign in button script??

[neoistone]

thank you bro i will try normal javascript and html it's work thank so much

[airtonmendonca]

Absolutely amazing! Thank you... just one question: is there a way to return "code" instead of the jwt token?

[tobycettera]

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.

[skharshid]

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

[sachinallugani]

Thank you so much sir for your video 😃🙏

[kouamegerard]

Hi Danny, thank you for this video
I have question how can I get user phone number