How to Implement Google OAuth Login in Next.js: A Guide

Google OAuth is one of the easiest ways to let users sign in without dealing with passwords. It boosts conversions, cuts friction, and works great with modern frameworks like Next.js. If you’re building any real-world application—dashboard, SaaS, community site, or internal tools—Google login is a must-have.

This guide walks you through the complete setup using Next.js (App Router) and NextAuth.js , the most reliable auth library for Next.js.

Why Use Google OAuth?

Let’s keep this simple:

• Users don’t need to remember another password
• Google handles identity, security, and MFA
• Signup becomes a one-click flow
• You reduce risk and maintenance

That’s a win for both your UX and your engineering team.

What You Need Before Starting

• A Next.js application (13+ with App Router preferred)
• Node.js LTS installed
• A Google Cloud account
• Basic familiarity with environment variables

Step 1: Create OAuth Credentials in Google Cloud

This part trips up many beginners, but it’s actually quick.

1. Visit Google Cloud Console
2. Create or select your project
3. Go to APIs & Services → Credentials
4. Click Create Credentials → OAuth Client ID
5. Choose Web Application
6. Add these URIs:

Authorized redirect URI:

http://localhost:3000/api/auth/callback/google

Once created, Google gives you two keys:

• Client ID
• Client Secret

Keep them safe—you’ll need them soon.

Step 2: Install NextAuth and Dependencies

Open your terminal:

npm install next-auth

NextAuth handles all the OAuth wiring for you.

Step 3: Add Environment Variables

Create a .env.local file:

GOOGLE_CLIENT_ID=your_client_id
  GOOGLE_CLIENT_SECRET=your_client_secret
  NEXTAUTH_URL=http://localhost:3000
  NEXTAUTH_SECRET=your_random_secret

Use openssl rand -base64 32 to generate the secret.

Step 4: Set Up the Auth Route

Inside app/api/auth/[...nextauth]/route.js :

import NextAuth from "next-auth";
  import GoogleProvider from "next-auth/providers/google";
  
  export const authOptions = {
    providers: [
      GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      })
    ],
    session: {
      strategy: "jwt",
    }
  };
  
  const handler = NextAuth(authOptions);
  export { handler as GET, handler as POST };

That's the entire server-side logic. NextAuth handles tokens, sessions, and callbacks for you.

Step 5: Create the Login Button

Drop this inside your UI:

"use client";
  
  import { signIn } from "next-auth/react";
  
  export default function LoginButton() {
    return (
      <button
        onClick={() => signIn("google")}
        style={{ padding: 12, borderRadius: 8 }}
      >
        Sign in with Google
      </button>
    );
  }

Clicking this triggers the OAuth flow automatically.

Step 6: Access the User Session

Anywhere in your app:

"use client";
  
  import { useSession } from "next-auth/react";
  
  export default function Dashboard() {
    const { data: session } = useSession();
  
    if (!session) return <div>Please log in</div>;
  
    return (
      <div>
        <h2>Welcome {session.user.name}</h2>
        <img src={session.user.image} width={50} />
      </div>
    );
  }

You now have full access to:

• Name
• Email
• Profile Image
• Provider
• JWT

Step 7: Add Logout

"use client";
  
  import { signOut } from "next-auth/react";
  
  export default function LogoutButton() {
    return (
      <button onClick={() => signOut()}>
        Logout
      </button>
    );
  }

Common Mistakes to Avoid

Here’s what catches most developers:

1. Wrong Redirect URI

Google is strict. The URI must match exactly—including protocol.

2. Missing NEXTAUTH_URL

If this is wrong, your callbacks will fail silently.

3. Not using HTTPS in production

Google rejects insecure redirect URLs in deployed environments.

4. Forgetting to configure the App Router

Make sure your routes follow app/api/auth/[...nextauth]/route.js .

Final Thoughts

Google OAuth is one of those features that feels complicated until you implement it once. With NextAuth in the mix, it becomes straightforward. You get a secure login flow, session handling, JWT support, and an easy way to scale your auth system as your app grows.

If you're building a production app, adding Google login is one of the fastest ways to create a great onboarding experience—and reduce your password headaches forever.