What Is OAuth? "Sign In with Google" Explained for AI Coders

What Is OAuth?

OAuth 2.0 (Open Authorization) is a protocol that lets a user grant a third-party application limited access to their account on another service — without sharing their password. It is the standard behind every "Sign in with Google/GitHub/Apple" button.

The key insight: the user never gives your app their Google password. They log in to Google directly. Google then tells your app: "yes, this user is who they say they are, and they have authorized your app to read their basic profile." Your app never sees the Google credentials.

The OAuth Flow (Step by Step)

OAuth in Next.js with NextAuth.js

NextAuth.js (now Auth.js) handles all 6 steps above. You configure it once:

// src/auth.ts (NextAuth v5 / Auth.js)
import NextAuth from 'next-auth'
import Google from 'next-auth/providers/google'
import GitHub from 'next-auth/providers/github'

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  // Optional: link OAuth identity to your DB user
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub
      return session
    },
  },
})

// .env.local
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-secret
GITHUB_ID=your-github-app-id
GITHUB_SECRET=your-github-secret
NEXTAUTH_SECRET=a-random-32-char-string  # openssl rand -base64 32
NEXTAUTH_URL=http://localhost:3000

// Sign in button in any component
import { signIn } from '@/auth'

export function SignInButton() {
  return (
    <form action={async () => { 'use server'; await signIn('google') }}>
      <button type="submit">Sign in with Google</button>
    </form>
  )
}

Getting OAuth Credentials

Google

1. Go to console.cloud.google.com
2. Create a project → APIs & Services → Credentials
3. Create OAuth 2.0 Client ID (Web application)
4. Add http://localhost:3000/api/auth/callback/google as an authorized redirect URI
5. Copy the Client ID and Client Secret to your .env.local

GitHub

1. Go to github.com/settings/developers
2. New OAuth App
3. Set Authorization callback URL to http://localhost:3000/api/auth/callback/github
4. Generate a client secret and copy both to .env.local

What AI Gets Wrong About OAuth

• Wrong callback URL: AI sometimes generates callback URLs that don't match what you register with the provider. The exact URL must match.
• Missing NEXTAUTH_URL in production: NextAuth needs this set to your production domain — AI often forgets to mention the production env var setup.
• Exposing Client Secret: The Client Secret must never appear in frontend code or be committed to Git. Only the Client ID is public-safe.
• Not linking to database users: AI sometimes sets up OAuth without storing the user in your database, so you cannot associate data with them across sessions.

What to Learn Next

• What Is Authentication? — OAuth in context with other auth approaches.
• What Is a JWT? — How NextAuth stores session data after OAuth completes.
• What Are Environment Variables? — Keeping OAuth credentials safe.

FAQ