Next JS Authentication - Sign In With Google (NextAuth.js)

Подписаться 40 тыс.

Просмотров 70 тыс.

50% 1

Learn how to incorporate Next JS authentication into your Next JS application. Sign in with Google using the Next-Auth package provided for us by Vercel! Start from a blank NextJS application and set up next-auth from scratch and sign in using your google account.
🙏 Thank you for following along and please let me know what you think in the comments below!
🏆 User sign in with Google account
🏆 NextAuth.js web app authentication
🏆 generate-secret.vercel.app/32 (Generate Key)
ZeroTo Mastery:
- Master React JS Course - bit.ly/Learn-React-JS
- Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer...
Coding Challenges!
bit.ly/Code-Challenges
❤️ Support the Channel
www.buymeacoffee.com/clintbriley
Instagram 💪
/ fireclint
⏰ Timestamps
00:00 Start
00:50 - Install next-auth
01:20 - Create nextauth.js route
04:21 - Obtain ID/Secret
06:30 - .env file
09:40 - Session Provider wrapper
11:47 - Create login page
17:18 - Create account page
18:30 - Client side rendering
21:00 - Server side rendering
23:18 - Spelling error 🧐🧐
24:30 - Wrap up
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj

Наука

Опубликовано:

8 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 183

@codecommerce 2 года назад

🏆 generate-secret.vercel.app/32 (Generate Key)

@leanhtung9743 Год назад

I am on new job and working mainly with Nextjs and I gotta say i'm waiting for your new videos daily since I applied almost everything you upload on my job =))))) so Thanks!!!!

@arisudana3672 Год назад

This content saved my life as a beginner dev, thank you so much King!

@codecommerce Год назад

Thank you my friend!

@JustSkillGG 2 года назад

I am really glad that I discovered your channel. Awesome videos and awesome explaining. One year later, when this channel would have 200k subs, I will make the comment "I was a subscriber from 6k :D " Keep it up, man! You got this

@codecommerce 2 года назад

Haha you’re the man!! Thanks dude!

@elijah_10000 Год назад

You're a livesaver. Best video I've seen surrounding the topic. I loved how you showed multiple ways to do things, and how you covered every edgecase. Really helpful video :)

@codecommerce Год назад

Thanks Elijah

@danielsoto2552 Год назад

I had troubles using Google Api in a different language (german) as the menu is completely different, changed to english, all great now. Thanks for the step by step tutorial!

@guilhermelopes7939 Год назад

Thank you for such an important tutorial, congrats from Brazil.

@maratiot Год назад

Awesome and helpful content! You are good bro!

@sarvenazranjbar6672 Год назад

Thank youu saved my life!

@Koxy_Dev 5 месяцев назад

This was very helpful. Thank you.

@flor.7797 Год назад

thank you, this worked very well

@adityadubey4578 Год назад

This was very very helpful man, thanks a lot 😃

@gnumanoj Год назад

Thank you so much !!!

@Odidi_Bee6ix Год назад

Thanks cheif 👍🏿❤️ Beginner friendly

@luisbarbosa5597 Год назад

always my go to vid, most effective

@barehandstudio Год назад

thank you for you video, i have been stuck on next auth for a while now. your are awesome

@codecommerce Год назад

Thank you my friend!

@timofeybabisashvili7077 9 месяцев назад

great, works! Thank you

@ThanhNguyen-xe1zs Год назад

You make it easier for me, i have been following you, thank you!

@codecommerce Год назад

You are so welcome!

@plotitsyn Год назад

Great video! Thanks!

@codecommerce Год назад

Thank you!

@josephomotade864 2 года назад

you are making web development so easy 😁 thanks man

@codecommerce 2 года назад

Joseph! You are the man!

@lucifer3646 Год назад

You deserve millions man. Thank you for your videos.

@codecommerce Год назад

Thank you dude! 🙏

@daphnesplyntr Год назад

Works well, thank you so much!

@codecommerce Год назад

Thank you Daphne!

@dhriti3080 Год назад

You are awesome man. Thanks a lot for this video.

