supabase-js v2で実装するSupabase認証
Supabase認証ガイド
Supabase認証：メール、マジックリンク、OAuth、RLS | We.Inc
メールとパスワード、マジックリンク、OAuthによるログイン、セッションの監視、ログアウトを実装する動くsupabase-js v2のコードと、auth.uid()を使う行レベルセキュリティのポリシーを紹介します。
Supabase Authは、メールとパスワード、使い捨てのマジックリンク、電話のコード、GitHubなどのOAuthプロバイダーでユーザーをログインさせます。すべてsupabase-jsのsupabase.authオブジェクトを通じて行います。ログインするたびにセッションが作られ、そのトークンがデータベースに届き、行レベルセキュリティのポリシーがauth.uid()とuser_id列を比べて、その人が何を読めるかを決めます。
ログイン方法とそれぞれの呼び出し
- 方法
- supabase-js v2の呼び出し
- 向いている用途
- メールとパスワード
- auth.signUp / auth.signInWithPassword
- 昔ながらのアカウント
- マジックリンク
- auth.signInWithOtp({ email })
- 忘れるパスワードがない
- SMSまたはWhatsAppのコード
- auth.signInWithOtp({ phone })
- モバイル中心のプロダクト
- OAuthプロバイダー
- auth.signInWithOAuth({ provider })
- 既存のアカウントでワンクリックログイン
- ログアウト
- auth.signOut()
- セッションを終了する
認証は、Supabaseのプロジェクトで最も間違って組み込まれやすい部分です。ログインは動くのにデータが丸見えだったり、サーバーが信頼すべきでないクッキーを信頼していたりします。下で方法を選んでコードを取得し、続けてポリシーのセクションに従って、各ユーザーが自分の行だけを見られるようにしましょう。
- コードピッカーでログイン方法を選び、スニペットをアプリにコピーします。
- Supabaseのダッシュボードで対応するプロバイダーを有効にし、サイトのアドレスを許可されたリダイレクトURLに追加します。
- 誰かがログインやログアウトしたときに画面が更新されるよう、認証イベントを監視します。
- 個人データを持つすべてのテーブルで行レベルセキュリティを有効にし、auth.uid()を使うポリシーを追加します。
- メール確認を有効にしている場合、signUpはユーザーを返しますが、リンクがクリックされるまでセッションはnullです。ダッシュボードではなく、受信箱を確認するよう促すメッセージを表示しましょう。
- ポリシー内では関数を(select auth.uid())のように囲みましょう。そうするとPostgresは行ごとではなく、文ごとに1回だけ評価できます。
- ログインしていないリクエストではauth.uid()はnullになるため、それをuser_idと比べるポリシーは、匿名の訪問者には何も一致しません。
- サーバーでは、クッキーから読み取ったgetSession()を信頼しないでください。getUser()かgetClaims()を呼んで、誰がリクエストしているかを検証しましょう。
- 公開可能な（anon）キーはポリシーによって制限されるため、ブラウザーに置いても安全です。シークレットキーやservice roleキーは行レベルセキュリティを迂回するので、必ずサーバーに置いてください。
よくある質問
Supabaseのマジックリンクはワンタイムパスワードと同じですか？
どちらもsignInWithOtpから始まります。メールの場合、テンプレートが確認用URLを使えばメッセージにリンクが、トークンを使えばコードが入ります。電話でのログインはSMSかWhatsAppによるコードのみに対応しています。
GoogleやGitHubでのログインを追加するには？
そのプロバイダーから取得したクライアントIDとシークレットを使ってダッシュボードでプロバイダーを有効にし、プロバイダー名と任意のredirectToアドレスを指定してsignInWithOAuthを呼びます。ユーザーはログイン済みの状態であなたのサイトに戻ってきます。
ユーザーがログインやログアウトしたことを知るには？
onAuthStateChangeを登録します。INITIAL_SESSION、SIGNED_IN、SIGNED_OUT、TOKEN_REFRESHED、USER_UPDATED、PASSWORD_RECOVERYなどのイベントを通知し、コンポーネントのアンマウント時に解除するためのサブスクリプションを返します。
RLSを有効にしたら、ログイン中のユーザーに何も表示されなくなったのはなぜですか？
行レベルセキュリティを有効にすると、ポリシーで許可するまでテーブルはすべてを拒否します。authenticatedロール向けに、(select auth.uid())を所有者の列と比べるselectポリシーを追加しましょう。
Supabase AuthとFirebase Auth、どちらを使うべきですか？
どちらも一般的な方法はカバーしています。より大きな違いはその下にあるデータベースで、当サイトのSupabaseとFirebaseの比較記事でその選び方を詳しく説明しています。
セッションとトークン
- ログイン後、supabase-jsは有効期間の短いアクセストークンとリフレッシュトークンを保存し、アクセストークンを自動で更新します。同じクライアントで実行するすべてのクエリがアクセストークンを送るので、Postgresはそれによってユーザーのidを知ります。
- サーバーレンダリングのアプリでは、セッションは代わりにクッキーに保存されます。その組み込み方は当サイトのNext.js認証ガイドで扱っているので、このページではクライアントライブラリとデータベースのルールに絞って説明します。
本当の鍵は行レベルセキュリティ
- 画面上のボタンを隠してもデータは守れません。誰でも公開キーを使ってAPIを呼び出せるからです。ポリシーはすべてのリクエストに対してPostgresの中で実行されるため、所有権を強制する場所になります。
- 操作ごとに1つのポリシーを書きましょう。selectポリシーはusingを使い、insertには他人が所有する行を作れないようwith checkが必要で、updateには通常その両方が必要です。
auth.uid()を使うポリシー
各ユーザーは自分のメモだけを読み書きできる
SQLエディターで実行します。デフォルト値でトークンからuser_idが入り、with checkによって他のユーザーの行を挿入できなくなります。
メールとパスワード
アカウントを作成してからログインします。確認が有効な場合、メールのリンクがクリックされるまでdata.sessionはnullです。
マジックリンク
メールを送信し、そのリンクでユーザーがログインしてリダイレクト先のアドレスに移動します。
OAuth（GitHub）
プロバイダーにリダイレクトして戻ってきます。先にダッシュボードでプロバイダーを有効にし、キーを設定してください。
セッションの監視とログアウト
画面をセッションの状態に合わせ、使い終わったらリスナーを後片付けします。
ログイン方法ごとのコード
ログイン方法を選ぶ
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る