認証ライブラリ

Supabase Auth Helpers

概要

Supabase Auth Helpersは、Supabase AuthenticationをNext.js、React、SvelteKit等の様々なWebフレームワークと統合するためのヘルパーライブラリ群です。サーバーサイドレンダリング（SSR）環境でのユーザーセッション管理、クッキーベース認証、および認証フローの簡素化を提供します。

詳細

Supabase Auth Helpersは、クライアントサイドとサーバーサイドの両方でSupabase認証を使用するための統一された方法を提供します。主要な機能には、認証状態の管理、セッショントークンの自動更新、フレームワーク固有の最適化が含まれます。

主要なコンポーネント

• createBrowserClient: ブラウザ環境でのSupabaseクライアント作成
• createServerClient: サーバー環境でのSupabaseクライアント作成（SSR対応）
• SessionManagerLayer: セッション管理レイヤー
• onAuthStateChange: 認証状態変更の監視

フレームワーク固有の実装

• Next.js: @supabase/ssrパッケージを使用してクッキーベースセッション管理
• React: @supabase/auth-ui-reactでUIコンポーネント提供
• SvelteKit: サーバーサイドとクライアントサイド両方でセッション管理

セキュリティ機能

• クッキーベースの安全な認証
• JWTトークンの自動更新
• セッション固定攻撃からの保護
• CSRF攻撃対策

メリット・デメリット

メリット

• フレームワーク特化: 各フレームワークに最適化された実装
• SSR対応: サーバーサイドレンダリングでの認証サポート
• 簡単な統合: 複雑な認証ロジックを抽象化
• セキュリティ: 安全なクッキーベース認証
• 自動更新: トークンの自動更新機能
• TypeScript対応: 型安全性の保証

デメリット

• 非推奨: 現在は@supabase/ssrパッケージが推奨
• フレームワーク依存: 特定フレームワークに限定
• 複雑性: 初期設定が複雑な場合がある
• バージョン管理: 各フレームワーク用パッケージの管理が必要

参考ページ

• Supabase Auth Helpers GitHub - 公式リポジトリ（非推奨）
• Supabase SSR Documentation - 新しい推奨実装
• Supabase Auth Documentation - 認証ドキュメント

書き方の例

Next.js セットアップ（従来版）

// utils/supabase/client.js
import { createBrowserClient } from '@supabase/ssr'

export const createClient = () => 
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
  )

サーバーサイドクライアント（Next.js）

// utils/supabase/server.js
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export const createClient = () => {
  const cookieStore = cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    {
      cookies: {
        get(name) {
          return cookieStore.get(name)?.value
        },
        set(name, value, options) {
          cookieStore.set({ name, value, ...options })
        },
        remove(name, options) {
          cookieStore.set({ name, value: '', ...options })
        },
      },
    }
  )
}

React認証UI

// React with Auth UI
import { Auth } from '@supabase/auth-ui-react'
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.REACT_APP_SUPABASE_URL,
  process.env.REACT_APP_SUPABASE_ANON_KEY
)

function AuthForm() {
  return (
    <Auth
      supabaseClient={supabase}
      appearance={{ theme: 'dark' }}
      providers={['google', 'github']}
    />
  )
}

セッション管理

// セッション監視
import { useEffect } from 'react'

useEffect(() => {
  const { data: { subscription } } = supabase.auth.onAuthStateChange(
    (event, session) => {
      if (event === 'SIGNED_IN') {
        // ログイン処理
        console.log('User signed in:', session.user)
      } else if (event === 'SIGNED_OUT') {
        // ログアウト処理
        console.log('User signed out')
      }
    }
  )

  return () => subscription.unsubscribe()
}, [])

認証チェック

// 認証状態の確認
const checkAuth = async () => {
  const { data: { user } } = await supabase.auth.getUser()
  
  if (user) {
    console.log('User is authenticated:', user.email)
  } else {
    console.log('User is not authenticated')
  }
}

ログアウト機能

// ログアウト
const handleLogout = async () => {
  const { error } = await supabase.auth.signOut()
  if (error) {
    console.error('Error logging out:', error)
  } else {
    console.log('Successfully logged out')
  }
}