@elisperezmusic Год назад

thanks!! Excellent video..! 🤯🤯🤯

@hoobmuffin Год назад

Thanks for not overcomplicating the demo with tons of unnecessary stuff like the rest of these guys do.

@harshafartale5775 2 года назад

Much needed! ❤️

@codecommerce 2 года назад

Thank you harsha!

@mohammadnizarardansyah7657 Год назад

thanks buddy, this video so helpfull

@fgalego 2 года назад

Also "How to build/have an awesome web dev learning YT channel"! Keep it up chief, learning has never been so good and easy like here 👌

@codecommerce 2 года назад

Thank you Filipe!

@ghislainmitahi2584 Год назад

I love it dear, Big Up to you, Be blessed

@davidofug Год назад

Wonderful tutorial man! I was able to implement everything here now, I need to redirect after successful login. Thank you

@codecommerce Год назад

So awesome man, thank you for the support 🙏

@adhdmed 2 года назад

Amazing much needed tutorial.

@codecommerce 2 года назад

Glad it was helpful! Thank you Faeez

@richleach198 Год назад

Well done Clint, thank you for the video.

@codecommerce Год назад

Thank you Rich!

@renaud689 Год назад

Great tuto thanks !

@codecommerce Год назад

Thank you sir

@princeakim01 Год назад

thanks very much from Burkina Faso

@tolu.olunubi Год назад

Thank You

@BabaNoami Год назад

Good stuff. Was getting stuck how to set it up right. Thanks!

@codecommerce Год назад

Awesome Noam!

@andrewwachira1 Год назад

Thanks for the video brother. You helped me out big time.

@codecommerce Год назад

Anytime dude! Thank you for watching!

@renatoAllArt Год назад

thanks dude

@toainguyencong3811 Год назад

nice man

@oldmandevdave Год назад

Really helpful. Thanks!!!

@codecommerce Год назад

Thank you Dave!

@user-jo7bu3cu7s Год назад

thank you

@niteshprajapat7918 2 года назад

You're incredible ❤️🔥

@codecommerce 2 года назад

Nitesh! What is up man!

@photoshopkbshorts1 Год назад

merci beaucoup a toi :))

@lukasmacku2423 Год назад

Thank you so much! I need someone like you to explain me how to do it. I was looking at the ofc docs but I did not get why I have to use ENV and google. I though that it is only for idk what i was thinking. The important thing is that i now know how to implement it. Ty :)

@codecommerce Год назад

Thank you sir!

@kman1111000 Год назад

Very helpful video, thanks man

@codecommerce Год назад

Thanks Kody!

@domistry Год назад

That was awesome, thanks bro; can you please share google's authentication page customization options?

@youneshenni5417 Год назад

This is soooo goooood !!!!

@codecommerce Год назад

Thanks dude!

@emersonxyz Год назад

you remind me of cutter from masterchef. btw great tutorial

@immythic8351 2 года назад

You're amazing!!

@codecommerce 2 года назад

You’re the man!

@user-vz8re7zh1f Год назад

love the video. can you make a video about how to add extended user data? like a favorite color or a custom username other than the provider username?

@dini.alejandro.eyecue Год назад

Thanks, man! Any tip on how to use the server-side version but for all the routes (except /login) at once?

@vrajroy1976 2 года назад

Hey Sir, Please upload the same video with using JWT token rather than Session.

@mord685 Год назад

Hi Code Commerce, what version of yarn do use to generate the pages, public, and styles directories?

@beno_zone6 Год назад

Very helpful

@codecommerce Год назад

Thank you!

@siosaiafonua9286 Год назад

How do you redirect to the account page after signing in to google or github?

@sandeshsapkota3375 Год назад

Hi Thank you for the video. I am looking to implement sign in with pop up not the redirect on the another page and also want to avoid second time sign in with google button . how do I do it ?

@ron-almog Год назад

Awsome! I wish it would be in typescript, but a great starting point anyways.

@codecommerce Год назад

We can do typescript! Thank you

@yousafwazir3167 2 года назад

