たぶん最短設定！NextAuth v5を設定する

# はじめに

NextAuthの設定に毎回手こずるので、最短と思われる設定方法をまとめておきます。
NextAuthは、v5を利用します。

認証プロバイダーにはAuth0を利用しています。
Auth0は無料枠でテストができるので、適当なアプリケーションを「Single Page Application」タイプで作成してもらって、テスト用のユーザーを作成しておいてください。


# Step 1. Next.jsの初期化

Next.jsは、v15を利用します。

```bash
$ npx create-next-app@15
```

project nameは、**next-app**にしました。  
質問には全部エンターボタンをそのまま押していきます。


# Step 2. NextAuthをインストールする

beta版のNextAuthをインストールします。

```
$ npm install next-auth@beta
```

# Step 3. auth.tsを作成する

next-appフォルダの直下にauth.tsファイルを作成します。  
今回は、Auth0を使って認証テストをするので、Auth0の情報をここに書いています。  
認証プロバイダーの情報は必要に応じて書き換えてください。

```typescript:auth.ts
import NextAuth from "next-auth"
import Auth0Provider from "next-auth/providers/auth0";
 
export const { auth, handlers, signIn, signOut } = NextAuth({
  providers: [
    Auth0Provider({
      clientId: process.env.AUTH0_CLIENT_ID as string,
      clientSecret: process.env.AUTH0_CLIENT_SECRET as string,
      issuer: process.env.AUTH0_ISSUER
    })
  ],
})
```


# Step 4. api routeを設定する

app/api/auth/[...nextaut]フォルダを作ります。

```bash
$ mkdir -p app/api/auth/[...nextauth]
```

作ったフォルダにroute.tsファイルを作成します。

```typescript:app/api/auth/[...nextaut]/route.ts
import { handlers } from "@/auth"
export const { GET, POST } = handlers
```

# Step 5. .env.localを作成する

next-app直下に.env.localファイルを作成し、Auth0の設定をします。

```text:.env.local
AUTH0_CLIENT_ID={Auth0のClient ID}
AUTH0_CLIENT_SECRET={Auth0のClient Secret}
AUTH0_ISSUER=https://{Auth0のDomain}
NEXTAUTH_SECRET={「openssl rand -base64 32」コマンドで生成した値}
NEXTAUTH_URL=http://localhost:3000
```

# Step 6. テスト用コンテンツを作成する

青いサインインボタンを作ります

```typescript:components/SignIn/index.tsx
"use client"

import { signIn } from "next-auth/react"

export default () => {
  return (
    <div>
      <button type="button" onClick={() => signIn()} className="text-white bg-blue-700 rounded-lg text-sm px-5 py-2.5 me-2 mb-2">Sign in</button>
    </div>
  )
}
```

赤いサインアウトボタンを作ります

```typescript:components/SignOut/index.tsx
"use client"

import { signOut } from "next-auth/react"

export default () => {
  return (
    <div>
      <button type="button" onClick={() => signOut()} className="text-white bg-red-700 rounded-lg text-sm px-5 py-2.5 me-2 mb-2">Sign out</button>
    </div>
  )
}
```

レイアウトをスッキリさせます

```typescript:app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Next Auth v5のテストページ",
  description: "Next Auth v5の動作テストを行うページです",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <div className="h-screen">
          {children}
        </div>
      </body>
    </html>
  );
}
```

ページの内容を作ります

```typescript:app/page.tsx
import { auth } from "@/auth";
import SignIn from "@/components/SignIn";
import SignOut from "@/components/SignOut";

const Home = async () => {
  const session = await auth()
  console.log(session)

  return (
    <div>
      <h1>Page Contents</h1>
      <p>Welcome {session?.user.name ?? "Foo"}!</p>
      <SignIn />
      <SignOut />
    </div>
  );
};

export default Home;
```

# Step 7. 動作テスト

next.jsを起動します。

```
cd next-app
npm run dev
```

Webブラウザで、http://localhost:3000 にアクセスします。  
Sign inしていない状態だと、Welcomeのあとの名前が、「Foo」と表示されます。

![スクリーンショット 2024-11-15 14.39.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95285/2cd7ab81-01e1-abd7-becf-cbdfc033103d.png)

Sign inボタンを押すと、Auth0へのリンクボタンが表示されます。

![スクリーンショット 2024-11-15 14.04.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95285/91d0ef44-d403-50a0-927c-9612ba319a9f.png)

転送されたAuth0で認証が完了するとWelcomのあとに名前が表示されると思います。  
これで認証成功です。

![スクリーンショット 2024-11-15 14.41.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95285/23a72a88-fca9-32b4-e373-c100fa1f6e07.png)

コンソールにもsession情報が表示されていると思います。

![スクリーンショット 2024-11-15 14.42.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95285/7e946c32-6b21-9b0a-f4f4-c0d08f70b88c.png)

Sign outボタンを押すとsession情報が破棄されて「Welcome Foo!」に戻ると思います。

# まとめ

今回、利用したファイルの位置がわかりにくいと思ったので、簡単にまとめました。

```
next-app (Root Dirctory)
├ auth.ts
├ .env.local
├ components
│   ├ SignIn/index.tsx
│   └ SignOut/index.tsx
└ app
    ├ api/auth/[...nextauth]/route.ts
    ├ layout.tsx
    └ page.tsx
```

以上で、たぶん最短の手順になるNextAuth v5の設定方法をまとめてみました。 

どなたかのお役にたてれば、幸いです。