Zenn
🍗

Next.jsにauth0を導入する方法(app router対応版)

2024/06/08に公開
Next.js
Node.js
React
Node.js
Auth0
tech

Next.jsにauth0を導入する方法について

環境紹介

node v20.14.0 (npm v10.7.0)

Next.jsをインストール

Next.js version 13で導入されたapp router対応。

npx create-next-app@latest

参考URL
Installation

create-next-app@14.2.3
Ok to proceed? (y) y

✔ What is your project named? … hoge
✔ 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
Creating a new Next.js app in /Users/maito/bitbucket/hoge/hoge.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

added 358 packages, and audited 359 packages in 39s

133 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created onechan at /Users/maito/bitbucket/hoge/hoge

Auth0のアカウント作成

ログイン画面から、アカウントの作成をしました。

googleのアカウントを持っていたので、「googleで続ける」を選択しました。

Auth0の利用規約の同意

利用規約を求められたのでチェックを入れて「Next」ボタンをクリックしました。

アカウント作成完了

tenantを日本に変更

tenantがデフォルトでアメリカになっているので、日本に変更します。

下記画像で、「Create Tenant」をクリック。

無料プランの場合、productionモードしか選べないので、productionモードを選択して、ドメイン名を入力して、「Create」 ボタンをクリックします。

auth0 pricing

日本用のtenantができました。

auth0の設定

  • 左側の初心者を選択。

  • Regular Web AppのNext.jsを選択

ってか、Next.jsってRegular Web Appかなー？

  • ログインさせたいサービスを選択。

今回は、メアドだけのログインを作りたかったので、デフォルトで選択されたgoogleログインのチェックをはずす。
これ、運用開始したら、途中で、増やせますよね？

  • 「Try Login」ボタンをクリックして、右下にある「continue」をアクティブにする。

  • 「DOWNLOAD SAMPLE APP」 をクリックして、右下にある「I Am Ready To Use Auth0」ボタンをアクティブにする。

  • 完了

auth0のコールバックURLを設定。

  • Allowed Callback URLsにhttp://localhost:3000/api/auth/callbackを入力
  • Allowed Logout URLsにhttp://localhost:3000を入力

して保存。

Nextjs用のauth0ライブラリをインストール

  • npm installでNextjs用のauth0ライブラリをインストール
npm install @auth0/nextjs-auth0
  • インストール結果
added 18 packages, and audited 377 packages in 2s

137 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

.env.localファイルの作成

Next.jsのトップディレクトリに.env.localを作成して、Client ID、Client Secretを入力。

# A long, secret value used to encrypt the session cookie
AUTH0_SECRET='LONG_RANDOM_VALUE'
# The base url of your application
AUTH0_BASE_URL='http://localhost:3000'
# The url of your Auth0 tenant domain
AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth0.com'
# Your Auth0 application's Client ID
AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
# Your Auth0 application's Client Secret
AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'
  • Client IDとClient Secretは、ApplicationsのSettingで確認(下図参照)。

  • AUTH0_SECRETは、下記コマンドで取得
node -e "console.log(crypto.randomBytes(32).toString('hex'))"

login、logoutを実装

  • app/api/auth/[auth0] のディレクトリを作成
  • route.tsを作成 (マニュアルではroute.jsでした)
  • route.tsに下記コードを追加
import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = handleAuth();
  • layout.tsxにUserProviderを追加
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { UserProvider } from '@auth0/nextjs-auth0/client';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <UserProvider>
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </UserProvider>
  );
}
  • page.tsxを下記に変更
'use client';
import { useUser } from '@auth0/nextjs-auth0/client';

export default function Home() {
  const { user, error, isLoading } = useUser();
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  if (user) {
    return (
      <div>
        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/api/auth/login">Login</a>;
}

参考URL
nextjs-auth0

動作確認

  • Next.jsを起動
npm run dev

実行結果

  • 「ログイン」をクリック後

  • 新規会員登録完了後

感想

  • 少しだけ、HTMLを修正しただけなのに、TVの砂嵐画面のようになったのはなぜ？

  • Warning: Extra attributes from the server: data-google-analytics-opt-out という、auth0とは全く関係ないエラーでて気が散るからどうにかしてほしい。(app router前は、こんなエラーなかった。)

  • auth0側の文言が英語だったので、日本語にならないかぁー。離脱率上がっちゃうよ。

Discussion