In the previous article, we configured NextAuth.js and created the authentication route. Our authentication endpoint is now ready, but users still don't have a way to sign in.

In this article, we'll integrate Google OAuth so users can authenticate with their Google account without creating a password.

By the end of this guide, you'll have a fully functional Google login system in your Next.js application.

What is OAuth?

OAuth is an open standard that allows users to sign in using an existing account from another platform such as Google, GitHub, Facebook, or Microsoft.

Instead of storing user passwords yourself, authentication is handled securely by the provider.

The authentication flow looks like this:

User
   │
   ▼
Click "Sign in with Google"
   │
   ▼
Google Login Screen
   │
   ▼
User Grants Permission
   │
   ▼
NextAuth Receives User Information
   │
   ▼
Session Created
   │
   ▼
User Logged In

This approach improves security and provides a better user experience.

Step 1 — Create a Google Cloud Project

Visit the Google Cloud Console.

Create a new project or select an existing one.

Once the project is ready:

• Enable the Google Identity API.

• Configure the OAuth Consent Screen.

• Add your application's information.

• Create OAuth 2.0 Client Credentials.

After creating the credentials, Google will provide:

Client ID
Client Secret

We'll use both in our Next.js application.

Step 2 — Configure Authorized Redirect URI

During OAuth Client creation, add the following redirect URI:

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

For production, replace the localhost URL with your own domain.

Example:

https://yourdomain.com/api/auth/callback/google

This callback URL allows Google to redirect users back to your application after authentication.

Step 3 — Install NextAuth

If you haven't already:

npm install next-auth

Step 4 — Add Environment Variables

Update your .env.local file.

NEXTAUTH_URL=http://localhost:3000

NEXTAUTH_SECRET=your-generated-secret

GOOGLE_CLIENT_ID=your-google-client-id

GOOGLE_CLIENT_SECRET=your-google-client-secret

Never expose these credentials publicly or commit them to version control.

Step 5 — Configure Google Provider

Open:

lib/auth.ts

Update the configuration.

import type { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
};

Now NextAuth knows how to communicate with Google's OAuth service.

Step 6 — Authentication Route

Your authentication route remains simple.

import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Step 7 — Create a Login Button

Create a client component.

"use client";

import { signIn } from "next-auth/react";

export default function LoginButton() {
  return (
    <button onClick={() => signIn("google")}>
      Sign in with Google
    </button>
  );
}

Calling signIn("google") redirects the user to Google's login page.

Step 8 — Create a Logout Button

"use client";

import { signOut } from "next-auth/react";

export default function LogoutButton() {
  return (
    <button onClick={() => signOut()}>
      Sign Out
    </button>
  );
}

Step 9 — Display Session Information

NextAuth provides the useSession() hook for client components.

"use client";

import { useSession } from "next-auth/react";

export default function Profile() {
  const { data: session } = useSession();

  if (!session) return <p>Not Signed In</p>;

  return (
    <>
      <p>{session.user?.name}</p>
      <p>{session.user?.email}</p>
    </>
  );
}

Whenever the user logs in successfully, the session contains the user's basic profile information.

How Does Google Login Work?

Behind the scenes, this entire process follows these steps:

1. User clicks the login button.

2. NextAuth redirects the user to Google.

3. Google authenticates the user.

4. Google redirects back to your callback URL.

5. NextAuth validates the response.

6. A session is created.

7. The user is considered authenticated.

The best part is that NextAuth handles almost all of this process automatically.

Common Mistakes

If Google login isn't working, check the following:

• Incorrect redirect URI.

• Missing GOOGLE_CLIENT_ID.

• Missing GOOGLE_CLIENT_SECRET.

• Missing NEXTAUTH_SECRET.

• Incorrect NEXTAUTH_URL.

• Forgetting to restart the development server after updating .env.local.

Most Google OAuth issues are caused by one of these configuration mistakes.

What's Next?

Google login works great for users who prefer social authentication, but many applications also require traditional email and password login.

In the next article, we'll implement Credentials Authentication using NextAuth.js, where users can log in with their own email and password. This will also prepare us for integrating a database and building a complete authentication system.

Note: In this series, we'll use the next-auth package (commonly known as NextAuth.js). Although the project has evolved under the Auth.js ecosystem, the concepts and implementation shown here remain widely used and applicable to modern Next.js applications.