Multiple GoTrueClient警告の原因と対策：Supabase認証の最新知見

Multiple GoTrueClient警告とは何か

useSupabaseUser

useSupabaseClient

検出される状況と具体的な影響

@nuxtjs/supabase

<script setup>

useSupabaseClient()

Supabaseクライアントの統合と推奨されるライブラリ

@supabase/ssr

@supabase/auth-helpers-nextjs

createClientComponentClient

createServerComponentClient

createServerActionClient

createRouteHandlerClient

createMiddlewareClient

@supabase/ssr

@supabase/auth-helpers-nextjs

@supabase/ssr

createClientComponentClient

createBrowserClient

createServerComponentClient

createServerClient

createServerActionClient

createServerClient

createRouteHandlerClient

createServerClient

createMiddlewareClient

createServerClient

@supabase/ssr

セッション管理とセキュリティの観点からの考察

header

payload

署名

anon_key

signInWithOtp

signInWithOAuth

signUp

resetPasswordForEmail

対策と実践的な洞察

@supabase/ssr

// Server Component用
import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'

export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options })
          } catch (error) {
            // The `set` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: '', ...options })
          } catch (error) {
            // The `delete` method was called from a Server Component.
          }
        },
      },
    }
  )
}

// Client Component用
import { createBrowserClient } from '@supabase/ssr'

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

@supabase/ssr

Multiple GoTrueClient警告の原因と対策：Supabase認証の最新知見

警告が発生する具体的な状況と影響

1. 開発環境と本番環境の挙動の差異

2. Nuxt.js環境でのGoTrueClientの初期化

useSupabaseClient()

@supabase/ssr

createBrowserClient

createServerClient

@supabase/ssr

3. AIコーディングアプリにおける認証問題

警告がもたらす潜在的な影響

• 未定義の動作（Undefined Behavior）: 最も直接的な影響は、同じストレージキーで複数のGoTrueClientインスタンスが同時に使用された場合に発生する可能性のある未定義の動作です
  vercel.com
  ,
  reddit.com
  . これは予測不能な挙動を引き起こし、デバッグを困難にするだけでなく、ユーザーのセッションが予期せず失われたり、認証状態が不安定になったりする原因となり得ます。Vercelのプレビュー環境でのセッションの即時削除とリダイレクトは、この未定義の動作の一例と考えられます
  vercel.com
  .
• 認証の不安定性: 複数のクライアントインスタンスが同時にセッションを管理しようとすると、Cookieやローカルストレージに保存されているJWTアクセストークンやリフレッシュトークン
  zenn.dev
  の整合性が失われる可能性があります。Supabase AuthはGoTrueを基盤としており19, 18, JWT形式のアクセストークンとリフレッシュトークンを発行し、これらをブラウザのCookieに保存しています
  zenn.dev
  ,
  zenn.dev
  . 認証サーバーの障害がアプリケーション全体に影響を与える可能性があることを考えると
  reddit.com
  ,
  zenn.dev
  , クライアント側での認証状態の不安定性は、UXの低下やセキュリティリスクに直結します。
• 開発・デバッグの困難さ: 警告自体はエラーではないものの、それが未定義の動作に繋がるため、開発者はその原因特定と解決に多くの時間を費やすことになります。特に、本番環境とプレビュー環境で挙動が異なる場合、問題の再現やデバッグがさらに複雑になります
  vercel.com
  .

対策と推奨事項

1. クライアントインスタンスの一元化: GoTrueClientインスタンスは、アプリケーション内でシングルトンパターンを用いて一つだけ存在するように徹底すべきです。Next.jsなどのフレームワークを使用している場合は、

   @supabase/ssr

   の

   createBrowserClient

   や

   createServerClient

   といった推奨されるクライアント作成関数を使用して、適切なコンポーネントまたはファイルで一度だけインスタンスを生成し、それをアプリケーション全体で共有するように構造化します

   zenn.dev

   ,

   zenn.dev

   , 10.

   // createClient.js (例: クライアントコンポーネント用)
   import { createBrowserClient } from '@supabase/ssr'
   export const createClient = () =>
     createBrowserClient(
       process.env.NEXT_PUBLIC_SUPABASE_URL!,
       process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
     )
   

   この

   createClient

   関数を、Supabaseクライアントが必要な場所で呼び出すことで、毎回新しいインスタンスが生成されるのを防ぐことができます。
2. サーバーサイドレンダリング（SSR）環境でのCookie管理の理解: Supabase Authは、認証にJWT（JSON Web Token）とリフレッシュトークンを使用し、これらをCookieに保存します

   zenn.dev

   , 7. 特にNext.jsのようなSSR環境では、サーバーとクライアントの両方でセッションが利用可能であることが重要であり、

   @supabase/ssr

   パッケージがこのCookieベースのセッション管理を自動的に構成してくれます

   zenn.dev

   , 13. ミドルウェアを使ってサーバーコンポーネントが読み込まれる前にトークンをリフレッシュするような実装は、セッション管理を堅牢にする上で有効です14.
3. 開発環境の設定確認: Vercelのプレビュー環境と本番環境での挙動の違いは、環境変数、セキュリティ設定（例：Cookieの

   Secure

   属性1, 5）、またはVercelが内部的にセッションを処理する方法の違いに起因する可能性があります。開発中は

   Secure

   属性を

   false

   に設定し、本番環境では

   true

   にすることが推奨されます5. 環境ごとの挙動を比較し、Vercelコミュニティの議論

   vercel.com

   などを参考にしながら、適切な設定を行うことが重要です。
