Authenticate Users with Google and Next Auth in Next.JS 13

Рет қаралды 37,176

Күн бұрын

❤️Please Support me by subscribing to this channel 👉🏻www.youtube.com/@sakuradev?su...
In this video, we will explore how to authenticate users using Google and Next Auth in the latest version of Next.js (version 13). With the increasing need for secure user authentication, it's essential to have a robust authentication system that can handle user logins seamlessly. We will start by setting up a new Next.js project and configuring our environment variables. Next, we will integrate Google OAuth with Next Auth, so users can sign in with their Google credentials. By the end of this video, you will have a solid understanding of how to implement user authentication with Google and Next Auth in your Next.js applications.
⭐Subscribe to my channel : / @sakuradev
GitHub Repo: (Don't Forget to give it a ⭐): github.com/vahid-nejad/google...
🤩Also Watch:
Comprehensive Tutorial on Next-Auth: • Full Stack Authenticat...
Update Next Auth Session: • How To Update Next-Aut...
Refresh Token: • Refresh Token with nex...
How to Save Backend JWTs in Next Auth Session: • How to Manage Backend ...
Custom Login Page with Next Auth: • Custom Login Page in N...
SEO Optimization for Next.JS : • SEO Optimization with ...
Contents:
0:00 Start
0:27 Setting up Next-Auth with Google Provider
3:28 Creating Google Credentials with Google API Console
6:02 Creating Sign In Button
8:28 Adding Providers
9:53 Creating App Bar Menu
10:30 Running and Testing
11:30 What is on next video?
#authentication #Nextauth #nextjs13

Пікірлер: 125

@SonicFictionTV 11 ай бұрын

This is the best explanation of NextAuth.js I've come across so far. No beating around the bush, straight to the point, right to the center. Thank you very much.

@SakuraDev 11 ай бұрын

Thanks for your nice words. that encourages me to move forward. ❤️

@igorpiedade 7 ай бұрын

I have to agree! I've looked others but always very prolix. sakura were straight to the matter.

@NetoNeto 7 ай бұрын

This is the best explanation about this topic I could to find on the internet. Thanks and congratulations!!!

@phil5293 11 ай бұрын

Amazing video dude. To the point and short. All I needed to get the Google NextAuthJS provider working!

@SakuraDev 11 ай бұрын

Thank you! I'm glad the video was helpful for setting up the Google NextAuthJS provider. If you have any more questions or topics you'd like to see, let me know.

@chazdawg4340 3 ай бұрын

Very easy and clear to understand. This is the best tutorial I found so far with Google and NextAuth in NextJS, so thank you!

@velkb228 11 ай бұрын

Thank you for the straight up no bullshit no fancy redirect stuff dead simple basic ass tutorial. This is precisely what I needed. Big hug from Brazil.

@SakuraDev 11 ай бұрын

Thanks 😊 . I am glad you liked it

@Noname_57 8 ай бұрын

This is the clearest explanation of NextAuth.js. Thank you.

@SakuraDev 8 ай бұрын

Thank you so much 🙏🙏

@juustout 9 ай бұрын

Thanks for keeping it short and sweet, Sakura Dev !

@SakuraDev 9 ай бұрын

Thanks 🙏🙏🙏

@icode4fun800 11 ай бұрын

GREAT FREAKING TUTORIAL! I didn't want to read the docs and you helped me understand it so fast!

@SakuraDev 11 ай бұрын

Thanks 👋. I'm really happy it was helpful for you and welcom yo the channel

@stevenstone307 10 ай бұрын

Read docs to be a better dev

@hebanano 2 ай бұрын

To the point, super clear and easy to follow. Thank you so much.

@SakuraDev 2 ай бұрын

Glad you liked it!

@66yozgattandrkebap48 Жыл бұрын

I have been trying to implement this authentication since I'm new to web developing. I figured it out thanks to you, keep it up!

@SakuraDev Жыл бұрын

Glad it was helpful 😊🌹

@66yozgattandrkebap48 Жыл бұрын

@@SakuraDev I appreciate it. While you're here, can you tell me how can I get a unique id for every user that logs in using the google provider you've shown in the video so that i can add them on a local mysql database? I basically need some number or string to identify each user.

@SakuraDev Жыл бұрын

@@66yozgattandrkebap48 thanks, you should use next-auth mysql adapter. I have video for adapters but it is with supabase data base. you can watch it to get the idea

@66yozgattandrkebap48 Жыл бұрын

@@SakuraDev you are the best 🤩

@SakuraDev Жыл бұрын

@@66yozgattandrkebap48 Thanks, 🤩😍

@muhammadbilal6865 4 ай бұрын

Thank you sir short and upto mark exactly what I wanted. Thanks so much.

@SakuraDev 4 ай бұрын

Thanks 🙏🙏🙏

@dota2-plays-shorts Жыл бұрын

another great tutorial , keep it going :)