Thanks this helped out so much, could you do a adapters one with prisma and postgres sql as I find that really hard

@codecommerce 2 года назад

Thank you Yousaf!

@aquilabdullah Год назад

This was a great tutorial, but how do you get and store the access token and refresh token from the account, when you signin?

@jamesrobert5332 Год назад

I am persisting the user in a database using the adapters, what I'm trying to figure out is how to make a user choose which google account they want to sign in with because after they sign in with a certain account the first time, everytime they try to sign in with google it will sign them in using the same initial account, but I want to bring up that window that asks them which google account they want. Any ideas or insight on this?

@oldmandevdave Год назад

so now that we have logged in, how do we get resources from a protected api? Example we login as admin and we want to perform CRUD ops on products. Springboot preferred but any back end language.

@luisbarbosa5597 Год назад

nice bruh

@tranxuantien1495 Год назад

i'm using page.tsx + layout.tsx structure. Where can i put the seesion provider?

@chillscripter Год назад

i did the exact same steps but didn't got the same result . I don't know why , it's the same version of next-auth same code and at the end different result . the problem is when i signin and enter my Gmail , my website take the Gmail but after a few sec it'll show a message that say's try with another account and there's button for clicking to enter your another acc but it'll just stick to same page and when i check it from network tab it just send different cookies to the URL . don't know what's the problem and where am i making mistake , any help would be appreciated

@barehandstudio Год назад

same error here, where you able to fix this ?? please help

@outplay3759 Год назад

Hi, very nice content, thank you. I have a question: As you can see you get a flash of the page before it redirects you to the log in page when you try to access the page while you are not logged in. When you implemented the serverSideProps, the flash was removed. I tried to google this and what I found was that if I don't want the flash of the unauthorized page to happen, I have to use the serverSideProps on those pages. Does this mean if I have authentication I cant pre-render pages with static props if I dont want the contect to be flashed to the users who are not logged in? I am new to this so I may be way off with my logic :D

@markchang1762 Год назад

If I remember correctly, static props are for build time whereas serverSideProps are for fetching at request time. Authentication changes and you need to validate at the time when someone request a page

@asifsaho Год назад

how backend will understand the fronend is logged in? is there JWT token or something? how the backend will verify it before returning any data?

@durotemy8410 2 месяца назад

thanks bro...but for small project like this u should pls drop ur github repo

@mauroreis1809 Год назад

It works fine with localhost but after i finished my site and push it to production, i can't authenticate "Error 400: redirect_uri_mismatch". And yes, i changed the .env and also the settings in the google cloud console. I have been stuck with this problem for 3 days or so and it's the last project for my portfolio.

@justrandom7412 Год назад

May I know how to force the signin to choose an email everytime I login? In 22:53, it auto logs in all through out

@Troy-ol5fk Год назад

why is the jwt secret a env variable? I thought each user will get a unique token

@rolandocruz1695 Год назад

Loved the video! this was super useful! I'm just a little confused what I should do with the JWT token? do i need that for production?

@luzaw4957 Год назад

Do you mean JWT secret? It's a 32 bit key that Next Auth needs it to issue and verify JWT.

@longnhat6405 Год назад

thanks

@codecommerce Год назад

You're welcome!

@jorgeassaf Год назад

hello brother, in a video I could explain the authentication with react and supabase. good video

@codecommerce Год назад

Thank you Jorge

@filipevalentegomes2383 2 года назад

Hey, do you have a Next.js Firebase v9 CRUD with file upload tutorial? There aren't many tutorials or even courses on it, where the uploaded files are linked to the user that signed in and uploaded the files.

@codecommerce 2 года назад

That would be cool! We can do a Firebase file upload with react!

@alii4334 Год назад

How to handle preview urls programmatically with Google?

@anjanobalesh8046 Год назад

I think this holds good for onekkhon sso also

@odetapenikaite4339 Год назад

To anyone that got a different screen when tried to create credential: you need to first set up the OAuth consent screen. After that you are able to go on and create the credentials :)

