NextAuth.jsで独自サインインページを作成する場合の注意すべきこと

Auth Next.js Web

NextAuth.jsには標準でもサインインページとサインアウトページは用意されているのだが、実務ではそのまま使いづらく、独自のサインインページを用意したいことが多いのではないかと思う。

本稿では、独自のサインインページを作成する場合の設定の概要と注意点を共有する。

AuthOptionsの設定

AuthOptionsのpagesにサインインページのパスを指定してやればよい。

import { AuthOptions } from "next-auth";
...

function newAuthOptions() {
  return {
    providers: [
      AutodeskProvider({
        ...
      })
    ],
    ...
    pages: {
      signIn: '/signin',
      signOut: '/signin',
      error: '/signin',
    },
  } satisfies AuthOptions;
}

逆に言えば、このサインインページのパス/signInに独自のサインインページを作っておく必要がある。

サインインページの作成

独自のサインインページを作るにあたって、サインインサインアウトの処理はnext-auth/reactのsignIn, signOut関数をimportして、ボタンのonClickなどに割り当ててやればよい。

import { signIn, signOut } from "next-auth/react";
...

function SigninComponents(props: Props) {

  const params = useSearchParams();
  const error = params.get('error');
  const callbackUrl = params.get('callbackUrl') || "/";

  async function signInHandle() {
    await signIn('autodesk', { callbackUrl })
  }

signIn関数の呼び出しにあたっては、上記の例に示す通り、いくつかの引数を指定したほうが望ましい。

1番目の引数には、利用するOIDCプロバイダを指定する。OIDCプロバイダがひとつだけの場合は引数で指定することで、無駄なプロバイダ選択画面をスキップすることができる。

2番目の引数には、サインイン後にリダイレクトするURLをcallbackUrlフィールドに持たせて指定する必要がある。例えば、/sampleが認証が必要なページだとして、認証なしでアクセスすると、サインインページに飛ばされて認証を求められる。その際、認証後は当初アクセスしたかった/sampleにリダイレクトされることが親切である。 また、このcallbackUrlを指定しない場合は、サインインURLにそのまま戻ってきてしまう。今回は/signinというURLに専用のサインインページを設けるOptionを例に示したが、この例の場合は認証後は認証後にアクセスできるページにリダイレクトされてほしいのではないかと思う。その場合、指定されていない場合にリダイレクトするページを指定してやる必要がある。

このあたりのふるまいは意外とユーザの使い勝手に大きく影響するため、気を付けて設定しておきたい。設定については以上である。