@SakuraDev Жыл бұрын

Thanks 😊. Your nice feedback encourages me to move forward ⏩

@saman6199 Жыл бұрын

Nice work, thanks ❤

@SakuraDev Жыл бұрын

Thanks for your nice feedback 🌹

@oguzhanaydn7482 10 ай бұрын

Amazing tutorial you literally solved my problem! thanks

@SakuraDev 10 ай бұрын

I am glad it was helpful

@yirmeyahuM 10 ай бұрын

Very nice video! Thanks!

@SakuraDev 10 ай бұрын

Many thanks!

@ciandrapancho8716 9 ай бұрын

It worked, thanks!

@SakuraDev 9 ай бұрын

Glad it was helpful 🙂

@franciscogabriel6514 6 ай бұрын

Thank you so much!

@SakuraDev 6 ай бұрын

Thanks 🙏🙏🙏

@udayrajvadeghar8555 2 ай бұрын

saved my time drastically!

@SakuraDev 2 ай бұрын

Glad it was helpful 🌹

@itspawanpoudel 11 ай бұрын

Sow why are we using two diffrent url, /callbacks in facebook and /callbook in gogle

@speedster784 Жыл бұрын

can you do a video about deployment to AWS Amplify with next js 13 app that uses next auth for authentication.. currently having issues with that.. great video by the way

@AlirezaMehrabiKali 8 ай бұрын

hi, i did that but after try to login i have error below Try signing in with a different account. expected 200 OK, got: 403 Forbidden can't find anything for that

@giorgikiladze1151 2 ай бұрын

thank you tutorial was helpful

@SakuraDev 2 ай бұрын

Glad it helped

@nguyenminhhung9701 Жыл бұрын

you save my life, thank you so much.

@SakuraDev Жыл бұрын

🙏🔥 really glad it was helpful. 😃👋

@curious-doug 11 ай бұрын

I did it! Many thanks!

@SakuraDev 11 ай бұрын

I am really glad it was helpful for you.

@user-jp1rq8kl4o 10 ай бұрын

Error: The default export is not a React Component in page: "/login" I am experiencing an issue. Could you please guide me on how to resolve it?

@MarcosFelipe-up9lc 9 ай бұрын

Thanks Bro!

@SakuraDev 9 ай бұрын

Thanks 🙏

@iVigilxnte 9 ай бұрын

Hey do you know how I can check if the google account that is trying to register is a part of my waiting list in my database? Check the email from the google account and the unique invite code that is a param on the register page. If so then continue sign in and if not then throw them an error that they are not permitted to register? Would really appreciate the help. Thanks

@akhil_sarikonda 5 ай бұрын

how to manage 'Redirect URI' for vercel preview deployments? (Vercel preview links are random)

@ahmedakermi Жыл бұрын

can use next auth in express application not in next js

@odaytelbany9751 Жыл бұрын

Thank you, that was helpfull

@SakuraDev Жыл бұрын

Thanks, I am really happy it was helpful.

@fcbjimm 10 ай бұрын

Hey thanks for the video, i found a problem, once u signout, and u want to signin, it will sign in directly into the prev account without asking me which account I wanna use... I mean how could we just destroy the client session completely so that it doesnt sign in directly

@sofiacasares1427 Жыл бұрын

google is asking me to fill a form of consentiment of the app what should I do?

@amosmachoradevlogs 11 ай бұрын

Thanks!! God bless your heart

@SakuraDev 11 ай бұрын

You're welcome! Blessings to you as well!

@kacperkepinski4990 7 ай бұрын

