前回の記事でhasuraについて書きましたが、私のブログではAuth0での認証を合わせて使用しています

詳しくはAuth0 + hasuraで調べてみると沢山出てきますので、そちらを参考に。

Auth0 + hasuraとした時、どうやってhasura cloudにリクエストを送るのか、どうやってリクエストヘッダーに認証トークンを渡すのかの覚書

まずhasuraにリクエストを送る際はヘッダーに'Authorization': `Bearer ${トークン}`としてあげます

headers: {
      ...headers,
      'Authorization': `Bearer ${accessToken}`,<-これ
      'content-type': 'application/json',
    },

じゃどーやってそのトークン取得するの？

サーバーサイドで取得したい場合は@auth0/nextjs-auth0でgetAccessToken()します

詳しくはこの記事がわかりやすいです

今回は@auth0/nextjs-auth0でgetAccessToken()します

その場合はNext.jsのAPI機能を使用します

Next.js13.4から使えるApp Router(App ディレクトリ)ではappフォルダ内にapiというフォルダを作りその中にroute.tsという名前でファイルを作ることでapiとして使用できます

今回はapi/token/route.tsxとします

route.tsxの中は

import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';
import { NextResponse } from 'next/server';

export const GET = withApiAuthRequired(async function GET(req) {
  const res = new NextResponse();
  const { accessToken } = await getAccessToken(req, res);
  return NextResponse.json({ token: accessToken }, res);
});

とします

詳しくはこちら

App Router(App ディレクトリ)ではpagesディレクトリの場合とapiの書き方が変わっています、ルートハンドラーと言います※pagesディレクトリで以前のapiの書き方でやることも可能です

ここまでできたらトークンが取得できそうですね

トークンを取得したいところで

const getToken = async () => {
    const response = await fetch('/api/token');

    if (response.ok) {
      const data = await response.json();
      return { accessToken: data.token };
    } else {
      console.error('Fetch request failed!!!!');
    }
  })

として取得できます

ただしこれだけだとトークンの期限が切れた時にトークンを更新してくれません、ログアウト/ログインするまでえ期限切れの古いトークンを使おうとしてしまうので

• AUTH0_SCOPEにoffline_accessを含めます(envなど)
• Auth0のダッシュボード(Application->Api->Access SettingsのAllow Offline Access)で「オフラインアクセスを許可」にチェックを入れます
• アプリケーション設定のGrant TypesでRefresh Tokenを有効にする

以上で@auth0/nextjs-auth0でゲット！アクセストークン！できるはず