🔐

SvelteでGooge SignInした後にエラーが発生した？

2024/12/28に公開

 💡TipsSupabaseを使用して、Google SignInを実装したのだが、ログイン後のページでエラーが発生する。
解決策は、supabaseClient.tsを以下のように設定する。
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
    auth: {
        autoRefreshToken: true,
        persistSession: true,
        detectSessionInUrl: true
    }
})
https://supabase.com/docs/reference/javascript/admin-api
このコードはSupabaseクライアントの初期化と設定を行っているコードです。一つずつ解説していきます：
createClient(supabaseUrl, supabaseAnonKey, {...}):
Supabaseクライアントを作成するための関数です
第1引数のsupabaseUrl: SupabaseプロジェクトのURL
第2引数のsupabaseAnonKey: 匿名認証用の公開キー

認証関連の設定オブジェクト:
{
    auth: {
        autoRefreshToken: true,    // アクセストークンの自動更新を有効化
        persistSession: true,      // セッション情報をローカルストレージに保存
        detectSessionInUrl: true   // URLからセッション情報を検出
    }
}
各設定の詳細：
autoRefreshToken: true: アクセストークンが期限切れになる前に自動的に更新します
persistSession: true: ユーザーのセッション情報をブラウザのローカルストレージに保存し、ページをリロードしても認証状態を維持します
detectSessionInUrl: true: OAuth認証後のコールバックURLからセッション情報を自動的に検出します

このクライアントインスタンスはsupabaseという定数にエクスポートされており、アプリケーションの他の部分からSupabaseの機能（認証、データベース操作など）にアクセスするために使用されます。
cursor editorを使用して機能を実装していた時に知った。

💡Tips

Discussion