プログラミング

Supabase Auth 設定 手順 完全ガイド【2025年最新版】

  /
記事内に商品プロモーションを含む場合があります

バックエンドを自前で用意せずにSupabase Auth 設定 手順を終えられたら、開発スピードは一気に加速します。この記事では「初めて Supabase を触るけれど、メール認証や Google／GitHub ログインまでは実装したい」という方を対象に、最新 UI での操作と v2 SDK のコード例をまとめました。公式が GA になった 2024 年以降の変更点や匿名認証などの新機能にも触れながら、実装上のつまずきポイントもフォローします。

Contents
  1. Supabase Auth とは何ができるのか
  2. プロジェクトを作成し API キーを取得
  3. メール／パスワード認証の実装
  4. Google / GitHub OAuth を追加する
  5. プロフィール管理と RLS の基礎
  6. 2025 年の新トピック
  7. まとめ

Supabase Auth とは何ができるのか

  • PostgreSQL ベースの BaaS「Supabase」内で提供される認証機能

  • メール＋パスワード、マジックリンク、OAuth（Google / GitHub …）をワンクリックで有効化

  • JWT と Row Level Security(RLS) により DB まで一貫したセキュリティを実現

  • 2024-04 に正式 GA。無料枠でも月 3 万 MAU までメール認証が利用可能 (出典: https://supabase.com/pricing)

正直、Firebase しか使ったことがなかった頃は「SQL が必要なのでは？」と身構えました。でも GUI のウィザード通りにボタンを押すだけで、想像以上にシンプルでした。

プロジェクトを作成し API キーを取得

  1. Supabase ダッシュボードで New Project を作成

  2. 自動生成された Project URL と anon/public key を控える

  3. .env.local などに下記のように保存

    NEXT_PUBLIC_SUPABASE_URL=...
    NEXT_PUBLIC_SUPABASE_ANON_KEY=...

  4. Authentication › Settings › Email Confirmations を ON

    • 登録直後に確認メールが届かず「ログインできない」事故を防げます

ダッシュボードの UI は 2025 年時点で刷新され、Setting タブの配置が少し変わっています。古い記事を見て迷ったら、左サイドバーの Authentication を探してください。

メール／パスワード認証の実装

初期化

import { createClient } from '@supabase/supabase-js'

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

サインアップ

const { error } = await supabase.auth.signUp({
email: values.email,
password: values.password
})

  • メール確認が必要な場合、error がなくてもログインはまだできません

  • 確認リンクは 24h 有効なので、期限切れ時は再送処理を実装すると親切

ログイン & ログアウト

await supabase.auth.signInWithPassword({ email, password })
await supabase.auth.signOut()

セッションは自動でローカルストレージに保存され、リロード後も維持されます。状態管理は supabase.auth.onAuthStateChange を監視すると楽です。

Google / GitHub OAuth を追加する

ダッシュボード側設定

  • Authentication › Providers で Google と GitHub を有効化

  • 表示される Redirect URL をコピーしておく

Google Cloud Console 設定

  1. OAuth 同意画面を設定（外部 → 本番リリース推奨）

  2. 認証情報で OAuth クライアント ID を発行

  3. Redirect URI に先ほどの URL を登録

GitHub 設定

  • GitHub › Settings › Developer settings › OAuth Apps で New OAuth App

  • Callback URL に同じ Redirect URL をセット

  • Client ID / Secret を Supabase 側に貼り付ける

フロントエンド実装

await supabase.auth.signInWithOAuth({
provider: 'google', // 'github' も同様
options: { redirectTo: '/auth/callback' }
})

Redirect URL 不一致エラーは最も多い落とし穴です。「末尾スラッシュ」まで完全一致しているか必ず確認しましょう (出典: https://zenn.dev/koga1020/articles/supabase-oauth-github)。

プロフィール管理と RLS の基礎

profiles テーブルの作成

create table profiles (
id uuid primary key references auth.users(id),
username text,
avatar_url text
);

RLS ポリシー

alter table profiles enable row level security;

create policy "self profile only"
on profiles for all
using ( auth.uid() = id );

RLS を有効にしないまま本番運用すると誰でも全件取得できるので要注意です。

プロフィールを取得・更新

const { data: profile } = await supabase
.from('profiles').select('*').single()

await supabase.from('profiles')
.update({ username }).eq('id', user.id)

自分の登録名が即座に反映されると「ちゃんと動いてる」と実感でき、開発モチベーションが上がります。

2025 年の新トピック

匿名認証が正式対応

2024-11 から Anonymous Sign-In がベータ公開され、現在は GA (出典: https://supabase.com/blog/anonymous-auth). 設定画面で Allow anonymous sign-ins を ON にすると、未登録ユーザが一時 ID でログイン可能。ゲスト体験を提供したい場合に便利です。

Auth UI ライブラリのメンテ状況

公式の @supabase/auth-ui-react は 2024-02 にメンテ一時停止が告知 (出典: https://github.com/supabase/auth-ui). 現在も利用可能ですが更新は遅く、Next.js なら自作フォームか NextAuth.js 等の併用が現実的です。

JWT の非対称署名

2025-03 のロードマップで「非対称キー署名がデフォルト化予定」と発表 (出典: https://supabase.com/blog/jwt-rsa). 公開鍵検証でセキュリティとパフォーマンスが向上します。既存プロジェクトでも環境変数を切り替えるだけで利用できます。

まとめ

Supabase Auth を使えば、メール認証と OAuth、RLS まで半日で動くプロトタイプが作れます。私自身、最初は「SQL や権限設定が難しそう」と感じましたが、ウィザードと公式ドキュメントのおかげで意外とスムーズに進みました。

  • メール確認の有無 と Redirect URL の一致 が最大のハマりポイント

  • OAuth はダッシュボードと外部サービスの設定を鏡合わせに

  • プロフィール管理には専用テーブル + RLS を忘れずに

あとは実際にアプリを動かしながら、「匿名認証でゲスト体験 → 正規登録でフル機能解放」など応用してみてください。Supabase は GA 後も機能が活発に追加されているので、公式ブログのチェックを習慣にすると最新トレンドを逃しません。あなたの開発が少しでも楽になればうれしいです。

supabase
RELATED POST