Set up Google OAuth with Next.js using Next-Auth!

Setting up OAuth is more than just writing a little code. You need to configure the app with your identity provider and ensure the configuration is correct. This guide walks you through how to set it up end-to-end with Google as the identity provider.
📰 Newsletter 📰
Sign up for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry.
ethanmick.com/newsletter/
🎬 Related Videos 🎬
• Set up Next Auth - • Set up Next-Auth with ...
📜 Code 📜
• ethanmick.com/how-to-set-up-g...
🔗 Links 🔗
• console.cloud.google.com/
👨🏼‍💻 About Me 👨🏼‍💻
I am a principal software engineer and architect who loves building cool cloud software.
• Website: ethanmick.com/
• GitHub: github.com/ethanmick
• Twitter: / ethan_mick
• LinkedIn: / ethan-mick
• Agency: ethanmick.dev/
🔖 Chapters 🔖
00:00 - Intro
00:23 - OAuth
03:29 - Google Setup
11:30 - The Code
17:36 - Production
20:38 - Outro

[@Abolnaga]

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 ❤

[@hellscream360i]

Thank you. Another perfect tutorial 👌

[@ethan_mick]

Thanks so much, friend!

[@thiagoneves50]

That's pretty awesome! Thank you!

[@muhammadisa440]

Thanks, Ethan. Your videos are always helpful as always.

[@ethan_mick]

Glad you like them!

[@nasari7436]

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?

[@shailendraryvensingh]

Awesome, I see🙆🏻🙆🏻 Thank you so much 😊

[@algorithmprime]

Please can you let me know where you get the session

[@zaid_ahmad25]

Thank you so much for such a detailed video. Just had a quick question (im a newbie), how do we sign out? 😅

[@garikmelqonyan6011]

Good job!

[@bikerd12]

Greate tutorial.

[@brandondermody8121]

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!

[@21Dimen]

Did you ever find the solution? I noticed the same thing

[@ullaskunder]

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

[@bobbyyyy123a]

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"

[@alowais900]

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?

[@ethan_mick]

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.

[@leesangbin]

excellent❤

[@italovisconti]

tysm!!!

[@31ashaswatraj44]

Thanks thats exactly I wasnted

[@HaythamHakim]

What is the tool you are using to make the tutorial like writing on a whiteboard? Thanks for this :)

[@almeidaofthejoel]

excalidraw

[@27sosite73]

ty mate

[@optimaflo]

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

[@ethan_mick]

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.

[@kacperkepinski4990]

how to change existing project?

[@personzen8028]

Thank you. I would like to see how to use Middleware to protect routes.

[@ethan_mick]

Check this out! kzbin.info/www/bejne/aJzKooOsqJWdlas

[@syedbilalchand1766]

How to integrate in custom pages

[@matimassetti]

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?

[@ethan_mick]

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!

[@user-ru2zd8ey7b]

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

[@tsykin]

You didn't show a lot of steps. This guide wasn't really helpful for me ((

[@dorinoxani5026]

when it will be live sass coding? I really like it

[@ethan_mick]

I'm glad you like it! Just taking some time off as I ramp up on a new project.

[@user-ej6ux1bk5v]

please wht the name of the app that you use to do those diagrams

[@ophatjb]

excalidraw

[@gabegabegabe573]

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?

[@ethan_mick]

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: kzbin.info/www/bejne/aJzKooOsqJWdlassi=PTQWLkEo6PkzKJp2&t=1483

[@gabegabegabe573]

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

[@21Dimen]

Where does the lib/sessions come from? I am confused

[@XxlolktkatxX]

me too

[@kristiankanya431]

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.

[@ethan_mick]

Thank you, yes. Excellent suggestion!

[@kristiankanya431]

@@ethan_mick Is that how you would’ve handled it?

[@rootbindev]

Great

[@mohdali-yq8gq]

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

[@ethan_mick]

Thanks and welcome! I have a series: Time Tracker: kzbin.info3lAsw0vNuDo?feature=share Converter: kzbin.infojEa7xJCqCxk?feature=share That are live series. I might do another that's all recorded depending on my work schedule.

[@mohdali-yq8gq]

@@ethan_mick great!!

[@sovannborithyun5205]

Would you please share Facebook login as well

[@leesangbin]

please. github provider sample

[@gamerhamim9110]

PLEASE I BADLY NEED HELP You do not have permission to sign in. i did everything correctly

[@user-dm2kl7dw2h]

u miss a lot of steps

[@user-dm2kl7dw2h]

using zoom is anoying

[@adelmae9037]

why such thumbnails ?

[@ethan_mick]

What do you mean?