authmedium2-3 hours

Google OAuth Authentication

Implement Google OAuth 2.0 sign-in with session management and user profile sync

googleoauthsocial-loginauthentication

Overview

Implement Google OAuth 2.0 authentication allowing users to sign in with their Google account. This blueprint covers the full flow from OAuth setup to session management.

Prerequisites

•Google Cloud Console account
•Application with user authentication need
•Database for storing user records

Steps

1. Set Up Google Cloud OAuth Credentials

•Go to Google Cloud Console
•Create a new project or select existing
•Navigate to APIs & Services > Credentials
•Click Create Credentials > OAuth client ID
•Configure consent screen if prompted
•Select Web application
•
Add authorized redirect URIs:
- •Development: http://localhost:3000/api/auth/callback/google
- •Production: https://yourdomain.com/api/auth/callback/google

2. Install Dependencies

npm install next-auth @auth/core

3. Configure Environment Variables

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

4. Create Auth Configuration

// src/lib/auth.ts
import NextAuth from "next-auth"
import Google from "next-auth/providers/google"

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      if (token.sub) {
        session.user.id = token.sub
      }
      return session
    },
  },
})

5. Create API Route Handler

// src/app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/lib/auth"
export const { GET, POST } = handlers

6. Add Sign In Button

// src/components/SignInButton.tsx
"use client"
import { signIn, signOut, useSession } from "next-auth/react"

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

  if (session) {
    return (
      <div>
        <p>Signed in as {session.user?.email}</p>
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    )
  }

  return <button onClick={() => signIn("google")}>Sign in with Google</button>
}

Variations

With Database User Sync

Add Prisma adapter to sync Google profile to your database:

import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/lib/prisma"

export const { handlers, signIn, signOut, auth } = NextAuth({
  adapter: PrismaAdapter(prisma),
  // ... rest of config
})

With Role-Based Access

Extend the session to include user roles:

callbacks: {
  async session({ session, user }) {
    session.user.role = user.role
    return session
  },
}

Testing Checklist

• OAuth consent screen configured correctly
• Redirect URIs match environment
• Sign in flow works
• User profile data captured
• Sign out clears session
• Protected routes redirect to sign in

Common Issues

Issue	Solution
Redirect URI mismatch	Check Google Console matches your callback URL exactly
NEXTAUTH_SECRET missing	Generate with `openssl rand -base64 32`
Session not persisting	Ensure NEXTAUTH_URL is set correctly

Want to contribute?

This blueprint is open source. Found an issue or want to improve it? Edit on GitHub