ホーム

App Router×NextAuth.jsでAuth0のログインを実装する

作成日: 2024-2-12

更新日: 2024-8-5

App Router×NextAuth.jsでAuth0のログインを実装する

この記事を読んだ後に理解できること

  • Next.js App RouterでのNextAuth.jsの使い方
  • NextAuth.jsを使ったAuth0ログインの実装方法
  • Next.js App RouterでNextAuth.jsを使う場合の注意点

NextAuth.jsとは？

概要

NextAuth.jsとは、Next.jsで使うことができるオープンソースの認証に関するパッケージです。

NextAuth.jsでは、認証に関して以下の機能をサポートしています。

  • OAuth2.0やOpenId Connectによるアカウント連携のサポート
    • Google、facebook、LINE、Auth0など
  • メールアドレス認証、パスワードレス認証のサポート
  • JWT、database sessionのサポート
  • サーバーレス環境、コンテナ環境など各種環境で動作
  • CSRFトークンを用いたセキュリティ対策

NextAuth.jsを使うことで認証周りのセキュリティレベルを高めることができます。

最近はNext.jsだけでなくSveltekitははじめとして多くのフレームワークでも利用することができます。

※Next.js以外のフレームワークについては、Auth.jsというパッケージを利用することになります。

活用事例

OpenAI社が開発しているChatGPTの認証でもNextAuth.jsが使われています。

ChatGPTにログインした後に、デベロッパーズコンソールのアプリケーションタブからCookieの中身を確認することができます。

Cookieの中には、NextAuth.jsで設定される値がセットされています。

NextAuth.jsで使うAuth0の機能

Auth0の概要

Auth0は、アプリケーションの認証と認可を管理するためのクラウドベースのサービスを提供するプラットフォームです。

開発者が安全な認証機能を迅速に実装できるように設計されており、ウェブ、モバイル、IoT、サーバーレスアプリケーションなど、あらゆる種類のアプリケーションに対応しています。

Auth0は、ユーザー管理、ログイン、パスワードレス認証、マルチファクタ認証（MFA）、ソーシャルログインなど、幅広い認証オプションをサポートしています。

ユニバーサルログインの概要

ユニバーサルログインとは、Auth0を認証サーバとして使うことができる機能です。

具体的には、Auth0で用意したログイン画面にリダイレクトさせてユーザ認証を行い、認証された後に再度アプリケーションにリダイレクトする感じです。

再登場ですが、ChatGPTでもAuth0のユニバーサルログインを使っていると思います。たぶん。

以下はChatGPTのログイン画面になります。

URLはhttps://chat.openai.com/auth/loginとなっています。

この画面においてログインボタンをクリックすると、ログイン画面に遷移します。

この時のURLはhttps://auth0.openai.com/u/loginになります。

遷移画面がAuth0のユニバーサルログインを利用したログインページになります。

この画面で認証処理を行なったユーザがChatGPTユーザとしてログインすることができます。

ユニバーサルログインのメリット

ユニバーサルログインを利用すると以下のメリットがあります。

  • ログイン、新規登録、パスワードリセット等の画面を用意する必要がない
  • ソーシャルログイン機能を簡単に設定できる
  • SSO等のログイン機能も使うことができる
  • ユニバーサルログイン画面でのセキュリティ対策が設定できる

ログイン画面等の実装を省略することができるので、機能開発に集中することができます。

またBot対策をはじめとしたセキュリティ対策についても設定可能です。

ユニバーサルログインの利用方法

Auth0に会員登録をすれば、デフォルトで利用できるようになっています。

ただしApplication作成の必要があります。

ログイン後画面の左側メニューバーからApplicationsを選択します

画面右側にあるCreate Applicationボタンをクリックします。

Nameは適当で大丈夫です。Application TypeはRegular Web Applicationsを選択してください。

一旦、Auth0での作業は終了です。

App RouterでNextAuth.jsを使ってAuth0ログインを実装する

Next.jsアプリケーションを作成する

以下コマンドで最新バージョンのNext.jsの初期アプリケーションを作成することができます。

※検証時の最新バージョンはNext.js14.1になります。

$ npx create-next-app@latest .

? Would you like to use TypeScript? › No / Yes
? Would you like to use ESLint? › No / Yes
? Would you like to use Tailwind CSS? › No / Yes
? Would you like to use `src/` directory? › No / Yes
? Would you like to use App Router? (recommended) › No / Yes
? Would you like to customize the default import alias (@/*)? › No / Yes

回答についてはデフォルトで選択されているものでも問題ありません。

NextAuth.jsをインストールする

以下コマンドでNextAuth.jsをインストールすることができます。

$ npm install next-auth

app/api/auth/[...nextauth]/route.tsファイルを作成する

App Routerを使う場合は、appディレクトリ配下に/api/auth/[...nextauth]/route.tsファイルを作成します。

https://next-auth.js.org/configuration/initialization#route-handlers-app

import NextAuth from "next-auth"
import Auth0 from "next-auth/providers/auth0"

const handler = NextAuth({
  providers: [
    Auth0(
      {
        clientId: process.env.AUTH0_CLIENT_ID ?? '',
        clientSecret: process.env.AUTH0_CLIENT_SECRET ?? '',
        issuer: process.env.AUTH0_ISSUER ?? '',
      }
    ),
  ]
})

export { handler as GET, handler as POST }

最低限の設定は以上です。

env.localに環境変数を設定する

Auth0のClientId、Client Secret、issuerをルートディレクトリ配下にあるenv.localに環境変数を設定します。

Auth0にログインしてApplicationsメニューから作成したApplicationを選択します。

Basic Informationを確認します。

Client ID、Client Secretはそのままコピペすれば大丈夫です。

issuerについては、Domain情報にhttps://を先頭につけたものになります。

AUTH0_CLIENT_ID=hoge
AUTH0_CLIENT_SECRET=huga
AUTH0_ISSUER=https://poyo.auth0.jp

Auth0でCallback URLを設定する

Allowed Callback URLsにhttp://localhost:3000/api/auth/callback/auth0を追加します。

右下にあるSave Changesボタンをクリックします。

動作確認

まずbuildできることを確認してください。

$ npm run build

buildが問題なければ、localサーバを起動します。

$ npm run dev

localサーバが立ち上がったら/api/auth/signinにアクセスします。

Sign in with Auth0をクリックします。

Auth0のユニバーサルログイン画面に遷移したらアカウント情報の登録、ログインができるはずです。

参考

おすすめ記事