Next.jsとSupabaseを使ってWebアプリを開発している際に、supabase-auth-helpersという認証ヘルパーを使用してログイン認証を実装しようと考えました。
supabase-auth-helpersは、Supabaseを使用したアプリケーションで認証やアクセス制御を簡単に実装するためのライブラリですが、実装時にsignInWithPasswordでログインを実行してもuseUserでユーザー情報が取得できない問題が発生しました。
この記事では、その原因と解決策について説明します。
（ただの凡ミスですが誰か同じ現象に陥っている方がいるかもしれないので備忘録を残しておきます）
原因
問題の原因は、supabase-auth-helpers の useSupabaseClient で定義された supabaseClient を使わず、lib/supabase.ts で定義した supabase を直接使用していたためでした。
次のコードでは、lib/supabase.ts で定義された supabase をインポートし、signInWithPassword を実行しています。
import { supabase } from '@/lib/supabase';
const { data, error } = await supabase.auth.signInWithPassword({
email: form.email,
password: form.password,
});lib/supabase.ts には以下のような定義があります。
import { createClient } from '@supabase/supabase-js';
export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
);
この定義は、Supabase のクライアントを作成してエクスポートしています。process.env.NEXT_PUBLIC_SUPABASE_URL とprocess.env.NEXT_PUBLIC_SUPABASE_ANON_KEY は、Supabase のプロジェクト設定から取得した API エンドポイントと公開鍵です。これらの値を使って Supabase のクライアントを生成し、アプリケーション全体で使用できるようにしています。
ただ、この方法で生成された supabase クライアントは、supabase-auth-helpers と適切に連携できていないため、signInWithPassword でログインしてもsupabase-auth-helpersが用意している useUserメソッドを使用しても ユーザー情報が取得できません。
解決策
問題を解決するには、useSupabaseClient で定義された supabaseClient を使うように変更します。以下のコードでは、useSupabaseClient をインポートし、signInWithPassword を実行しています。
import { useSupabaseClient } from '@supabase/auth-helpers-react';
const supabaseClient = useSupabaseClient();
const { data, error } = await supabaseClient.auth.signInWithPassword({
email: form.email,
password: form.password,
});この変更により、signInWithPassword でログインした後に useUser でユーザー情報が正しく取得できるようになりました。
useSupabaseClient は、supabase-auth-helpersと連携して動作するため、signInWithPassword の実行後に useUser を使ってユーザー情報を取得できます。これにより、ログイン状態を正しく管理し、アプリケーションの認証機能が適切に動作するようになりました。
関連記事