4. Supabase Authのフローの理解: Supabase Authは、OAuth2.0の拡張仕様であるPKCE（Proof Key for Code Exchange）を含む認可コードフローを推奨しています14, 16.

   signInWithOtp

   、

   signInWithOAuth

   、

   signUp

   、

   resetPasswordForEmail

   などのメソッドでPKCEがサポートされており18,

   signUp

   関数内でも

   flowType === 'pkce'

   でPKCEフローの処理が追加されています19. これらの認証フローを正しく理解し、アプリケーションに適切に組み込むことで、セッションの安定性とセキュリティを確保できます。

推奨されるSupabaseクライアントの設計と管理方法

useSupabaseClient()

@supabase/auth-helpers-nextjs

@supabase/ssr

• createBrowserClient

  : クライアントコンポーネント用

• createServerClient

  : サーバーコンポーネント、サーバーアクション、ルートハンドラー、ミドルウェア用

@supabase/ssr

推奨されるクライアントの設計と管理戦略

1.

@supabase/ssr

の採用とクライアントの一元化

@supabase/ssr

// クライアントコンポーネント用
import { createBrowserClient } from '@supabase/ssr'
export const createClient = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )

// サーバーコンポーネント、サーバーアクション、ルートハンドラー、ミドルウェア用
import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'
export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options })
          } catch (error) {
            // The `set` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: '', ...options })
          } catch (error) {
            // The `delete` method was called from a Server Component.
          }
        },
      },
    }
  )
}

createClient

2. ミドルウェアを活用したセッション管理

import { type NextRequest } from 'next/server'
import { createClient } from '@/utils/supabase/middleware'

export async function middleware(request: NextRequest) {
  const { supabase, response } = createClient(request)
  // Refresh session if expired - required for Server Components
  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware
  await supabase.auth.getSession()
  return response
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * Feel free to modify this pattern to include more paths.
     */
    '/((?!_next/static|_next/image|favicon.ico).*)',
  ],
}

3. Cookieのセキュリティ設定の最適化

httpOnly

false

httpOnly

true

Secure

true

const DEFAULT_COOKIE_OPTIONS = {
  path: "/",
  sameSite: "lax",
  httpOnly: false,
  maxAge: 60 * 60 * 24 * 365 * 1e3
};

// クライアント初期化時のSecure設定例
{
  secure: process.env.NODE_ENV === 'production',
  // ...その他のオプション
}

4. PKCEフローの理解と活用

signInWithOtp

signInWithOAuth

signUp

resetPasswordForEmail

code_verifier

code_challenge

auth

flow_states

まとめ

@supabase/ssr

Vercelプレビュー環境でのセッション問題事例

Multiple GoTrueClient instances detected in the same browser context.

Multiple GoTrueClient instances detected...

path: "/"

sameSite: "lax"

httpOnly: false

maxAge: 60 * 60 * 24 * 365 * 1e3

@supabase/ssr

createBrowserClient

createServerClient

• 異なるクライアントの初期化: Next.jsのApp Routerを使用している場合、クライアントコンポーネント用には

  createBrowserClient

  、サーバーコンポーネントやAPIルート用には

  createServerClient

  を適切に使い分ける必要があります
  zenn.dev
  。これらのクライアントが、意図せず同じブラウザコンテキスト（例えば、ブラウザタブ内）で複数回初期化されている可能性があります。
• サーバーサイドレンダリング (SSR) とクライアントサイドレンダリング (CSR) の境界: Vercelのプレビュー環境では、ビルドプロセスやランタイム環境が本番と微妙に異なることがあり、SSRとCSRの切り替わり時にGoTrueClientのインスタンスが重複して作成されてしまう、あるいはセッションCookieのハンドリングに差異が生じる可能性が考えられます。特に、Next.jsのMiddlewareでセッションをリフレッシュするような実装をしている場合
  zenn.dev
  、その処理がプレビュー環境の特殊な挙動と衝突することも考えられます。
• キャッシュや最適化: Vercelがプレビュー環境で行う特定の最適化やキャッシュ戦略が、Supabaseのセッション管理メカニズムと予期せぬ相互作用を起こしている可能性も排除できません。

@supabase/ssr

Secure

process.env.NODE_ENV === 'production'

認証トークン管理とセキュリティのポイント

useSupabaseUser

useSupabaseClient

認証トークンとその管理の重要性

• アクセストークン: 有効期間が短く設計されており、

  header

  、

  payload

  、

  署名

  の3つの部分で構成されます
  zenn.dev
  。この設計は、トークンが不正に取得された場合のリスクを最小限に抑えるためのセキュリティ上の配慮です。例えば、PayloadにはユーザーIDやメールアドレス、役割などの情報が格納されることがあります
  zenn.dev
  。
• リフレッシュトークン: 期限切れになることはなく、一度しか使用できません。これを利用して新しいアクセストークンとリフレッシュトークンのペアを取得し、セッションを継続することができます
  zenn.dev
  ,
  zenn.dev
  。

anon_key

統合されたクライアントの利用とセキュリティ対策

@supabase/ssr

@supabase/auth-helpers-nextjs

@supabase/ssr

@supabase/auth-helpers-nextjs

@supabase/ssr

createClientComponentClient

createBrowserClient

createServerComponentClient

createServerClient

createServerActionClient

createServerClient

createRouteHandlerClient

createServerClient

createMiddlewareClient

createServerClient

セキュリティプロトコルとセッションの堅牢性

signInWithOtp

signInWithOAuth

signUp

resetPasswordForEmail

code_verifier

code_challenge

code_verifier

code_challenge

code_verifier

Vercelプレビュー環境と認証の課題

/login

@supabase/ssr

Secure