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本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
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
$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. 下の青いボタンを押して
supabase-auth.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
supabase-authフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
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()
セキュリティに関する注意点
- service role key を絶対に公開しないでください - Row Level Security をバイパスします
- サーバーで getUser() を使用してください - 認証のために getSession() を信頼しないでください
- ロールには app_metadata を使用してください - user_metadata はユーザーが編集可能です
- すべてのテーブルで RLS を有効にしてください - これがないと、誰でもデータにアクセスできます
参考文献
- auth-methods.md - すべての認証方法の詳細
- session-management.md - セッションのライフサイクルとトークン
- mfa-setup.md - 多要素認証
📜 原文 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
- Never expose service role key - It bypasses Row Level Security
- Use getUser() on server - Don't trust getSession() for authorization
- Use app_metadata for roles - user_metadata is user-editable
- Enable RLS on all tables - Without it, anyone can access data
References
- auth-methods.md - All authentication methods in detail
- session-management.md - Session lifecycle and tokens
- mfa-setup.md - Multi-factor authentication