こんにちは!
前回は「Supabaseの基礎」について学習記録としてまとめました。
今回はその続きとして、ユーザー認証機能(ログイン) を試してみたことを書いていきます。
Webアプリを作るうえで欠かせないのが「ユーザー管理」。
会員制サイトや予約システム、ちょっとした掲示板でも「誰がログインしているか」を判定する必要があります。
そこで大活躍するのが、Supabaseの Auth(認証機能) です。
Supabase Auth の基本
Supabaseには最初から「ユーザー認証」が組み込まれています。
代表的な特徴はこんな感じです👇
- メール+パスワード 認証がすぐに使える
- OAuth認証(Google, GitHub など) を数クリックで追加できる
- 認証済みユーザーは Supabase の管理画面から確認できる
つまり「会員登録 → ログイン」までの仕組みがほぼ完成済みで、開発者はそれを呼び出すだけで使えるんです。
実際に試した流れ
僕が試した流れはシンプルで、以下のステップでした。
- Supabaseで新しいプロジェクトを作成
- ダッシュボードから Authentication → 設定を有効化
.env.local
に Supabase の URL と APIキーを設定- フロントエンド(Next.js)から
signUp
とsignIn
を呼び出す
コード例はこんな感じ👇(簡略版です)
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)
// 新規ユーザー登録
const { data, error } = await supabase.auth.signUp({
email: 'test@example.com',
password: 'password123'
})
// ログイン
const { data, error } = await supabase.auth.signInWithPassword({
email: 'test@example.com',
password: 'password123'
})
ほんの数行で「ユーザー登録」と「ログイン」が動くのは、正直すごいです。
まとめ
SupabaseのAuthを触ってみて感じたのは、導入の手軽さ。
Firebaseに比べても日本語の情報が増えていて、学習しやすい印象でした。
- ユーザー管理をゼロから作らなくていい
- メール認証やOAuthもすぐに追加できる
- 管理画面でユーザーの動きが見えるのが便利
「とりあえず会員制サイトを作ってみたい!」という学習者にはかなりおすすめです。