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.

🎬 Related Videos 🎬

📜 Code 📜

🔗 Links 🔗

👨🏼‍💻 About Me 👨🏼‍💻
I am a principal software engineer and architect who loves building cool cloud software.

🔖 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 ❤

[dragondevelop]

at 14:40 of video, content of route.ts file which is visible in screen are completely changed

[nasari]

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?

[brandondermody]

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!

[muhammadisa]

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

[zaid_ahmad]

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

[thiagoneves]

That's pretty awesome! Thank you!

[algorithmprime]

Please can you let me know where you get the session

[shailendraryvensingh]

Awesome, I see🙆🏻🙆🏻

Thank you so much 😊

[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

[tsykin]

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

[alowais]

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?

[bobbyyyya]

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"

[dorinoxani]

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

[MayurNalwala]

Do we have to add NEXT_PUBLIC prefix for google's id and secret for 14?

[personzen]

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

[lewiemarks]

Whats the significance of prisma? Is this just a database connection lib? or just for testing dev env.

[sneakylemon-uz]

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

[mistadeploytoon]

What if user wants to update their gmail email address? with different gmail email address?

[HaythamHakim]

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