Go to Qiita Advent Calendar Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@tomota53

認証実装に何日もかけていた私が、Supabaseで30分で終わって驚いた話

Last updated at Posted at 2025-11-09

はじめに

「認証機能、また自分で実装するの...」

個人開発で久しぶりに認証機能が必要でした。かなり昔に実装した記憶を思い出すととても憂鬱な気持ちになりました。

  • ユーザー登録
  • ログイン
  • パスワードリセット
  • セッション管理
  • セキュリティ対策

これらをゼロから実装するのは、かなりしんどい。

でも、Supabaseを使ったら30分で全て終わりました。

この経験を共有します。

従来の認証実装（私の場合）

必要な実装

1. データベース設計
   - usersテーブル
   - sessionsテーブル
   - パスワードのハッシュ化

2. API実装
   - POST /api/register
   - POST /api/login
   - POST /api/logout
   - POST /api/reset-password

3. セキュリティ対策
   - SQLインジェクション対策
   - XSS対策
   - CSRF対策
   - パスワードの強度チェック

4. セッション管理
   - トークン生成
   - トークン検証
   - 有効期限管理

5. エラーハンドリング
   - 重複メール
   - パスワード不一致
   - トークン期限切れ

実装にかかる時間

設計: 2時間
実装: 1日
テスト: 半日
セキュリティ確認: 半日
バグ修正: 半日

合計: 約2-3日

そして毎回これをプロダクトごとに繰り返して開発する...

Supabaseでの認証実装

実際の作業

// 1. Supabaseクライアントの設定（5分）
import { createClient } from '@supabase/supabase-js'

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

// 2. サインアップ（5分）
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password123',
})

// 3. ログイン（5分）
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password123',
})

// 4. ログアウト（3分）
await supabase.auth.signOut()

// 5. セッション取得（5分）
const { data: { session } } = await supabase.auth.getSession()

// 6. ユーザー情報取得（3分）
const { data: { user } } = await supabase.auth.getUser()

かかった時間

設定: 5分
実装: 20分
テスト: 5分

合計: 30分

え、これだけ？😲

驚いたポイント

1. パスワードのハッシュ化が不要

従来:

import bcrypt from 'bcrypt'

// パスワードをハッシュ化
const hashedPassword = await bcrypt.hash(password, 10)

// 保存
await db.users.create({
  email,
  password: hashedPassword
})

Supabase:

// これだけ！ハッシュ化は自動
await supabase.auth.signUp({ email, password })

驚き: セキュリティ対策が自動で完璧！

2. セッション管理が自動

従来:

// トークン生成
const token = jwt.sign({ userId }, SECRET_KEY, { expiresIn: '7d' })

// Cookieに保存
res.setHeader('Set-Cookie', `token=${token}; HttpOnly; Secure`)

// 検証
const decoded = jwt.verify(token, SECRET_KEY)

Supabase:

// 自動でセッション管理してくれる
// トークンの生成・検証・更新、全部やってくれる
const { data: { session } } = await supabase.auth.getSession()

驚き: セッションのリフレッシュまで自動！

3. メール認証が標準装備

従来:

// メール送信サービスの設定
// 確認トークンの生成
// メールテンプレート作成
// 確認URL生成
// ...（長い）

Supabase:

// 設定画面でON/OFFするだけ
// メール送信も自動

驚き: 設定するだけでメール認証完了！

4. パスワードリセットも簡単

従来:

// リセットトークン生成
// メール送信
// トークン検証
// 新パスワード設定
// ...（長い）

Supabase:

// リセットメール送信
await supabase.auth.resetPasswordForEmail(email)

// 新パスワード設定
await supabase.auth.updateUser({ password: newPassword })

驚き: 2行で完結！

5. OAuth認証も数行

従来:

Google OAuth設定: 1日
実装: 半日
テスト: 半日

Supabase:

// Google認証
await supabase.auth.signInWithOAuth({ provider: 'google' })

// GitHub認証
await supabase.auth.signInWithOAuth({ provider: 'github' })

驚き: ソーシャルログインも超簡単！

ハマったポイント

