ChunTechBlog
ChunTech Blog

technology
Welcome to ChunTechBlog

Supabaseでユーザー認証を試してみた!ログイン機能の第一歩

2025/9/23
Webサイト
Supabaseでユーザー認証を試してみた!ログイン機能の第一歩

こんにちは!
前回は「Supabaseの基礎」について学習記録としてまとめました。
今回はその続きとして、ユーザー認証機能(ログイン) を試してみたことを書いていきます。

Webアプリを作るうえで欠かせないのが「ユーザー管理」。
会員制サイトや予約システム、ちょっとした掲示板でも「誰がログインしているか」を判定する必要があります。
そこで大活躍するのが、Supabaseの Auth(認証機能) です。


Supabase Auth の基本

Supabaseには最初から「ユーザー認証」が組み込まれています。
代表的な特徴はこんな感じです👇

  • メール+パスワード 認証がすぐに使える
  • OAuth認証(Google, GitHub など) を数クリックで追加できる
  • 認証済みユーザーは Supabase の管理画面から確認できる

つまり「会員登録 → ログイン」までの仕組みがほぼ完成済みで、開発者はそれを呼び出すだけで使えるんです。


実際に試した流れ

僕が試した流れはシンプルで、以下のステップでした。

  1. Supabaseで新しいプロジェクトを作成
  2. ダッシュボードから Authentication → 設定を有効化
  3. .env.local に Supabase の URL と APIキーを設定
  4. フロントエンド(Next.js)から signUpsignIn を呼び出す

コード例はこんな感じ👇(簡略版です)

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もすぐに追加できる
  • 管理画面でユーザーの動きが見えるのが便利

「とりあえず会員制サイトを作ってみたい!」という学習者にはかなりおすすめです。

この記事をシェア

著者について

C

ChunTechBlog

開発記録を残すブログとして運営しています。最新のテクノロジーと開発ノウハウをモノクロトーンでお届けします。