Hi :) I am a little confused.. I cannot see the lib folder properly, all thar part is missing! Is that in another video. My app says Module not found: Can't resolve '@/lib/session' Thanks millions!
@/lib/session is a reference to a local /lib/session or src/lib/session file. If you don't have such a file in your code it doesn't work. Right now to get user session you use : import { getServerSession } from "next-auth"; import { options } from "@/app/api/auth/[...nextauth]/options"; const session = await getServerSession(options);
Awesome work! I've learned so much from your videos explanations and live series these past couple of days. Question: How much of what you've produced content wise can you say you've used during your time working as an engineer?
Hi i just finished the previous video with the credentials provider, showing how we can store other information within the jwt that we get back. How can i incorporate this google OAuth with the credentials provider? The async signIn button does not work, with prisma saying "SELECT 1"
Hello your videos and explanations are really helpful thank you so much recently I started a side micro project after bit of research I see there is no videos on "strip credits based payment system" there was one which was walk-through. It would be a big help if you make a video over that, plz do consider
It might be a bit to late but maybe some other person will need it. After reading next-auth docs you can find that : GET /api/auth/signout Displays the built-in/unbranded sign out page. POST /api/auth/signout Handles signing the user out - this is a POST submission to prevent malicious links from triggering signing a user out without their consent. The user session will be invalidated/removed from the cookie/database, depending on the flow you chose to store sessions. So basically you sign out by doing either a request to one of those routes or by using the signOut method import { signOut } from "next-auth/react" export default () => signOut()}>Sign out
Great Video, I need help regarding handling errors. I'm using Google provider, and it everythings works fine however When I logged in, I choose my account and I cancel the consent permission prompt it will be redirected to /api/auth/signin?error=Callback The build in template with google button it says "Try signing in with a different account." I already identify my problem which is the cancellation of auth flow. and the console says [next-auth][error][OAUTH_CALLBACK_ERROR] message "access_denied" What I want to do is when the user cancel it I want it to go back in landing page which is "/" already looked at documentation and can't find solution or maybe I just don't understand it. please help. Thank you
Ethan! You delivered another banger once again! Thank you so much for fulfilling my request around handling env variables for production vs dev from the "Set up Next-Auth with Next.js and Prisma with this ultimate guide!" video. The way you explained OAuth really laid the foundation for me to do further research on the topic to understand how it works behind the scenes. I do have a question for you, if I were looking to integrate with a third party API (i.e. Calendly's API). Would you use next-auth to handle and store the access tokens sent from Calendly's Authorization servers? Or is the idea with next-auth is to primarily focus on managing authentication and user sessions?
I'd only use Next-Auth for *your* users and your frontend. When the user accesses OAuth of another app on your behalf (third party integration) your app will get an access_token and a refresh_token. Save those to the user in your database and you can use them forever on behalf of the user. No JWTs or complicated auth necessary.
I'm having doubts on how to add this google provider to the existing credentials provider you explained on a previous video. How should we handle callbacks and jwt there?
You should be able to lookup the user by their email. If you find the user, then you can use that user and it's primary key for the JWT. Otherwise you can just-in-time provision a user. Once a user has been created with OAuth, they can add a password in their profile to login sans OAuth. But they'll need to login via OAuth first to do that. Or do a password reset flow!
My app has three sign-in options atm: google oauth, facebook oauth, and regular username/pw. I added this line to the top of the signIn method: `if (account?.provider === 'credentials') return true`, as `profile` is empty when you're signing in without oauth, and we don't want to do the upsert.
Great video! Have you run into issues with refreshing the token? Using a DB strategy with session and jwt callbacks and I'm unable to refresh the token when it expires. Would using JWT be better? Err: invalid_token
I haven't tried the DB session strategy often with Next-Auth. I'm a huge fan of JWT's for most projects. I think it also pairs nicely with OAuth here. I'd try that strategy and see if it works well. You can extend the session length if you want, so users don't need to login as often. Otherwise, I can make a sample project and see if there are any sharp edges you might be hitting.
great video! but im facing a problem that i dont find the solution anywhere, if we console.log(profile) we have an objetic with many keys such as email, name, locale, but in the route.ts file when i try to get the locale i got an error related to the types, basically typescript only recognizes 4 keys from the many that the profile object has, can u guys helpe me with this?
How are you getting the locale/profile in your route file? And are the keys basically name, email, and image? If so, you need to pass through the extra properties into the JWT as *well* as the session, take a look at this: th-cam.com/video/2kgqPvs0j_I/w-d-xo.htmlsi=PTQWLkEo6PkzKJp2&t=1483
@@ethan_mick im getting the locale by the signIn({profile}), when i type 'profile.'' i only have acces to name, email, sub, however if I type profile.locale i do acces the value but the lint says that profile does not have a prop called locale
New subscriber!! I am really impressed by your great explanation and it is really useful. I sincerely request you to start some application series which can help a lot to masses
Thanks and welcome! I have a series: Time Tracker: th-cam.com/users/live3lAsw0vNuDo?feature=share Converter: th-cam.com/users/livejEa7xJCqCxk?feature=share That are live series. I might do another that's all recorded depending on my work schedule.
at 14:40 of video, content of route.ts file which is visible in screen are completely changed
This video doesn't help.
Even though the information you provide is valuable, I am very impressed with your style and way of explaining. Good luck to you ... keep going ❤
Hi :) I am a little confused.. I cannot see the lib folder properly, all thar part is missing! Is that in another video. My app says Module not found: Can't resolve '@/lib/session' Thanks millions!
Did you ever find the solution? I noticed the same thing
@/lib/session is a reference to a local /lib/session or src/lib/session file. If you don't have such a file in your code it doesn't work.
Right now to get user session you use :
import { getServerSession } from "next-auth";
import { options } from "@/app/api/auth/[...nextauth]/options";
const session = await getServerSession(options);
You didn't show a lot of steps. This guide wasn't really helpful for me ((
He didn't exaplain anything about the jwt callback or the session callback that he added, just lazily added the github link.
Very helpful, thanks a lot!
Awesome work! I've learned so much from your videos explanations and live series these past couple of days.
Question: How much of what you've produced content wise can you say you've used during your time working as an engineer?
That's pretty awesome! Thank you!
Please can you let me know where you get the session
Thanks, Ethan. Your videos are always helpful as always.
Glad you like them!
Awesome, I see🙆🏻🙆🏻
Thank you so much 😊
awesome!
Do we have to add NEXT_PUBLIC prefix for google's id and secret for 14?
What if user wants to update their gmail email address? with different gmail email address?
how to change existing project?
Hi i just finished the previous video with the credentials provider, showing how we can store other information within the jwt that we get back. How can i incorporate this google OAuth with the credentials provider? The async signIn button does not work, with prisma saying "SELECT 1"
Greate tutorial.
Good job!
Thanks thats exactly I wasnted
Hello your videos and explanations are really helpful thank you so much recently I started a side micro project after bit of research I see there is no videos on "strip credits based payment system" there was one which was walk-through. It would be a big help if you make a video over that, plz do consider
Whats the significance of prisma? Is this just a database connection lib? or just for testing dev env.
Thank you so much for such a detailed video. Just had a quick question (im a newbie), how do we sign out? 😅
It might be a bit to late but maybe some other person will need it. After reading next-auth docs you can find that :
GET /api/auth/signout
Displays the built-in/unbranded sign out page.
POST /api/auth/signout
Handles signing the user out - this is a POST submission to prevent malicious links from triggering signing a user out without their consent. The user session will be invalidated/removed from the cookie/database, depending on the flow you chose to store sessions.
So basically you sign out by doing either a request to one of those routes or by using the signOut method
import { signOut } from "next-auth/react"
export default () => signOut()}>Sign out
Thank you. Another perfect tutorial 👌
Thanks so much, friend!
when it will be live sass coding? I really like it
I'm glad you like it! Just taking some time off as I ramp up on a new project.
How to integrate in custom pages
tysm!!!
Great Video,
I need help regarding handling errors.
I'm using Google provider, and it everythings works fine however
When I logged in, I choose my account and I cancel the consent permission prompt it will be redirected to /api/auth/signin?error=Callback The build in template with google button it says
"Try signing in with a different account."
I already identify my problem which is the cancellation of auth flow. and the console says [next-auth][error][OAUTH_CALLBACK_ERROR] message "access_denied"
What I want to do is when the user cancel it I want it to go back in landing page which is "/"
already looked at documentation and can't find solution or maybe I just don't understand it. please help.
Thank you
Where does the lib/sessions come from? I am confused
me too
excellent❤
Ethan! You delivered another banger once again! Thank you so much for fulfilling my request around handling env variables for production vs dev from the "Set up Next-Auth with Next.js and Prisma with this ultimate guide!" video.
The way you explained OAuth really laid the foundation for me to do further research on the topic to understand how it works behind the scenes.
I do have a question for you, if I were looking to integrate with a third party API (i.e. Calendly's API). Would you use next-auth to handle and store the access tokens sent from Calendly's Authorization servers? Or is the idea with next-auth is to primarily focus on managing authentication and user sessions?
I'd only use Next-Auth for *your* users and your frontend. When the user accesses OAuth of another app on your behalf (third party integration) your app will get an access_token and a refresh_token. Save those to the user in your database and you can use them forever on behalf of the user. No JWTs or complicated auth necessary.
Thank you. I would like to see how to use Middleware to protect routes.
Check this out! th-cam.com/video/2kgqPvs0j_I/w-d-xo.html
ty mate
What is the tool you are using to make the tutorial like writing on a whiteboard? Thanks for this :)
excalidraw
please wht the name of the app that you use to do those diagrams
excalidraw
I'm having doubts on how to add this google provider to the existing credentials provider you explained on a previous video. How should we handle callbacks and jwt there?
You should be able to lookup the user by their email. If you find the user, then you can use that user and it's primary key for the JWT. Otherwise you can just-in-time provision a user.
Once a user has been created with OAuth, they can add a password in their profile to login sans OAuth. But they'll need to login via OAuth first to do that. Or do a password reset flow!
My app has three sign-in options atm: google oauth, facebook oauth, and regular username/pw. I added this line to the top of the signIn method: `if (account?.provider === 'credentials') return true`, as `profile` is empty when you're signing in without oauth, and we don't want to do the upsert.
Thank you, yes. Excellent suggestion!
@@ethan_mick Is that how you would’ve handled it?
Would you please share Facebook login as well
u miss a lot of steps
Great video! Have you run into issues with refreshing the token? Using a DB strategy with session and jwt callbacks and I'm unable to refresh the token when it expires. Would using JWT be better? Err: invalid_token
I haven't tried the DB session strategy often with Next-Auth. I'm a huge fan of JWT's for most projects. I think it also pairs nicely with OAuth here. I'd try that strategy and see if it works well. You can extend the session length if you want, so users don't need to login as often.
Otherwise, I can make a sample project and see if there are any sharp edges you might be hitting.
great video! but im facing a problem that i dont find the solution anywhere, if we console.log(profile) we have an objetic with many keys such as email, name, locale, but in the route.ts file when i try to get the locale i got an error related to the types, basically typescript only recognizes 4 keys from the many that the profile object has, can u guys helpe me with this?
How are you getting the locale/profile in your route file?
And are the keys basically name, email, and image?
If so, you need to pass through the extra properties into the JWT as *well* as the session, take a look at this: th-cam.com/video/2kgqPvs0j_I/w-d-xo.htmlsi=PTQWLkEo6PkzKJp2&t=1483
@@ethan_mick im getting the locale by the signIn({profile}), when i type 'profile.'' i only have acces to name, email, sub, however if I type profile.locale i do acces the value but the lint says that profile does not have a prop called locale
PLEASE I BADLY NEED HELP
You do not have permission to sign in. i did everything correctly
Great
please. github provider sample
make new one with Auth.js!!!
Your explanation is clean and straight to the point that others can't!
New subscriber!! I am really impressed by your great explanation and it is really useful. I sincerely request you to start some application series which can help a lot to masses
Thanks and welcome! I have a series:
Time Tracker: th-cam.com/users/live3lAsw0vNuDo?feature=share
Converter: th-cam.com/users/livejEa7xJCqCxk?feature=share
That are live series. I might do another that's all recorded depending on my work schedule.
@@ethan_mick great!!
using zoom is anoying
why such thumbnails ?
What do you mean?