はじめに

年末年始、学習を頑張っておられる方から質問を何度かいただきまして、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,
  },
});

バックエンドに認可処理加えたら、認証情報つけるのをセットで行うようにしましょう！！

また、なんかうまくいかないって時は、ネットワークタブを確認してみてください。

ブラウザの「開発者ツール」を開き、Network タブで API のリクエスト内容を確認できます。
ステータスコードやエラーメッセージがトラブル解決の重要な手がかりになります！

おわりに

お二方ともに11章LGTMいただけたようで私も嬉しく思います♡

意外とオリアプでもお答えできるご質問が多い印象あるので、TA活用しつつどんどん進めていっていただきたいです！

引き続き応援しています！！