@codecommerce Год назад

Thank you odeta

@MehdiMehdi-wp4wm 11 месяцев назад

Hi, i am getting this:"Error: [next-auth]: `useSession` must be wrapped in a

@danielbaychev9297 Год назад

is it possible to customize that black page with the login button?

@Rikimkigsck Год назад

An updated video would be great

@codecommerce Год назад

Nextjs 13 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-S_sV6bYWKXQ.html

@Rikimkigsck Год назад

@@codecommerce Thank you! Liked and Subscribed

@saphalpantha9865 Год назад

This is so nice but i have some query that for normal credentials provider it works fine , store data in db but using 3rd party providers how can we access the password and store to database when the user click sign in with google/fb.

@realtonaldrum Год назад

does it make any difference to use .env.local instead of .env as file in the ./-folder?

@manny8816 Год назад

No, it shouldn't

@IanCostello1 Год назад

Legend

@codecommerce Год назад

Thanks dude - much love! 💪

@obey_giant 2 года назад

How would you make a custom sign in page, styled exactly how you want instead of the plain sign in with google page?

@codecommerce 2 года назад

About to pin some useful content tonight!

@bes1desme Год назад

Just.. wow..

@codecommerce Год назад

Thanks dude!

@saikrishnamuntha62 5 месяцев назад

Hi bro how to set the default page to be login when go to npm run dev in the browser it to be handle localhost:3000/login not the home page localhost:3000 I implemented but when I gave localhost:3000 its changing to localhost:3000/login but the issue is white space occuring 2secs then login page occuring how to resolve this issue

@bafxyz 2 года назад

Good video, would be great to see github link as well

@codecommerce Год назад

I can add that!

@goroundbd3723 Год назад

bro where chalk up u been, it is so cool

@codecommerce Год назад

Apologies my friend! Coming back soon! 🙏

@user-gc3ps7tq4w Год назад

how to get id token. i want to verify token on server and give from server access token for client. sorry i use google translate, i dont speak english

@theavazov Год назад

Good content, can you tell me how to redirect user after login with google from "/login" to "/account"?

@johnthomas1833 Год назад

Can this be used with React js application ?

@user-eh7eh4je5b 8 месяцев назад

What about the adapter?

@JBUDDTV Год назад

could you do level access with this method like admin and user?

@codecommerce Год назад

Yes you can add user specific rules.

@popalopagos Год назад

Is there any way to have local & prod both functioning simutaniously? It's kind of a deal breaker if I want to debug local and then take down prod. EDIT: Just realised I can probably make 2 apps and then switch between them depending on environment.

@coffeymay6775 Год назад

Research CI/CD

@Khaalid_JSX Год назад

I was following your tutorial but I keep get a prompt on the Google sign page anytime I clicked on the sign in with Google button to "To sign in with a different account"

@vrajroy1976 2 года назад

Hey Please Reply, How do I remove black screen before user is signin in?

@vrajroy1976 2 года назад

No worries, I have to add provider name inside signIn() function call, in this case, google. if anyone want to do the same. Replace ()=>signin() with ()=>signIn('google') Btw, Thank you sir for this amazing tutorial

@codecommerce 2 года назад

Thank you Vraj! I’ll pin this!

@user-eh7eh4je5b 8 месяцев назад

What about the database?

@tikitokz3742 10 месяцев назад

Hi , I've qus i got this ERROR while im using your code (ERROR : expected 200 OK, got: 403 Forbidden) and in my chrome page i got ERROR (Try signing in with a different account.) I can't FIX ⛔⛔How can i FIX ??

@RahulShinde Год назад

Hi Code Commerce I got below error message, while trying to sign in. It occur random time but most of the time failed Try signing in with a different account.

@sanwaniwani5072 Год назад

you got have solve?

@Code_Prince Год назад

I'm using Next 13.4.4 and dont have _app.js file and keep getting this error Error: [next-auth]: `useSession` must be wrapped in a Tried everythign, read everywhere and still and issue need help please

@codecommerce Год назад

Try to wrap in the page.js or index