Nuxt3のApolloモジュールでBasic認証を使うには

Nuxt ApolloでBasic認証を使うにはPluginsフォルダ内にauth.tsファイルを作り、以下のコードを記述します。

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook("apollo:auth", ({ client, token }) => {
    const username = "Basic認証で使っているユーザー名";
    const password = "Basic認証で使っているパスワード";

    token.value = Buffer.from(username + ":" + password).toString("base64");
  });
});

プラグイン内のファイルは自動的に読み込まれるため、nuxt.config.tsファイルなどに追加する必要はありません。

変数であるusernameとpasswordの値は、Basic認証で実際に使われている値です。セキュアな情報のため、なるべく環境変数を使用してください。

最後に、nuxt.config.tsのapolloに関する設定を変更します。変更箇所はauthTypeで、この値をBasicにします。以下参考コードです。

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      siteUrl: "",
    },
  },
  apollo: {
    clients: {
      default: {
        httpEndpoint: `https://example.com/endpoint`,
      },
    },
    authType: "Basic",
  },
});