Sign Up / In with Google! | SvelteKit OAuth 2.0

Video Description

In this video I show how to setup your Google Developer Console to create an OAuth 2.0 consent screen and OAuth2 client id credentials to allow signing in with Google. I then show where to get the official google-auth-library for creating the initializing url and verifying tokens and extracting credentials. After that I show how to setup a SvelteKit form action to start the request and a SvelteKit GET end point to process the request back from Google! I hope that you find this helpful! My channel membership is live check it out here!: https://www.youtube.com/channel/UCwPrPv9eS7Xgfp_wi7uxt0g/join Membership perk video: https://youtu.be/FJgKifAThdU *Note* Save yourself the headache and do NOT attempt to have a different a separate origin URI from your redirect URI : i.e. do NOT initiate the request from origin URI localhost:5173 and then try to receive the redirect URI on 127.0.0.1:3000. Google will not send the code it will send a csrf token that you need an additional package and TONS of work (they rotate the keys) to pull out and verify! OAuth2Client docs here: https://cloud.google.com/nodejs/docs/reference/google-auth-library/latest/google-auth-library/oauth2client Need help? visit https://www.consultingninja.tech Check out my channel @ConsultingNinja for more videos like these. Requirements when using Google Sign in Docs: https://developers.google.com/identity/branding-guidelines Source Code Available Here: https://github.com/consultingninja/kitAuth 00:00 - Intro 01:16 - Google Console Setup 06:19 - SvelteKit ENV Setup 07:10 - Google Auth Library 07:26 - SvelteKit Overview 07:52 - SvelteKit Code 18:32 - Wrap-Up *post release update* Googles Documentation is not great and you should play around a bit with opening different pieces of this to see what is inside. As an example: One place in Googles docs said that the field "id_token" only had 4 properties and none of them very useful. However after opening with const ticket = await oAuth2Client.verifyIdToken({idToken: id_token,audience:process.env.CLIENT_ID,}); I found this contained all user information as well. I have found other instances of Googles docs being misleading and or inaccurate. Just a note!