💫

【NextAuth.js/認証】Cognitoでカスタムサインインページを作成する

2023/09/16に公開

Next.js

はじめに

みなさん、Cognitoは使っていますか？
Cognitoは便利なのですが、サインイン画面周りがちょっと大変ですよね…。
特にCognitoの「ホストされたのUI」の見た目よくないので、カスタムしたいですよね。

以前、Amplifyを使った同じような記事を書いたのですが、
今後標準になりそうなNextAuth.jsを使いたくなりました。

前作からの変更点は次の通りです。

UIライブラリ
- 前作：MUI
- 今作：Mantine
Cognitoサインインに利用するライブラリ
- 前作：Amplify.js
- 今作：AWS SDK V3 + NextAuth.js

やりたいこと

デフォルトのUIを使ったサインイン方法は色々な記事でも紹介されていますが、
カスタムしてNextAuth.jsのCredentialsProviderを使ってサインインすることをします。
この時、サインイン処理はフロントでしています。

対象読者

NextAuth.js（or Auth.js）を使っている
Cognitoを使っている
- 「ホストされたUI」ではなく、サインイン画面をカスタマイズしたい
Mantineを使っている
サインインの機能はバックエンドではなくフロントエンド側で実施する
- Amplify.jsではなく、AWS SDKを利用する
AWS CDKを使っている

デプロイ環境

macOS: 13.5
Next.js: 13.4
NextAuth.js: 4.23
AWS SDK: 3.413
Mantine: 6.0.20
AWS CDK: 2.96.2

動作イメージ

ローカルで起動すると以下のサインイン画面が出てきます。

サインイン画面

サインイン画面（バリデーションもあり）

サインインが成功すると、idTokenが見えるようになっています。

画面に表示されたidToken

コード

コードは以下のリポジトリに置いてあります。適宜参考にしてください。

インフラ

Cognitoを作成します。
すでにCognitoが存在している場合はスキップしてもらって大丈夫です。

Cognitoのデプロイ

以下のコードでCognitoを設定します。ポイントとして、アプリクライアントはprivate-clientのみを作成している点です。

infrastructure/lib/Cognito.ts

import {
  Duration,
  Stack,
  StackProps,
  RemovalPolicy,
  aws_cognito,
} from "aws-cdk-lib";
import { Construct } from "constructs";
import { prefix } from "./constants";

interface ICognitoStack {
  domainPrefix: string;
  callbackUrls: string[];
  logoutUrls: string[];
}
export const paramsCognito: ICognitoStack = {
  domainPrefix: "gsy0911-zenn-example",
  callbackUrls: ["http://localhost:3000"],
  logoutUrls: ["http://localhost:3000"],
};

export class Cognito extends Stack {
  constructor(
    scope: Construct,
    id: string,
    params: ICognitoStack,
    props?: StackProps,
  ) {
    super(scope, id, props);

    /** USER POOL */
    const userPool = new aws_cognito.UserPool(this, "user-pool", {
      userPoolName: `${prefix}-user-pool`,
      // sign-up
      selfSignUpEnabled: false,
      // sign-in
      signInAliases: {
        username: true,
        email: true,
      },
      // user attributes
      standardAttributes: {
        email: {
          required: true,
          mutable: true,
        },
      },
      mfa: aws_cognito.Mfa.OPTIONAL,
      mfaSecondFactor: {
        sms: true,
        otp: true,
      },
      passwordPolicy: {
        minLength: 8,
        requireLowercase: true,
        requireUppercase: true,
        requireDigits: true,
        requireSymbols: true,
        tempPasswordValidity: Duration.days(3),
      },
      // emails, by default `no-reply@verificationemail.com` used
      accountRecovery: aws_cognito.AccountRecovery.EMAIL_ONLY,
      removalPolicy: RemovalPolicy.DESTROY,
    });

    // App Clients
    userPool.addClient("private-client", {
      userPoolClientName: "private-client",
      generateSecret: true,
      authFlows: {
        userPassword: true,
        userSrp: true,
        adminUserPassword: true,
      },
      oAuth: {
        callbackUrls: params.callbackUrls,
        logoutUrls: params.logoutUrls,
        flows: {
          authorizationCodeGrant: true,
        },
        scopes: [aws_cognito.OAuthScope.OPENID, aws_cognito.OAuthScope.EMAIL],
      },
    });

    userPool.addDomain("cognito-domain", {
      cognitoDomain: {
        domainPrefix: params.domainPrefix,
      },
    });
  }
}

Cognitoを以下のコマンドでデプロイします。
5分もかからずにCognitoがデプロイされると思います。

# at ./infrastructure
$ cdk deploy

これでインフラ側の設定は完了しました。

フロントエンド

次にフロントエンドの説明をします。
必要に応じて次のパッケージをインストールしてください。

# cognitoの認証に必要
$ npm install @aws-sdk/client-cognito-identity-provider \
  jwt-decode \
  next-auth
# 必須ではないです。Mantineを利用する場合のみインストールしてください。
$ npm install @mantine/core \
  @mantine/form \
  @mantine/hooks \
  @mantine/next

環境変数

環境変数を参照した際、string | nullとはならないように以下のファイルを作成します。

frontend/zenn/globals.d.ts

declare namespace NodeJS {
  interface ProcessEnv {
    // next-auth.js
    readonly NEXTAUTH_SECRET: string;
    readonly NEXTAUTH_URL: string;
    // cognito
    readonly COGNITO_REGION: string;
    readonly COGNITO_USER_POOL_ID: string;
    readonly COGNITO_CLIENT_ID: string;
    readonly COGNITO_CLIENT_SECRET: string;
    readonly COGNITO_ISSUER: string;
  }
}

そして、.env.localファイルを作成して先ほどデプロイしたCognitoの値を設定していきます。

.env.local

# common
NEXTAUTH_SECRET=$(openssl rand -base64 32)
NEXTAUTH_URL=http://localhost:3000

# common in cognito
COGNITO_REGION=ap-northeast-1
COGNITO_USER_POOL_ID=none
COGNITO_ISSUER=https://cognito-idp.ap-northeast-1.amazonaws.com/none
# private-client
COGNITO_CLIENT_ID=none
COGNITO_CLIENT_SECRET=none

`next-auth`の型の拡張

NextAuth.jsで既に定義されているUserやSessionの型を拡張します。
こうすることで、安全にidTokenやaccessTokenを保持・参照できます。

frontend/zenn/common/next-auth.d.ts

import { NextPage } from "next";
import { DefaultSession } from "next-auth";

interface UserWithId extends DefaultSession["user"] {
  idToken?: string;
  id?: string;
  email: string;
}

declare module "next-auth/jwt" {
  interface JWT {
    idToken?: string;
    accessToken?: string;
    accessTokenExpires?: number;
    refreshToken?: string;
    error?: string;
  }
}

declare module "next-auth" {
  interface Session {
    accessToken?: string;
    user: UserWithId;
    error?: string;
  }

  interface User {
    idToken?: string;
    refreshToken?: string;
    accessToken?: string;
    accessTokenExpires?: number;
  }

  interface Account {
    expires_at;
  }
}

`[...nextauth].ts`について

NextAuth.jsで大事なファイルについて説明します。
全てのコードを一度に載せるのは難しいので適宜切り取りつつ説明していきます。
コード全体を見たい場合には、GitHubを参照してください。

以下のパッケージをインポートしています。