jpskill.com
🛠️ 開発・MCP コミュニティ

supabase-auth

Supabaseの認証機能を設定・管理し、プロジェクト接続やトークン管理、ログイン方法の実装、ユーザー管理などをスムーズに行えるように支援するSkill。

📜 元の英語説明(参考)

Setup and manage Supabase authentication including project connection, tokens, login methods, and user management. Use when configuring Supabase access, implementing authentication, or managing users.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Supabaseの認証機能を設定・管理し、プロジェクト接続やトークン管理、ログイン方法の実装、ユーザー管理などをスムーズに行えるように支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o supabase-auth.zip https://jpskill.com/download/9500.zip && unzip -o supabase-auth.zip && rm supabase-auth.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9500.zip -OutFile "$d\supabase-auth.zip"; Expand-Archive "$d\supabase-auth.zip" -DestinationPath $d -Force; ri "$d\supabase-auth.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して supabase-auth.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → supabase-auth フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Supabase Authentication Skill

プロジェクトの Supabase 認証をセットアップおよび管理します。

クイックリファレンス

タスク メソッド
CLI のインストール npm install supabase --save-dev
Supabase へのログイン supabase login
プロジェクトのリンク supabase link --project-ref <ref>
ステータスの確認 supabase status
プロジェクト URL の取得 ダッシュボード → Settings → API
anon key の取得 ダッシュボード → Settings → API
service key の取得 ダッシュボード → Settings → API (デフォルトでは非表示)

環境変数

# すべての Supabase 操作に必要
SUPABASE_URL=https://<project-ref>.supabase.co
SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# サーバーサイドの管理者操作用 (クライアントサイドには絶対に公開しないでください)
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# CI/CD パイプライン用
SUPABASE_ACCESS_TOKEN=<personal-access-token>
SUPABASE_DB_PASSWORD=<database-password>
SUPABASE_PROJECT_ID=<project-ref>

クライアントの初期化

ブラウザ/クライアントサイド

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

const supabase = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_ANON_KEY
)

サーバーサイド (Service Role を使用)

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

const supabaseAdmin = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_SERVICE_ROLE_KEY,
  {
    auth: {
      autoRefreshToken: false,
      persistSession: false
    }
  }
)

認証メソッド

Email/Password

// サインアップ
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password123',
  options: {
    data: { full_name: 'John Doe' }  // ユーザーメタデータ
  }
})

// サインイン
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password123'
})

// サインアウト
const { error } = await supabase.auth.signOut()

Magic Link (パスワードレス)

const { data, error } = await supabase.auth.signInWithOtp({
  email: 'user@example.com',
  options: {
    emailRedirectTo: 'https://yourapp.com/welcome'
  }
})

OAuth Providers

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github',  // または 'google', 'discord' など
  options: {
    redirectTo: 'https://yourapp.com/auth/callback'
  }
})

Anonymous Auth

const { data, error } = await supabase.auth.signInAnonymously()

セッション管理

現在のセッションを取得

// ローカルストレージから (高速、ネットワーク不要)
const { data: { session } } = await supabase.auth.getSession()

// サーバーで検証 (安全、サーバーサイドで使用)
const { data: { user } } = await supabase.auth.getUser()

認証の変更をリッスン

const { data: { subscription } } = supabase.auth.onAuthStateChange(
  (event, session) => {
    console.log(event, session)
    // Events: SIGNED_IN, SIGNED_OUT, TOKEN_REFRESHED, USER_UPDATED
  }
)

// クリーンアップ
subscription.unsubscribe()

パスワードの回復

// リセットをリクエスト
const { error } = await supabase.auth.resetPasswordForEmail(
  'user@example.com',
  { redirectTo: 'https://yourapp.com/update-password' }
)

// パスワードの更新 (リダイレクト後)
const { error } = await supabase.auth.updateUser({
  password: 'new_password'
})

管理者操作 (サーバーサイドのみ)

// ユーザーの作成 (メール確認をバイパス)
const { data, error } = await supabaseAdmin.auth.admin.createUser({
  email: 'user@example.com',
  password: 'password123',
  email_confirm: true,
  app_metadata: { role: 'admin' }
})

