Sign Up / In with Google! | SvelteKit OAuth 2.0
ฝัง
- เผยแพร่เมื่อ 6 ส.ค. 2024
- 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!:
/ @consultingninja
Membership perk video:
• I launched a chatbot w...
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:
cloud.google.com/nodejs/docs/...
Need help? visit www.consultingninja.tech
Check out my channel @ConsultingNinja for more videos like these.
Requirements when using Google Sign in Docs:
developers.google.com/identit...
Source Code Available Here:
github.com/consultingninja/ki...
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! - วิทยาศาสตร์และเทคโนโลยี
Thanks, this is very helpful tutorial.
Glad it was helpful! Thank you for watching!
This really helped, thanks!
You are welcome!
Can't wait to see the tutorial !!!
Going to show how to do this with React and Express, and then Google GSI (auth using an html file!) next! Then back to PocketBase!
Wonderful,wish you all best !!!
❤
Thank you Ahmed!
this is great, was looking through docs on how to accomplish 'sign in with google' and 'sign in with apple' with sveltekit
Awesome! I am so glad this helps you! I am doing Google Sign in with React and Express next, then Google GSI (Google Sign In with an HTML file) next! Thank you for your support!
@@ConsultingNinja great videos, I've learned a lot through many of the sveltekit ones. One piece of feedback would be a 30 second demo or 30 second big picture explanation of what you are going to build in the beginning
Hey , I realized this was missing and have been adding that in my recent ones. Just showing what it is I will be doing. Have my recent video starts been better in that regard?
@@ConsultingNinja Yeah this video nailed it!
I think if the video focus is more technical without a great frontend demo, you could also provide an overview "we are going to turn our access_token into a jwt, store it as a cookie, and retrieve our refresh_token from a database..."
Great thank you for your feedback!
This video is great. My question is how can i secure routes so non logged in uses cant access private routes?
Here is a video on protected routes. th-cam.com/video/CZGBeQEFIyI/w-d-xo.html
Bro, so now what should we do with the access token and refresh token,is it like saving them in cookies and generate access token by refresh token, and the id_token that hold user info?
Or the OAuth2.0 will handel all of that?
Those items represent a user to Google. So yes you would store them just as you would for a home brew authentication implementation.
You can put the OAuth2Client in your handle hook and to pass it around through locals. You can check if the access token is still good or expiring soon by using OAuth2Client.isTokenExpiring(). And if it is then automatically generate a new one using OAuth2Client.refreshAccessToken().
It looks like I forgot to add the link to the docs. I will update the description sorry. Here are the docs of everything you can do directly with OAuth2Client: cloud.google.com/nodejs/docs/reference/google-auth-library/latest/google-auth-library/oauth2client
but remember you can ALSO access the googleapis now with that persons token to do anything you listed in your scopes.
One example would be to get all their info like this...
//pass the oAuth2Client.credentials.access_token to this function
async function getUserData(access_token) {
const response = await fetch(`www.googleapis.com/oauth2/v3/userinfo?access_token=${access_token}`);
console.log('response',response);
const data = await response.json();
console.log('data',data);
}
Keep in mind for Google an email address is NOT unique it can change so you want to store the credential information and NOT the info returned from the userinfo api.
I have updated the repo to add this example.
I think I will have to do another video showing some of things you can do with this. So I will put that together.
Great thanks bro, for this clear explanation,that make sense now !!!
You are very welcome! More coming soon!
Hey Ahmed, one last note, You can pair the authentication we setup here with the npm library googleapis and then use any of those apis (as long as you listed the scopes in your scopes list). There is enough here to cover a lifetime of videos so I stuck with authentication since that is the topic I was on. But if you were curious what all that would give you access to it is listed here: googleapis.dev/nodejs/googleapis/latest/. but be warned the list is absolutely ENORMOUS!
Eager to 🤩!!!
How would you persist the login state. I hope you make next video regarding this
I have covered that here: th-cam.com/video/ChUAcV0FdvM/w-d-xo.html
How can I pass the tokens and user information back into the browser so I can use local storage and store it
I should have added that part. You get the user info by taking the id_token and using the authClient to pull it out with const ticket = await oAuth2Client.verifyIdToken({idToken:code,audience:process.env.CLIENT_ID,}); The easiest way would be to send it as a page param (WITHOUT ANY SENSITIVE INFO) in your redirect(`/pageyouwanttohaveaccess?userinfo=${userinfo}`)
Let me know if you need more help.
@@ConsultingNinja Thank you for your response! But isn't passing it in the url considered unsafe? The way that my workflow is going is that I am sending getting the jwt from google and then sending it to my server in a mutation, and getting back an access token from the server. I want to send that into local storage. Since it is in the server, I have no access to local storage, that is why I wanted to pass it to the client, or the main page(which comes after I log in) and have the main page store it in local storage. But is passing the access token in the url safe? Or is there another option. I have looked everywhere for an alternative
You are most welcome for responding. That is why I am here. Lets think this through. You are receiving the token from Google on your server. Why not put it in a cookie then? You can do a cookie.set('token",token); Notice I am saying token don't pull out the user info yet... Then redirect with no params to your home page. Before you get to your homepage this will trigger your hooks file (as long as you have a load function for your homepage). I am assuming you do. Then inside of your hooks file you grab the cookie there cookie.get('token) and use the oAuth2Client.verifyIdToken to validate and pull the actual user information out of the token and pass it to your entire app through locals. locals.user = userinfo Inside of your homepages load function you check for locals.users and can pass the non sensitive pieces safely back to your front end like username and email etc.
Let me know if there are assumptions that won't work with your app.
@@ConsultingNinja hi im new in svelte, is there any code in the github with this use case? cant figure out to reproduce the answers here. i want to store the user information to localstorage / cookie in the browser so it can be reused on the clientside
Hi, thanks for the tutorial. I set it up just like yours, but why do I get this error?
Error: Not found: /node_modules/gaxios/src/gaxios.ts
at resolve (/home/yongcheeho/next-final-project/fp-frontend/final-project/node_modules/@sveltejs/kit/src/runtime/server/respond.js:473:13)
at resolve (/home/yongcheeho/next-final-project/fp-frontend/final-project/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:5)
at Object.#options.hooks.handle (/home/yongcheeho/next-final-project/fp-frontend/final-project/node_modules/@sveltejs/kit/src/runtime/server/index.js:56:56)
at Module.respond (/home/yongcheeho/next-final-project/fp-frontend/final-project/node_modules/@sveltejs/kit/src/runtime/server/respond.js:279:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
That sounds like it may be a node error or possible an uncaught error. Make sure you are using Node version 18 or higher. If that doesn't fix it then email me and send your oauth +page.server.js, your +page.server.js that makes the request (I called my signup in the example) and your hooks.server.js file.
I got the token... now what? Can you show how to list email from gmail or something?
Hey , I am going to make more content covering how to take this further, for now... You most certainly can pull out the information that comes back from google out of the token that Google sends back, you can do that by running const ticket = await oAuth2Client.verifyIdToken({idToken:code,audience:process.env.CLIENT_ID,}); that will verify and open things up for you. You can then do with it what you would like. Stay tuned for more on this in the future.