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..."
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}`)
@@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
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.
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!
Awesome video man, really apprecita you're great work, do you have a recommended way to deploy this server? i tried on vercel but without much succes, i ahd problems with using https, and other things(probably did a houndred mistakes) any suggestions?
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.
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.
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
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!
Thanks, this is very helpful tutorial.
Glad it was helpful! Thank you for watching!
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
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!
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 🤩!!!
Awesome video man, really apprecita you're great work,
do you have a recommended way to deploy this server? i tried on vercel but without much succes, i ahd problems with using https, and other things(probably did a houndred mistakes) any suggestions?
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. ruclips.net/video/CZGBeQEFIyI/видео.html
This really helped, thanks!
You are welcome!
How would you persist the login state. I hope you make next video regarding this
I have covered that here: ruclips.net/video/ChUAcV0FdvM/видео.html
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.