🐱

App Service上のNext.jsアプリにNext Authを追加しAzure ADで認証する

2022/10/03に公開約1,300字

Next Auth の追加

下記コマンドでインストール

yarn add next-auth

Next Auth のコンポーネントや API を追加

ドキュメント通りの作業で問題なく追加可能

https://next-auth.js.org/getting-started/typescript

AzureADProvider の設定

ここもドキュメント通りに作業すれば OK

https://next-auth.js.org/providers/azure-ad

TypeScript を使用していると環境変数に設定された Azure AD 関連の値を process.env から引っ張る際、TypeScript Language Server に怒られるので型定義ファイルに下記を追加しておくといい感じ

namespace NodeJS {
  interface ProcessEnv extends NodeJS.ProcessEnv {
    AZURE_AD_CLIENT_ID: string;
    AZURE_AD_CLIENT_SECRET: string;
    AZURE_AD_TENANT_ID: string;
  }
}

Azure AD の構成

アプリの登録

アプリの登録から Web プラットフォームに以下 2 種類の URI を追加

URI 用途
http://localhost:3000/api/auth/callback/azure-ad ローカルデバッグ用
https://<appservice-name>.azurewebsites.net/api/auth/callback/azure-ad 本番用

※<appservice-name>は適宜置き換え

シークレットの作成

証明書・シークレットからシークレットを新規作成する。

App Service の構成

対象の AppService の構成 → アプリケーション設定から先ほど作成した Next Auth 用の環境変数を設定する。

変数
AZURE_AD_CLIENT_ID Azure AD に登録したアプリの ID
AZURE_AD_CLIENT_SECRET 作成したシークレット値
AZURE_AD_TENANT_ID Azure AD に登録したアプリのテナント ID
NEXTAUTH_URL https://<appservice-name>.azurewebsites.net
GitHubで編集を提案

Discussion

ログインするとコメントできます