Next.js 13 Google Login (NextAuth V4 / TypeScript Tutorial)

[@paulthomas1052]

Great tutorial and intro with OAuth - very useful. Thanks :)

[@CooperCodes]

Thank you for your consistent support! Glad you're finding the videos useful

[@hideinbush0]

This was just the tutorial I was looking for. Thank you!

[@CooperCodes]

glad that it was helpful, best of luck with your projects !

[@tranxuantien1495]

i have find to the authentication of google with page.tsx + layout.tsx so long. it safe my life at beginer dev. Thank you so much!!!!

[@insanity7573]

God bless you, bro! You just helped me with the one issue that i was not able to handle for few hours

[@docksfps]

Does this application auto refreshes the access token, like the library of google already does by itself? Or we have to handle it ourselves?

[@alittlecoding]

couldn't do it better. it's just perfect. super simple to understand. thanks a ton

[@Shalom_Phiri]

Can you do this on a navbar and grab the user information and send it to a database, like mongodb

[@Jose-oy1ow]

really useful! i recently watched your supabase discord video and wanted to setup google oauth2 for supabase, this helped.

[@CooperCodes]

Thanks for watching Jose! Appreciate the comment and support

[@yvonnecheung567]

Hi, I encountered a problem while starting the demo, which has been bothering me for a long time. The demo will not directly pop out of Google's login box, but will display "Try signing in with a different account."

[@pidevex]

I don't understand why you use "pages/api/.../..." directory tee for api when you use next.js 13, they've already changed their routing approach. It is deprecated

[@freetolisten]

Thank you so muchhh

[@UttamRajGiri]

is it possible to redirect directly to google login form after clicking sign in with google first button?how can we eliminate extra sign in with google button? is that possible?

[@Shmoji]

Same question here

[@UttamRajGiri]

@@Shmoji i find out the solution, you just need to pass google inside signIn like signIn('google') , cheers !!

[@ashutosh887_]

Do we have to set some App Information or App Domain at this point 1:19

[@giannhskz]

Thanks for the great tutorial. I would like to ask a question, the auth does not work for me. I have followed every step and search everything I could on web although I can not resolve it. When I am pressing the button to redirect on singIn() I get a 404 error page and on console I get an error 'CLIENT_FETCH_ERROR' with message 'JSON.parse:+unexpected+character+at+line+1+column+1+of+the+JSON+data'. Do you have any idea why this is happening?

[@CooperCodes]

My first thought is that you need to set the NEXTAUTH_URL environment variable, so create a .env.local file at the top of ur Next application (inside the google-auth folder for this project), and then put NEXT_PUBLIC_ANALYTICS_ID=localhost:3000 I didn't cover this in this video because technically it should work locally, but once you do production you have to define the URL that NextAuth is communicating with (next-auth.js.org/errors look at CLIENT_FETCH_ERROR ). Hopefully this is helpful and I will do a deployment video soon for the full production and Vercel setup. Its very possible the error is coming from the fact that Next.js 13 app folder is in Beta so just be aware of that, there are some breaking features for random reasons sadly.

[@giannhskz]

@@CooperCodes First of all, I am really grateful for the fast answer. Unfortunately I had already tried this with no luck. Could the problem be the fact that I have already set different pages for my app and there is a conflict between server and client side pages? I was trying to access Next auth from localhost:3000/welcome and tried to move my welcome page on root (localhost:3000) but this does not work too.

[@CooperCodes]

Hm I'm unsure, if you send me an email [e-mail] I can take a look at your code if you put it on a Github repository. No promises though as I'm working on things but hopefully I can help.

[@giannhskz]

@@CooperCodes Thank you too much for this. I will try a bit more to debug it myself and if I don’t achieve this a will contact you.

[@user-fn2rt6lb1o]

@@CooperCodes Is there a resolution to this thread?

[@yourhistorianofficial]

You are just awesome

[@timetosleep8055]

How would I go about getting the accessToken and passing it as a header authorization bearer in fetch request with server component? unstable_getServerSession() doesn't return an accesstoken. I do have access to the accesstoken with getSession on client side... EDIT: Got it working... forgot to import my authoptions from the nextauth api file and pass it in the unstable_getServerSession() function. see below // app/page.tsx import { unstable_getServerSession } from 'next-auth/next' import { authOptions } from '../../pages/api/auth/[...nextauth]' export default async function Page() { const session = await unstable_getServerSession(authOptions) return {JSON.stringify(session, null, 2)} }

[@devilsKrimson]

Thank you for the tutorial! I am having an issue with the implementation. On every page refresh session is always initially null before the valid session is returned. This causes the page to flicker, showing the Sign In button for a brief second before showing the Sign Out Button. I am currently using the useSession hook that you use in your tutorial which I believe is using client-side rendering to render the buttons. Do you know why this might be happening?

[@brains.brawn.beauty9782]

I am also getting this issue. I cloned the GitHub Repo that Cooper linked in his description and am seeing the flicker. It shows the Sign In Button when the page initially loads and then after a second, it shows the Sign Out Button as well as the User Information. @Cooper, are you seeing this as well?

[@ASTnet]

const { data: session, status } = useSession() Here the session hook got a state called status ( this status which can be "loading" | "authenticated" | "unauthenticated" ). you have to check if the status is loading or no then have to check the session, then display the content(here you have login and logout buttons). so what you need is this simple line of code if (status === "loading") { return "Loading or not authenticated..." }

[@Jjextreme4411]

nice work!

[@Victor-wh9bs]

Thanku

[@diegoavendanohernandez9908]

It would be great if you can show us how to integrate this with prisma

[@aamhermansyah7859]

Thanks you helped me^^

[@HtetMyat79]

Awsome very Good tutorial Clear and faster

[@ducavalcanti]

This one really helped me out. Thank you for sharing!

[@uzaahr]

I am getting Error: This action with HTTP GET is not supported by NextAuth.js as feedback when hitting the button :(

[@uzaahr]

Found my bug - I missed the "auth" folder inside the API folder!

[@rockbelleh6237]

Tnks alot fpr dis with love from Nigeria🤗.u r reli helping me in so many ways via your videos.u r a great teacher✔️.Thnks once more 😎

[@CooperCodes]

No problem! Thank you for your comment. Glad the videos are helpful :)

[@jeffreysaari]

How could you integrate this with a db such as Mongo if you are already storing user accounts?

[@CooperCodes]

Hey there, I need to look more into this and will try to make a video with Next.js 13 and a custom DB (I'll probably use MongoDB) to hold users. From what I've gathered is you need an adapter to talk to MongoDB (next-auth.js.org/adapters/mongodb). From what I understand NextAuth has default database models which it will store in your MongoDB database automatically if you initialize the adapter, and the models look like this next-auth.js.org/adapters/models . In order to use your own models in your own database, it looks like you are going to have to create your own custom MongoDB adapter which you can read up on here: next-auth.js.org/tutorials/creating-a-database-adapter . As you can see from here you will be able to define all of the logic for routes such as createUser, getUser, etc. hopefully this is helpful in some sense but I'm just taking a first look at using a custom database right now :). Will be more educated in the future for a great video soon