Supabase の 422 エラー：原因と解決策

{
  "error": "invalid_grant",
  "error_description": "Invalid login credentials",
  "status": 422
}

{
  "code": "422",
  "message": "Validation failed",
  "details": "Password should be at least 6 characters"
}

const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: '12345'  // 5文字 - 最低要件を満たさない
});

if (error) {
  console.error('422エラー:', error.message);
}

const password = 'secure_password_123';  // 6文字以上

if (password.length < 6) {
  console.error('パスワードは最低6文字以上である必要があります');
  return;
}

const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: password
});

if (error) {
  console.error('認証エラー:', error.message);
}

const email = 'user @example.com';  // スペースを含む不正な形式

const { data, error } = await supabase.auth.signUp({
  email: email,
  password: 'secure_password_123'
});

if (error) {
  console.error('422エラー:', error.message);
}

const email = 'user@example.com'.trim().toLowerCase();  // 前後のスペース削除と小文字化

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
  console.error('メールアドレス形式が不正です');
  return;
}

const { data, error } = await supabase.auth.signUp({
  email: email,
  password: 'secure_password_123'
});

if (error) {
  console.error('認証エラー:', error.message);
}

# Supabase Authのカスタムメール設定（不正な例）
SMTP_HOST: smtp.gmail.com
SMTP_PORT: 587
SMTP_USER: <incomplete-email>  # 値が不完全
SMTP_PASS: 
# パスワードが空

SMTP_FROM_EMAIL: noreply@example.com
SMTP_FROM_NAME: MyApp

# メールテンプレートの確認漏れ
# パスワードリセットテンプレートに {{ .ConfirmationURL }} が含まれていない

# 修正後のカスタムメール設定（正規の例）
SMTP_HOST: smtp.gmail.com
SMTP_PORT: 587
SMTP_USER: your-email@gmail.com
SMTP_PASS: your-app-password  # App PasswordまたはOAuth認証を使用

SMTP_FROM_EMAIL: noreply@example.com
SMTP_FROM_NAME: MyApp

# メールテンプレートの例（確認メールテンプレート）
# メール本文に必須変数 {{ .ConfirmationURL }} を含める
<h1>メール認証</h1>
<p>以下のリンクをクリックして認証を完了してください。</p>
<a href="{{ .ConfirmationURL }}">認証リンク</a>

// Supabaseクライアント初期化時に認証設定を確認
const supabase = createClient(
  '<your-project-url>',
  '<your-anon-key>',
  {
    auth: {
      autoRefreshToken: true,
      persistSession: true,
      // メールプロバイダーが正しく設定されているか確認
    }
  }
);

// ユーザー登録前にメール設定の妥当性をチェック
const { data, error } = await supabase.auth.signUp({
  email: 'test@example.com',
  password: 'valid_password_123'
  // ここでエラーが返される場合、Dashboard設定を再確認
});

// ダッシュボード設定に基づいてバリデーション関数を作成
const validatePassword = (password) => {
  const minLength = 6;  // デフォルト設定
  const hasNumber = /\d/.test(password);
  const hasSpecialChar = /[!@#$%^&*]/.test(password);
  
  if (password.length < minLength) {
    return { valid: false, message: `最低${minLength}文字必要です` };
  }
  // カスタムポリシーに合わせて条件を追加
  return { valid: true };
};

# curlコマンドでメール検証エラーの詳細を確認
curl -X POST 'https://<your-project-ref>.supabase.co/auth/v1/signup' \
  -H 'apikey: <your-anon-key>' \
  -H 'Content-Type: application/json' \
  -d '{
    "email": "test@example.com",
    "password": "short"
  }' \
  -w '\nStatus: %{http_code}\n'

# レスポンスに詳細なエラー理由が含まれます