Supabaseでログイン機能を実装

Supabase Authで簡単に認証機能を実装できます。

Supabase Authの特徴

• メール/パスワード認証
• OAuth（Google, GitHub等）
• マジックリンク
• Row Level Security連携

セットアップ

1. Supabaseプロジェクト作成

1. supabase.comでプロジェクト作成
2. Project URLとAnon Keyをコピー

2. Next.jsにインストール

npm install @supabase/supabase-js @supabase/ssr

3. 環境変数設定

NEXT_PUBLIC_SUPABASE_URL=your-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-key

基本実装

Supabaseクライアント

// lib/supabase.ts
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

サインアップ

const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password123'
})

ログイン

const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password123'
})

ログアウト

await supabase.auth.signOut()

OAuth（Google）

1. Google Cloud Console設定

1. OAuth同意画面を設定
2. 認証情報を作成
3. リダイレクトURIを設定

2. Supabaseに登録

1. Authentication → Providers
2. Googleを有効化
3. Client ID/Secretを入力

3. 実装

await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: `${window.location.origin}/auth/callback`
  }
})

セッション管理

// ユーザー取得
const { data: { user } } = await supabase.auth.getUser()

// セッション監視
supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_IN') {
    // ログイン時の処理
  }
})

認証ガード

// middleware.ts
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'

export async function middleware(req) {
  const res = NextResponse.next()
  const supabase = createMiddlewareClient({ req, res })
  const { data: { session } } = await supabase.auth.getSession()

  if (!session && req.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', req.url))
  }

  return res
}

次のステップ

• Googleログインの実装方法
• Supabaseでデータベースを使う