How to add OAuth providers to NextAuth.js (GitHub, Google)

Adding OAuth Providers

OAuth lets users sign in with their existing accounts. NextAuth handles the entire flow. Add providers to the providers array in auth.ts:

import NextAuth from 'next-auth'
import GitHub from 'next-auth/providers/github'
import Google from 'next-auth/providers/google'

export const { auth, signIn, signOut, handlers } = NextAuth({
  providers: [
    GitHub,
    Google,
    // GitHub and Google read from AUTH_GITHUB_ID, AUTH_GITHUB_SECRET
    // AUTH_GOOGLE_ID, AUTH_GOOGLE_SECRET automatically
  ],
})

Setting Up GitHub OAuth

Go to GitHub → Settings → Developer settings → OAuth Apps → New. Set Homepage URL to http://localhost:3000 and Authorization callback URL to http://localhost:3000/api/auth/callback/github. Copy the Client ID and generate a Client Secret.

Sign In and Sign Out UI

// Server Component — use imported signIn/signOut actions
import { signIn, signOut } from '@/auth'

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

export function SignOutButton() {
  return (
    <form action={async () => {
      'use server'
      await signOut()
    }}>
      <button type="submit">Sign out</button>
    </form>
  )
}

Calling signIn() from a Server Action is the recommended pattern in v5. The provider name must match exactly (lowercase: 'github', 'google').