Supabaseのログインエラー『Invalid login credentials』の原因と解決策を徹底解説！

1. はじめに

Supabaseを使った認証機能をNext.jsで開発していたところ「Invalid login credentials」エラーでつまづいたので、私と同じ現象が起きている人の役に立てればと思い記事にしました。

• 本記事では、具体的なコード例とともに原因と解決策を解説します。

2. エラーの発生状況

• サインアップは成功するが、サインイン時にエラー発生

  
  

• エラーメッセージの確認
  • Invalid login credentials
  • No 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設定を確認

• 設定の確認方法:
  1. Supabaseダッシュボードにログイン
  2. 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のデフォルト設定ではメール確認が必要