how to do it having my button in place where I want - I mean without redirecting to page with button?

@akshatathakkar3930 10 ай бұрын

Hello, on signing in with Google after selecting acc getting this error -Try signing in with a different account

@spelf 8 ай бұрын

I really like the video, I think you have a great teaching style. Unfortunately I'm getting an error Error 400: redirect_uri_mismatch. I setup my Client ID credentials for Google more or less exactly as you suggested in the video, do you have any experience with such error messages? Many thanks.

@mosesmwaura9467 9 ай бұрын

You just saved my life

@SakuraDev 9 ай бұрын

I am really glad that it was helpful 🙏

@eloi3515 11 ай бұрын

it is necessary to write [...nextauth]

@gonzalovolonterio4991 Жыл бұрын

thanks, work for me

@SakuraDev Жыл бұрын

Glad it was helpful

@muradqumizakis8428 Жыл бұрын

Why cant you use the SessionProvider directly in the layout? is it to be able to access the session everywhere in the application? because i remember in next12 i would directly use it in the _App.js and wrap everything in the SessionProvider

@SakuraDev Жыл бұрын

You can use it directly in layout, but you should mark layout with "use client"

@avi_mukesh 3 ай бұрын

Nice tutorial. Do you know how to create a custom sign in page for this? I'm using NextAuth V5 beta and just cannot find a solution

@mazharuldev Жыл бұрын

Thank you bro.

@SakuraDev Жыл бұрын

Hi, Thanks and welcome to the channel.

@WarongkornTritipakit Жыл бұрын

Thanks!

@SakuraDev Жыл бұрын

Welcome to my channel👋. Thanks 🌹👍

@shubhammaurya9633 10 ай бұрын

hey how i get the ouath token of that account

@thiagopavan6285 Жыл бұрын

This error appears when pressing the TypeError button: options.providers is not iterable can anyone tell me what it could

@SakuraDev Жыл бұрын

Hi, Try this: export authOption Separately from [...nextauth]/route.ts and the in that file again "xport default NextAuth(authOptions)"

@daniel-dev123 Жыл бұрын

Great video

@SakuraDev Жыл бұрын

Thanks.🌷 Glad you enjoyed it

@21Dimen 5 ай бұрын

Hey Sakura, thank you for this awesome tutorial, the cleanest Next auth tutorial I've seen. Anyway, I did everything like in your video but when I try to sign in with Google I get the error: "Try signing with a different account." What can I do about this?

@RajeshKumar-pk5qj Жыл бұрын

Hi Sakura, I have been working with NextJS and NextAuth in one of my projects. I followed your tutorial for authentication and authorization. It was really great. But i am facing server error no secret issue in production, but i can't replicate it in local. I do have secret key in .env file but the issue still exists. Can you please let me know what i could be missing from my end.

@SakuraDev Жыл бұрын

Hi, Thanks 🙏. Is your env variable's name NEXTAUTH_SECRET?

@nahuelaguero686 8 ай бұрын

I have the same error, and no, I don't have that variable name, just GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET @@SakuraDev

@eagle_raj Жыл бұрын

Good job

@SakuraDev Жыл бұрын

Thanks

@arimafp243 11 ай бұрын

Хорош Сакура, помогло спасибо!

@SakuraDev 11 ай бұрын

Thanks

@nielsdominguez991 9 ай бұрын

If you nest all your components under "use client", everything is rendering on client side, not server side. But nice tutorial, thanks

@SakuraDev 9 ай бұрын

Hi, Explain that in this video : kzfaq.info/get/bejne/rq5_dpR1r821cWQ.html

@nielsdominguez991 9 ай бұрын

@@SakuraDev hehe perfect thanks!

@indradamansharma4050Subscribe Жыл бұрын

Hello @SakuraDev Can you please tell me about how can we Authenticate Users with email and Next Auth in Next.JS 13, Also about how to add firebase adaptor in next auth please tell me it is very important.

@SakuraDev Жыл бұрын

Hi, you can use email provider. you should have an email server. for firebase adapter you need to create a project in firebase and then add the adapter. it's pretty easy. if its necessary for you I can create a video on that.

@sadeghmahboobifar7521 Жыл бұрын

