【11章】認証機能導入でエラー吐かれて困っている人、集合！！！

投稿日: 2025年01月03日

学習振り返り

要約

認証機能の実装でよくあるエラーとして、認証が不要なエンドポイントへの認可処理追加や、認証情報を渡さないケースが挙げられる。
エンドポイントに認可処理を加える際は、公開ページではなく管理画面などアクセス制限が必要な場所に制限すべきである。
フロントエンドからバックエンドにAPIを呼び出す際は、必ず認証情報を含めることが重要で、ネットワークタブを利用してリクエスト内容を確認することも推奨される。

はじめに

年末年始、学習を頑張っておられる方から質問を何度かいただきまして、11章に入って認証機能の部分でコードをとりあえず与えられた通りに書いたらエラー吐かれて、今まではうまくいっていたのに表示されなくなった。という質問を違う方から全く同じ箇所で頂きました。

ということで、認証機能の搭載で起こっていたパターンを2つ挙げて、簡単に解説してみます。同じことでハマる方もいらっしゃるはず。

実際の例

パターン1：認証が不要なエンドポイントに認可処理を加えていた

バックエンド(/api/hoge/route.ts)にこのような処理を加えると思います。

const token = request.headers.get('Authorization') ?? ''

	// supabaseに対してtokenを送る
  const { error } = await supabase.auth.getUser(token)

  // 送ったtokenが正しくない場合、errorが返却されるので、クライアントにもエラーを返す
  if (error)
    return NextResponse.json({ status: error.message }, { status: 400 })

この処理を加えたら、セッション情報持っていないと必ずerrorが返ります。

そのエラーで頭を抱えておられました。

この場合、セッション情報が存在しないため、「セッション情報がありません」というエラーが発生していました。

return NextResponse.json({ status: error.message }, { status: 400 })

返却されたのがここだったのです。

const token = request.headers.get('Authorization') ?? ''

この部分で、リクエストヘッダーからトークンを取得しています。
トークンがない場合は空文字列 ('') が入るため、認証が失敗します。

認可処理を加えるのは管理画面のようなアクセス制限が必要なページに限定すべきですが、誰でもアクセス可能な公開ページのエンドポイントに認可処理を加えていたため、エラーが発生していました。

なので、ここの処理は不要ですと消していただいて解決！みたいな感じでした。

パターン2：認証情報を渡していない

先程のパターン1で挙げたバックエンドの認可処理の部分ですが、具体的に何しているかというと、

const token = request.headers.get('Authorization') ?? ''

リクエストheadersから、Authorizationの値を取得しています。

ここにtokenが入っているからtokenを取得しているということになります。

token が存在しない場合は空の文字列が入ります。

次に、下記の処理でtokenをsupabaseに送って、認可しても問題ないかを確認します。

const { error } = await supabase.auth.getUser(token)

ここでエラーが空であれば認可して問題ないと判断できますが、万一エラーに何かしら入っていた場合、認可してはいけないのでエラーを返します。

 if (error)
    return NextResponse.json({ status: error.message }, { status: 400 })

ザックリ、こんな流れです。

フロントエンド側からバックエンドのAPIを呼び出す際に、リクエストヘッダーに認証情報を含める必要があります。この認証情報（トークン）がない場合、サーバー側で認証に失敗し、エラーが返されます。

これをしておらずセッションエラー返却されて意味不明ってなっておられました。

こちらが2日連続で全く同じ内容でご質問いただいたパターンです。

// ❌ 認証情報をつけ忘れた例
const response = await fetch("/api/categories");


// ✅ 正しい例
const response = await fetch("/api/categories", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    Authorization: token,
  },
});