Google OAuth

วิธีเพิ่ม Google OAuth provider — สร้าง credentials, เพิ่ม provider, sign-in flow

Google OAuth Setup Guide

ขั้นตอนการเพิ่ม Google OAuth provider — สร้าง credentials, config, sign-in button

1. สร้าง Google OAuth Credentials

ไปที่ Google Cloud Console → APIs & Services → Credentials

# ขั้นตอน:
# 1. ไปที่ https://console.cloud.google.com/apis/credentials
# 2. Create Credentials → OAuth client ID
# 3. Application type: Web application
# 4. Authorized redirect URIs:
#    - http://localhost:3000/api/auth/callback/google (dev)
#    - https://yourdomain.com/api/auth/callback/google (prod)
# 5. Copy Client ID และ Client Secret

2. Environment Variables

เพิ่ม Google OAuth credentials ใน .env

# .env
AUTH_GOOGLE_ID="your-google-client-id.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET="your-google-client-secret"

3. เพิ่ม Google Provider

เพิ่ม Google provider ใน auth config — Auth.js จัดการ OAuth flow ให้อัตโนมัติ

import Google from 'next-auth/providers/google';

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    Google,
    Credentials({ ... }),
  ],
  // ... callbacks
});

4. Sign In Button

สร้างปุ่ม Sign in with Google — ใช้ Server Action หรือ Client signIn()

// Server Action
import { signIn } from '@/lib/auth/auth';

export async function signInWithGoogle() {
  'use server';
  await signIn('google', { redirectTo: '/features/next-auth' });
}

// Client Component
import { signIn } from 'next-auth/react';

<Button onClick={() => signIn('google', { redirectTo: '/features/next-auth' })}>
  Sign in with Google
</Button>

Auth Demo

Guest