// ユーザーの削除
const { error } = await supabaseAdmin.auth.admin.deleteUser(userId)

// ユーザーの更新
const { data, error } = await supabaseAdmin.auth.admin.updateUserById(
  userId,
  { app_metadata: { role: 'moderator' } }
)

// ユーザーの一覧表示
const { data, error } = await supabaseAdmin.auth.admin.listUsers()

セキュリティに関する注意点

  1. service role key を絶対に公開しないでください - Row Level Security をバイパスします
  2. サーバーで getUser() を使用してください - 認証のために getSession() を信頼しないでください
  3. ロールには app_metadata を使用してください - user_metadata はユーザーが編集可能です
  4. すべてのテーブルで RLS を有効にしてください - これがないと、誰でもデータにアクセスできます

参考文献

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Supabase Authentication Skill

Setup and manage Supabase authentication for projects.

Quick Reference

Task Method
Install CLI npm install supabase --save-dev
Login to Supabase supabase login
Link project supabase link --project-ref <ref>
Check status supabase status
Get project URL Dashboard → Settings → API
Get anon key Dashboard → Settings → API
Get service key Dashboard → Settings → API (hidden by default)

Environment Variables

# Required for all Supabase operations
SUPABASE_URL=https://<project-ref>.supabase.co
SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# For server-side admin operations (NEVER expose client-side)
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# For CI/CD pipelines
SUPABASE_ACCESS_TOKEN=<personal-access-token>
SUPABASE_DB_PASSWORD=<database-password>
SUPABASE_PROJECT_ID=<project-ref>

Client Initialization

Browser/Client-Side

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

const supabase = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_ANON_KEY
)

Server-Side (with Service Role)

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

const supabaseAdmin = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_SERVICE_ROLE_KEY,
  {
    auth: {
      autoRefreshToken: false,
      persistSession: false
    }
  }
)

Authentication Methods

Email/Password

// Sign up
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password123',
  options: {
    data: { full_name: 'John Doe' }  // user metadata
  }
})

// Sign in
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password123'
})

// Sign out
const { error } = await supabase.auth.signOut()

Magic Link (Passwordless)

const { data, error } = await supabase.auth.signInWithOtp({
  email: 'user@example.com',
  options: {
    emailRedirectTo: 'https://yourapp.com/welcome'
  }
})

OAuth Providers

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github',  // or 'google', 'discord', etc.
  options: {
    redirectTo: 'https://yourapp.com/auth/callback'
  }
})

Anonymous Auth

const { data, error } = await supabase.auth.signInAnonymously()

Session Management

Get Current Session

// From local storage (fast, no network)
const { data: { session } } = await supabase.auth.getSession()

// Validate with server (secure, use on server-side)
const { data: { user } } = await supabase.auth.getUser()

Listen for Auth Changes

const { data: { subscription } } = supabase.auth.onAuthStateChange(
  (event, session) => {
    console.log(event, session)
    // Events: SIGNED_IN, SIGNED_OUT, TOKEN_REFRESHED, USER_UPDATED
  }
)

// Cleanup
subscription.unsubscribe()

Password Recovery

// Request reset
const { error } = await supabase.auth.resetPasswordForEmail(
  'user@example.com',
  { redirectTo: 'https://yourapp.com/update-password' }
)

// Update password (after redirect)
const { error } = await supabase.auth.updateUser({
  password: 'new_password'
})

Admin Operations (Server-Side Only)

// Create user (bypasses email confirmation)
const { data, error } = await supabaseAdmin.auth.admin.createUser({
  email: 'user@example.com',
  password: 'password123',
  email_confirm: true,
  app_metadata: { role: 'admin' }
})

// Delete user
const { error } = await supabaseAdmin.auth.admin.deleteUser(userId)

// Update user
const { data, error } = await supabaseAdmin.auth.admin.updateUserById(
  userId,
  { app_metadata: { role: 'moderator' } }
)

// List users
const { data, error } = await supabaseAdmin.auth.admin.listUsers()

Security Notes

  1. Never expose service role key - It bypasses Row Level Security
  2. Use getUser() on server - Don't trust getSession() for authorization
  3. Use app_metadata for roles - user_metadata is user-editable
  4. Enable RLS on all tables - Without it, anyone can access data

References