1. RLS（Row Level Security）

問題:
データが取得できない

原因:
RLSポリシーの設定漏れ

解決:
Supabaseダッシュボードでポリシー設定

所要時間: 30分（調べる時間含む）

2. 環境変数

問題:
ローカルでは動くのに本番で動かない

原因:
Vercelの環境変数設定忘れ

解決:
.env.localの内容をVercelに設定

所要時間: 10分

3. セッションの取得タイミング

問題:
ページ読み込み時にユーザー情報が取れない

原因:
非同期処理の理解不足

解決:
useEffectで適切に取得

所要時間: 20分

合計でも1時間程度！従来の「3日」に比べれば...

コスト比較

自前実装の場合

開発時間: 3日
時給換算: 3,000円
人件費: 3,000円 × 24時間 = 72,000円

サーバー費用: 月3,000円
メール送信サービス: 月1,000円

初期コスト: 約72,000円
ランニング: 月4,000円

Supabase利用の場合

開発時間: 30分
時給換算: 3,000円
人件費: 3,000円 × 0.5時間 = 1,500円

Supabase: 無料プラン（月50,000アクティブユーザーまで）

初期コスト: 約1,500円
ランニング: 0円（無料プランの範囲内）

約70,000円の節約 + 時間的コストも削減

Supabaseの良いところ

技術面

✅ セキュリティがデフォルトで強固
✅ スケーラブル
✅ PostgreSQLベース（信頼性高い）
✅ リアルタイム機能も使える
✅ ストレージ機能もある

開発体験

✅ ドキュメントが充実
✅ ダッシュボードが分かりやすい
✅ エラーメッセージが親切
✅ Next.jsとの相性が良い
✅ TypeScript対応

コスト

✅ 無料プランが充実
✅ 個人開発には十分
✅ 従量課金で安心

注意点

1. ベンダーロックイン

Supabaseに依存するため、
将来的に移行が大変かも

でも: 個人開発レベルならOK

2. カスタマイズの制限

複雑な認証ロジックは実装しづらい

でも: 大抵の用途は標準機能で足りる

3. 学習コスト

Supabase特有の概念（RLSなど）を学ぶ必要

でも: ドキュメントが充実しているので大丈夫

どんな人におすすめか

✅ おすすめ

✓ 個人開発者
✓ スタートアップ
✓ MVP（最小限の製品）を素早く作りたい
✓ 認証実装に時間をかけたくない
✓ セキュリティを確実にしたい

△ 検討が必要

△ 超複雑な認証フローが必要
△ オンプレミス必須
△ 既存システムとの深い統合

実装例（Next.js 14 App Router）

基本的なセットアップ

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

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

ログインページ

// app/login/page.tsx
'use client'

import { useState } from 'react'
import { supabase } from '@/lib/supabase'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = async () => {
    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })
    
    if (error) {
      alert(error.message)
    } else {
      window.location.href = '/dashboard'
    }
  }

  return (
    <div>
      <input 
        type="email" 
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input 
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>ログイン</button>
    </div>
  )
}

これだけで動く！

まとめ

Before（自前実装）

実装時間: 2-3日
メンテナンス: 継続的に必要
セキュリティ: 自己責任
コスト: 高い
ストレス: 大きい

After（Supabase）

実装時間: 30分
メンテナンス: ほぼ不要
セキュリティ: 自動で強固
コスト: 無料（個人開発）
ストレス: ゼロ

結論

「認証機能、自分で実装するのが当たり前」

その常識、Supabaseが変えてくれました。

個人開発において、認証実装に時間をかけるのは、
もう過去の話です。

その時間、本当に作りたい機能に使いませんか？

次のステップ

もしSupabaseに興味が湧いたら：

  1. Supabase公式サイトでアカウント作成
  2. 公式ドキュメントのクイックスタートを試す
  3. 小さなプロジェクトで実際に使ってみる

30分後には、認証機能が動いています。

タグ

#Supabase #Next.js #認証 #個人開発 #バックエンド #BaaS

認証実装で消耗している全ての開発者へ。Supabase、試してみてください。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?