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

### Multiple GoTrueClient警告とは何か 「Multiple GoTrueClient instances detected in the same browser context.」というメッセージは、Supabaseを利用したアプリケーション開発において頻繁に遭遇する可能性のある警告です。このメッセージはエラーとしてアプリケーションの動作を停止させるものではありませんが、同一のブラウザコンテキスト内で複数のGoTrueClient（Supabaseクライアントインスタンス）が検出されたことを示しています[1](https://www.reddit.com/r/Nuxt/comments/15f5wzo/error_multiple_gotrueclient_instances_detected_in/), [9](https://velog.io/@manner9945/supabase-ERROR-Multiple-GoTrueClient-instances-detected-in-the-same-browser-context-%E3%82%A8%E3%83%A9%E3%83%BC)。この状態が続くと同じストレージキーの下でクライアントが同時に使用されると、予期せぬ未定義の動作を引き起こす可能性があるため、解決が推奨されています[3](https://www.reddit.com/r/Nuxt/comments/15f5wzo/error_multiple_gotrueclient_instances_detected_in/), [5](https://community.vercel.com/t/session-handling-in-v0-previews/6527), [7](https://github.com/supabase/supabase-js/issues/1394), [2](https://stackoverflow.com/questions/76773817/multiple-gotrueclient-instances-detected-in-the-same-browser-context)。 この警告は、特にNuxt.jsのようなモダンなJavaScriptフレームワークでSupabaseを利用している場合に多く報告されており[3](https://www.reddit.com/r/Nuxt/comments/15f5wzo/error_multiple_gotrueclient_instances_detected_in/), [4](https://github.com/nuxt-modules/supabase/issues/209), [6](https://www.reddit.com/r/Nuxt/comments/15f5wzo/error_multiple_gotrueclient_instances_detected_in/?tl=fil), [8](https://www.answeroverflow.com/m/1234144205790511184)、ユーザーが`useSupabaseUser`と`useSupabaseClient`のようなフックを同時に使用した際に発生した事例も報告されています[6](https://www.reddit.com/r/Nuxt/comments/15f5wzo/error_multiple_gotrueclient-instances-detected-in/?tl=fil)。これは、コンポーネントやレイアウトの異なる箇所で独立してSupabaseクライアントが初期化されている可能性を示唆しており、アプリケーションの規模が大きくなるにつれて発生しやすくなる傾向にあります。 #### 検出される状況と具体的な影響 この警告メッセージは、「"Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key."」という具体的な形で表示されます[1](https://www.reddit.com/r/Nuxt/comments/15f5wzo/error_multiple_gotrueclient_instances_detected_in/)。あるユーザーの報告では、Nuxt3とSupabaseの古いバージョンでは問題なく動作していたコードが、バージョンアップ後にこの警告が表示されるようになったとされており、`@nuxtjs/supabase`のバージョンアップに伴い、Supabaseクライアントのインスタンス管理に関する挙動に変更があった可能性が考えられます[1](https://www.reddit.com/r/Nuxt/comments/15f5wzo/error_multiple_gotrueclient_instances_detected_in/)。このユーザーが使用していたコードでは、`<script setup>`内で`useSupabaseClient()`フックを直接使用していました[1](https://www.reddit.com/r/Nuxt/comments/15f5wzo/error_multiple_gotrueclient_instances_detected_in/)。 具体的な影響としては、Vercelのv0プレビュー環境で、Supabaseを利用したマルチテナントSaaSプラットフォーム開発において、ログイン後にセッションが作成された直後に削除され、ログインページにリダイレクトされてしまう問題が報告されています[5](https://community.vercel.com/t/session-handling-in-v0-previews/6527), [20](https://community.vercel.com/t/session-handling-in-v0-previews/6527)。この問題は、同じコードでも本番環境では発生しないことから、プレビュー環境と本番環境でのセッション管理の挙動に違いがある可能性を示唆しています[5](https://community.vercel.com/t/session-handling-in-v0-previews/6527)。これは、複数のGoTrueClientインスタンスがセッション管理の整合性を損ない、予期せぬセッションの破棄につながっている可能性が考えられます。 #### Supabaseクライアントの統合と推奨されるライブラリ Supabaseは、特にNext.jsのようなサーバーサイドレンダリング（SSR）やサーバーコンポーネントを扱うフレームワークでの利用において、クライアントのインスタンス管理を最適化するために`@supabase/ssr`というライブラリを推奨しています[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。このライブラリは現在ベータ版ですが、SupabaseクライアントをCookieを使用するように自動的に構成し、ユーザーセッションがNext.jsのスタック全体（クライアント、サーバー、App Router、Pages Router）でシームレスに利用可能になるよう簡素化します[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [4](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [11](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。 以前の`@supabase/auth-helpers-nextjs`では、クライアントの用途に応じて5つの異なるクライアント（`createClientComponentClient`, `createServerComponentClient`, `createServerActionClient`, `createRouteHandlerClient`, `createMiddlewareClient`）が提供されていました[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [4](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。しかし、`@supabase/ssr`では、以下の2つのクライアントに集約され、より見通しが良くなっています[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [4](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [6](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。 | 以前のクライアント (`@supabase/auth-helpers-nextjs`) | 現在のクライアント (`@supabase/ssr`) | 用途 | |---|---|---| | `createClientComponentClient` | `createBrowserClient` | クライアントコンポーネント用 | | `createServerComponentClient` | `createServerClient` | サーバーコンポーネント、サーバーアクション、ルートハンドラー、ミドルウェア用 | | `createServerActionClient` | `createServerClient` | サーバーコンポーネント、サーバーアクション、ルートハンドラー、ミドルウェア用 | | `createRouteHandlerClient` | `createServerClient` | サーバーコンポーネント、サーバーアクション、ルートハンドラー、ミドルウェア用 | | `createMiddlewareClient` | `createServerClient` | サーバーコンポーネント、サーバーアクション、ルートハンドラー、ミドルウェア用 | この集約は、開発者がSupabaseクライアントを扱う際の複雑さを軽減し、複数のインスタンスが意図せず生成されるリスクを低減することを目的としていると考えられます。特に、Next.jsのようなハイブリッドレンダリング環境では、クライアントサイドとサーバーサイドの両方でセッション管理を適切に行う必要があり、`@supabase/ssr`はこれを効率的に実現するための重要なツールとなります。 #### セッション管理とセキュリティの観点からの考察 Supabase Authで認証が行われると、主にJWT形式のアクセストークンとリフレッシュトークンが発行されます[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [6](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。アクセストークンは有効期間が短く設計されており、`header`、`payload`、`署名`の3つの部分で構成されます[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [6](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。一方、リフレッシュトークンは期限切れになることはなく、一度しか使用できませんが、これを用いて新しいアクセストークンとリフレッシュトークンのペアを取得することが可能です[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [6](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。これらのトークンはブラウザ側のCookieに保存され、Supabaseクライアントは、このCookieと`anon_key`を組み合わせてSupabase APIにアクセスするように構成されています[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [5](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [7](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [12](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。 「Multiple GoTrueClient instances detected...」警告がセッションの未定義動作につながる可能性があるのは、複数のクライアントがそれぞれのストレージキーの下で独立してトークンを管理しようとするためだと考えられます。これにより、セッション情報の読み書きに競合が発生し、一方のクライアントが更新したセッションを他方のクライアントが認識せず、古いセッション情報に基づいてリクエストを送信したり、セッションが誤って破棄されたりする可能性が生じます。 Supabase Authは、認可コードフローとしてOAuth 2.0の拡張仕様であるPKCE（Proof Key for Code Exchange）を推奨しており、`signInWithOtp`、`signInWithOAuth`、`signUp`、`resetPasswordForEmail`などのメソッドでサポートされています[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [13](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [15](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [19](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。PKCEは、認可コードが横取りされた場合でも安全性を保つための重要な仕組みであり[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [14](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [16](https://zenn.dev/kutakutat/scraps/17884d66a25c02)、複数のGoTrueClientインスタンスがセッション管理に混乱をもたらすことは、PKCEのようなセキュリティ強化策の効果を損なうリスクもはらんでいます。 #### 対策と実践的な洞察 この警告に対処するための最も効果的な方法は、アプリケーション全体でSupabaseクライアントのインスタンスをシングルトンパターンで管理し、複数のインスタンスが生成されないようにすることです。特にNext.jsやNuxt.jsのようなフレームワークを使用している場合、公式が推奨する`@supabase/ssr`のようなヘルパーライブラリを活用し、クライアントの初期化を一元化することが重要です[18](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。 例えば、Next.jsのApp RouterでSupabaseを使用する場合、以下のような構造でクライアントを生成することが推奨されています[8](https://zenn.dev/kutakutat/scraps/17884d66a25c02), [10](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。 ```javascript // 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! ) ``` このように、用途に応じて単一のエントリポイントからクライアントを生成することで、複数のGoTrueClientインスタンスが意図せず作成されるのを防ぐことができます。また、Middlewareを利用してサーバーコンポーネントが読み込まれる前にトークンのリフレッシュを行うことも、セッション管理の安定化に寄与します[13](https://zenn.dev/kutakutat/scraps/17884d66a25c02)。 もしAIコーディングアプリ「Lovable」のユーザーのように[16](https://www.reddit.com/r/lovable/comments/1jcuton/getting_so_frustrated_with_lovable/?tl=ja)、この警告に起因する認証問題に直面している場合、まず上記の推奨されるクライアント作成方法を適用し、Supabaseの公式ドキュメント[18](https://supabase.com/docs/guides/auth/server-side/creating-a-client?environment=client-component)を参照して最新のベストプラクティスに従うことが重要です。特に、古いバージョンのライブラリを使用している場合は、最新の`@supabase/ssr`への移行を検討することで、インスタンス管理の改善とそれに伴う問題の解決が期待できます。