Thank you for the great video. I have an issue, when I'm using Providers in my RootLayout , I will have the following error : Unhandled Runtime Error Error: React Context is unavailable in Server Components, would you let me know how to resolve the issue? Thank you

@SakuraDev Жыл бұрын

Hi, have you marked the Providers component with "use client"?

@msmf6912 Жыл бұрын

@@SakuraDev yes, I add it on the top of Providers

@juliusborn5953 Жыл бұрын

Im gettting the same error, also while trying other tutorials.. hmm

@SakuraDev Жыл бұрын

If I could see your code, I might can help.

@shazilnisar4972 Жыл бұрын

I tried to implement this but it isnt working it is taking me to the route localhost:3000/api/auth/error Note : I am not using typescript

@SakuraDev 11 ай бұрын

Hi, what is the error?

@user-es2jt6qe2o 10 ай бұрын

localhost:3000/api/auth/callback/google . copy this, this should work, error come if you dont write correct url. ex: https instead of http

@shardulvanage5446 Жыл бұрын

thanks

@SakuraDev Жыл бұрын

Your welcome. I hope it was helpful. I have more videos about next auth that you can find on my channel. Thanks👍

@codeozz 11 ай бұрын

Can't we use Google provider with Server Side?

@SakuraDev 11 ай бұрын

Yes, we can. Feel free to ask your question if you have any problem with that.

@WisarutTipbung 11 ай бұрын

what font did you use on vs code?

@SakuraDev 11 ай бұрын

Hi, just the defualt code. Is it pretty?

@younesdro202 Жыл бұрын

Hello Sakura . thank you for your videos are very helpful. I tried a discord invite link in the desription of a previous video, but it's invalid.

@SakuraDev Жыл бұрын

hi, try this one: discord.gg/HW9efTmy

@juanbovier7458 11 ай бұрын

Hi Vahid, can you please make a video using refresh tokens whit this provider? I need to save it on MongoDB and most importantly, i need to use 2 providers at the same time, i am creating something like Calendly, i mean, the users create their accounts using credentials (email - password) and after that i need to sync their Google Calendar but i don't know how can i do that

@SakuraDev 11 ай бұрын

hey. refresh token is included. for the 2nd problem you can use "events" in next auth. I can create a video on that if you have a problem on that

@juanbovier7458 11 ай бұрын

@@SakuraDev i'm not finding nothing about sync an gmail when the users are loged whit their credentials, do you can make a video?

@SakuraDev 11 ай бұрын

@@juanbovier7458 yes of course. I will create a video about that. Is there anyrhing else you want me to include in the video?

@juanbovier7458 11 ай бұрын

I don't think so. What I would need is to have a button where, after creating my user with my credentials, I can link my Google account. The purpose of this is to access data from my Calendar, specifically so that a third party (someone who doesn't use the app) can view my availability and book a date and time (like Calendly). I'm mentioning this because I'm not sure if I need to store the refresh token in the database to allow this, but I believe I should.@@SakuraDev

@user-es2jt6qe2o 10 ай бұрын

This will make entire app client side

@SakuraDev 10 ай бұрын

Nope, this is one of the biggest misunderstandings about server components.

@user-es2jt6qe2o 10 ай бұрын

@@SakuraDev but sir.. we will lose some power of next js 13 like async functional components

@SakuraDev 10 ай бұрын

@@user-es2jt6qe2o If you turn root layout to client, you are right, it converts whole app to client side, but you can have server components wrapped by a client component. that's why I have create a client component "Providers" and wrapped children of root layout inside it

@user-es2jt6qe2o 10 ай бұрын

@@SakuraDev waw this is really helpful.. thank you sir.

@GU0TEA1031 Жыл бұрын

how can I get access token after conneted google auth, I want to send it to backend,I watched your this video (kzfaq.info/get/bejne/nL9_ldWjmNDKYKs.html) , I can't get access token,just have these data following user{email,exp,iat,id,image,jti,name,picture,sub},please teach us thanks alot

@henriquekramer_ 9 ай бұрын

How does the expiration of this authentication work? How long will the user stay logged in? Does it renew automatically? Does NextAuth handle all of this management?

@SakuraDev 9 ай бұрын

The default time is one week, but we can change it in the authOptions. And next-auth will handle it.