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

[@codecommerce]

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

[@arisudana3672]

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

[@codecommerce]

Thank you my friend!

[@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

[@ThanhNguyen-xe1zs]

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

[@codecommerce]

You are so welcome!

[@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!!!!

[@hoobmuffin]

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

[@lucifer3646]

You deserve millions man. Thank you for your videos.

[@codecommerce]

Thank you dude! 🙏

[@Odidi_Bee6ix]

Thanks cheif 👍🏿❤️ Beginner friendly

[@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!

[@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!

[@plotitsyn]

Great video! Thanks!

[@codecommerce]

Thank you!

[@Koxy_Dev]

This was very helpful. Thank you.

[@MehdiMehdi-wp4wm]

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

[@JustSkillGG]

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]

Haha you’re the man!! Thanks dude!

[@harshafartale5775]

Much needed! ❤️

[@codecommerce]

Thank you harsha!

[@guilhermelopes7939]

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

[@dhriti3080]

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

[@richleach198]

Well done Clint, thank you for the video.

[@codecommerce]

Thank you Rich!

[@ghislainmitahi2584]

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

[@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

[@sarvenazranjbar6672]

Thank youu saved my life!

[@luisbarbosa5597]

always my go to vid, most effective

[@y2b5]

Works well, thank you so much!

[@codecommerce]

Thank you Daphne!

[@maratiot]

Awesome and helpful content! You are good bro!

[@timofeybabisashvili7077]

great, works! Thank you

[@elisperezmusic]

thanks!! Excellent video..! 🤯🤯🤯

[@toainguyencong3811]

nice man

[@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!

[@fgalego]

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]

Thank you Filipe!

[@tranxuantien1495]

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

[@josephomotade864]

you are making web development so easy 😁 thanks man

[@codecommerce]

Joseph! You are the man!

[@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]

Amazing much needed tutorial.

[@codecommerce]

Glad it was helpful! Thank you Faeez

[@flor.7797]

thank you, this worked very well

[@alii4334]

How to handle preview urls programmatically with Google?

[@emersonxyz]

you remind me of cutter from masterchef. btw great tutorial

[@princeakim01]

thanks very much from Burkina Faso

[@mohammadnizarardansyah7657]

thanks buddy, this video so helpfull

[@mord685]

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

[@adityadubey4578]

This was very very helpful man, thanks a lot 😃

[@BabaNoami]

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

[@codecommerce]

Awesome Noam!

[@oldmandevdave]

Really helpful. Thanks!!!

[@codecommerce]

Thank you Dave!

[@kman1111000]

Very helpful video, thanks man

[@codecommerce]

Thanks Kody!

[@renaud689]

Great tuto thanks !

[@codecommerce]

Thank you sir

[@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

[@vraj2003]

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

[@niteshprajapat7918]

You're incredible ❤️🔥

[@codecommerce]

Nitesh! What is up man!

[@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?

[@andrewwachira1]

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

[@codecommerce]

Anytime dude! Thank you for watching!

[@gnumanoj]

Thank you so much !!!

[@youneshenni5417]

This is soooo goooood !!!!

[@codecommerce]

Thanks dude!

[@siosaiafonua9286]

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

[@filipevalentegomes2383]

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]

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

[@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.

[@arshah246]

hello friends i am using next js 13.4 i have set up my credentials on google auth but when i click on sign in button it leads me to 404 page i think its due to api/auth/callback/google page because there is no page in my file , but in the given video it is also not available then why video's code is working and mine is not can anyone please guide or suggest me something thanks in advance with love from pakistan

[@PeopleWatchingMarcus]

same issue

[@PeopleWatchingMarcus]

Ok, so this is a next 13 issue. rename `[...nextauth].ts` to `route.ts` and put in the `[...nextauth]` directory update this file to ``` const handler = NextAuth({ providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID ?? "", clientSecret: process.env.GOOGLE_SECRET ?? "", }), ], secret: process.env.JWT_SECRET, }); export { handler as GET, handler as POST }; ```

[@EnriqueMoranG]

You're amazing!!

[@codecommerce]

You’re the man!

[@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

[@saikrishnamuntha62]

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

[@durotemy8410]

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

[@vraj2003]

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

[@vraj2003]

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]

Thank you Vraj! I’ll pin this!

[@dini.alejandro.eyecue]

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

[@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.

[@danielbaychev9297]

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

[@DesertWebDev]

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?

[@domistry]

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

[@renatoAllArt]

thanks dude

[@beno_zone6]

Very helpful

[@codecommerce]

Thank you!

[@tolu.olunubi]

Thank You

[@photoshopkbshorts1]

merci beaucoup a toi :))

[@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.

[@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 ?

[@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.

[@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?

[@ron-almog]

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

[@codecommerce]

We can do typescript! Thank you

[@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"

[@Rikimkigsck]

An updated video would be great

[@codecommerce]

Nextjs 13 - kzbin.info/www/bejne/iZDWh2mYjrx-jrM

[@Rikimkigsck]

@@codecommerce Thank you! Liked and Subscribed

[@IanCostello1]

Legend

[@codecommerce]

Thanks dude - much love! 💪

[@tikitokz3742]

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 ??

[@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?

[@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

[@johnthomas1833]

Can this be used with React js application ?

[@가나다-x1r7o]

thank you

[@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

[@EmmanuelAyetan]

What about the adapter?

[@Troy-ol5fk]

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

[@obey_giant]

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

[@codecommerce]

About to pin some useful content tonight!

[@eventsjamaicamobileapp1426]

I keep getting "missing required error components, refreshing..." in the local broswer

[@yousafwazir3167]

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

[@codecommerce]

Thank you Yousaf!

[@luisbarbosa5597]

nice bruh

[@anjanobalesh8046]

I think this holds good for onekkhon sso also

[@theavazov]

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

[@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?

[@jorgeassaf]

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

[@codecommerce]

Thank you Jorge

[@realtonaldrum]

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

[@manny8816]

No, it shouldn't

[@bafxyz]

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

[@codecommerce]

I can add that!

[@EmmanuelAyetan]

What about the database?

[@Нннн-г3й]

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

[@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

[@mohitpunia6245]

I am getting [error][CALLBACK_OAUTH_ERROR] and JWT expired ,,,,,I did same code as you have done , can you tell what should i do

[@codecommerce]

1) Check my code out on GitHub 2) Check Firebase to make sure you have your auth set up correctly