NextjsHow-ToBeginner · 4 min read

How to Set Up Google Login in Next.js Quickly

To set up Google login in Next.js, use the NextAuth.js library with the Google provider. Configure your Google OAuth credentials in the NextAuth options and add the authentication API route to your Next.js app.

📐

Syntax

Use NextAuth.js to handle authentication in Next.js. You create an API route at /api/auth/[...nextauth].js that configures providers like Google. The main parts are:

providers: List of OAuth providers (Google here).
clientId and clientSecret: Credentials from Google Cloud Console.
callbacks: Optional functions to control session and token behavior.

javascript

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub
      return session
    },
  },
})

💻

Example

This example shows a simple Next.js app with Google login using NextAuth.js. It includes the API route and a page with sign-in and sign-out buttons. When signed in, it displays the user's name and email.

javascript

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
})

// pages/index.js
import { useSession, signIn, signOut } from 'next-auth/react'

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

  if (session) {
    return (
      <div>
        <p>Signed in as {session.user.email}</p>
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    )
  }
  return (
    <div>
      <p>Not signed in</p>
      <button onClick={() => signIn('google')}>Sign in with Google</button>
    </div>
  )
}

Output

When running, the page shows a 'Sign in with Google' button if not signed in. After signing in, it shows 'Signed in as user@example.com' and a 'Sign out' button.

⚠️

Common Pitfalls

Not setting GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in environment variables causes authentication failure.
Forgetting to create OAuth credentials in Google Cloud Console or misconfiguring redirect URIs.
Using the wrong API route path; it must be /api/auth/[...nextauth].js.
Not wrapping your app with SessionProvider from next-auth/react can cause session hooks to fail.

javascript

/* Wrong environment variable usage example */
GoogleProvider({
  clientId: process.env.CLIENT_ID, // Wrong variable name
  clientSecret: process.env.CLIENT_SECRET, // Wrong variable name
})

/* Correct usage */
GoogleProvider({
  clientId: process.env.GOOGLE_CLIENT_ID,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
})

📊

Quick Reference

Remember these key steps:

Create Google OAuth credentials in Google Cloud Console.
Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in your environment.
Create /api/auth/[...nextauth].js with GoogleProvider.
Use useSession, signIn, and signOut from next-auth/react in your components.

✅

Key Takeaways

Use NextAuth.js with GoogleProvider for easy Google login in Next.js.

Always set Google OAuth credentials in environment variables correctly.

Create the API route at /api/auth/[...nextauth].js to handle authentication.

Wrap your app with SessionProvider to access session data in components.

Test redirect URIs in Google Cloud Console to avoid login errors.