月: 2025年2月

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のデフォルト設定ではメール確認が必要

Supabaseでブログ投稿テーブルを作成しよう！

ER図

🔍 「posts」テーブルって何？

Webサイトやブログには「記事」や「投稿」といったデータがありますよね？ 例えば、ブログを書くときに「タイトル」「本文」「画像」「投稿日時」などの情報を保存したいですよね。

Supabaseの「posts」テーブルは、そんなブログの投稿データを管理するためのものです！

📌 「posts」テーブルのカラム（項目）一覧

カラム名	データ型	説明
id	int8	投稿ごとのID（自動で増える）
user_id	uuid	投稿したユーザーのID
category_id	int8	カテゴリのID（どの種類の記事か）
title	varchar	記事のタイトル
content	text	記事の内容（本文）
image_path	text	画像のURLまたはパス
created_at	timestamp	記事を作成した日時
updated_at	timestamp	記事を更新した日時

📌 「users」テーブルのカラム（項目）一覧

カラム名	データ型	説明
id	uuid	ユーザーごとのID（主キー）
name	varchar	ユーザーの名前
email	varchar	ユーザーのメールアドレス
password	varchar	ハッシュ化されたパスワード
created_at	timestamp	ユーザー登録日時
updated_at	timestamp	ユーザー情報の更新日時

「user_id」や「category_id」には、他のテーブルのデータを関連付けることができます。これを 「外部キー（Foreign Key）」 といいます。

---

🛠 Supabaseで「posts」テーブルを作る方法

Supabaseでは、 GUI（画面操作） と SQL（コードを使う方法） の2種類の方法でテーブルを作れます。

✅ 方法①：GUIで作る（初心者向け）

1. Supabaseにログイン し、プロジェクトを開く。
2. 「Table Editor」 を開く。
3. 「New Table」ボタンをクリック。
4. 「posts」という名前のテーブルを作成。
5. カラムを追加（上の一覧を参考に）。
6. user_id や category_id の 外部キー設定 をする。
7. 「Save」ボタンをクリック して完了！

✅ 方法②：SQLで作る（少し上級者向け）

CREATE TABLE posts (
    id SERIAL PRIMARY KEY,
    user_id UUID REFERENCES users(id) ON DELETE CASCADE,
    category_id INT REFERENCES categories(id),
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    image_path TEXT,
    created_at TIMESTAMP DEFAULT NOW(),
    updated_at TIMESTAMP DEFAULT NOW()
);

このSQLを 「SQL Editor」 に入力して実行すると、テーブルが作成されます！

---

🔗 外部キーってなに？

user_id や category_id は、 他のテーブルの情報とつながるカラム です。例えば、

• user_id → ユーザー情報（usersテーブル）とつながる
• category_id → カテゴリ情報（categoriesテーブル）とつながる

つまり、 「この投稿は誰が作ったの？」 や 「この記事のカテゴリは何？」 という情報を管理できます！

---

🎯 まとめ

✅ Supabaseの「posts」テーブルは、ブログ記事を管理するためのもの！

✅ user_id や category_id は 外部キー（Foreign Key） を使って、他のテーブルとつなげられる。

✅ Supabaseでは、 GUI（Table Editor） か SQL（SQL Editor） でテーブルを作成できる。

✅ 外部キーの設定で、データの整合性を保つことができる！

これでSupabaseの「posts」テーブルについてバッチリですね！💡

ぜひ、実際にSupabaseで試してみてください！ 🚀