1. はじめに
Supabaseを使った認証機能をNext.jsで開発していたところ「Invalid login credentials」エラーでつまづいたので、私と同じ現象が起きている人の役に立てればと思い記事にしました。
- 本記事では、具体的なコード例とともに原因と解決策を解説します。
2. エラーの発生状況
- サインアップは成功するが、サインイン時にエラー発生
- エラーメッセージの確認
Invalid login credentialsNo API key found in request
【サインイン時のエラー例】
const { data, error } = await supabase.auth.signInWithPassword({
email: "test@example.com",
password: "password123",
});
if (error) {
console.error("Login error:", error.message);
}
Invalid login credentialsが表示される- Network タブで
No API key found in requestというエラーも発生
3. 考えられる原因と確認ポイント
3.1 Supabaseクライアントの設定を確認
supabaseクライアントが統一されているか？supabaseClient.jsでcreateClientしているか？
【Supabaseクライアントの正しい作成例】
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
- 異なるAPIキーを使用していないか？
signUp()とsignInWithPassword()で異なるクライアントを使用していないか確認
3.2 CORS設定を確認
- 設定の確認方法:
- Supabaseダッシュボードにログイン
Project Settings→ Authentication →Password settings in email provider→Email→Confirm emailから確認
3.3 メール確認の必要性
- Supabaseはデフォルトで「Email Confirmation（メール確認）」がON
- 未確認のままだとログインできない、つまりGmailなどメールを開き、supabaseから送られた確認メールからConfirm your mailをクリックしないといけない。
デフォルトの確認メール
【メール未確認の際のエラーメッセージ】
{
"error": "Invalid login credentials"
}
- 実際の原因は 「メール未確認」 である可能性が高い
3.4 メール確認の解決策
- 新規登録時に送信される確認メールを開き、リンクをクリック
- 未確認の状態ではログインできないため注意
【メール確認のためのコード】
const { data, error } = await supabase.auth.signUp({
email: "test@example.com",
password: "password123",
});
if (error) {
console.error("Signup error:", error.message);
} else {
console.log("Check your email to confirm your account");
}
- サインアップ後に「メールを確認してください」と明示することが重要
4. まとめ
- 原因:
Invalid login credentialsのエラーは メール未確認 が主な原因 - 解決策: 確認メールのリンクをクリックする
- 学び: Supabaseのデフォルト設定ではメール確認が必要
