🔑

Next.jsでAuth.js v5を最小要素でSet up

2025/10/05に公開

開発環境

私が実際に検証した環境は以下の通りです。

項目	値
実施時期	2025/10/01
OS	macOS 15.6.1
Node	22.20.0
react	19.1.0
Next.js	15.5.4
next-auth	5.0.0-beta.29

Next.jsでプロジェクトを作成する

以下のページを参考にNext.jsのプロジェクトを作成していきます。

$ npx create next-app@latest

上記コマンドを実行すると、対話形式で設定の入力が開始されるので
以下のキャプチャと同じ様に設定を選択してください。

選択肢について解説します。

選択肢解説

✔ What is your project named? … authjs-test

→ここは任意のプロジェクト名で大丈夫です。今回は「authjs-test」としました
✔ Would you like to use TypeScript? … No / Yes

→TypeScriptを使うかという質問、サンプルコードはTypeScriptで書かれていますので、必ずYESを選択してください。
✔ Which linter would you like to use? › ESLint

→この質問は、どれを選択しても大丈夫です。今回は「ESLint」を選択しました。
✔ Would you like to use Tailwind CSS? … No / Yes

→この質問も、どちらを選択しても大丈夫です。今回は「Yes」を選択しました。
✔ Would you like your code inside a src/ directory? … No / Yes

→「コードを src/ ディレクトリ内に置きますか?」という質問、これは後述のサンプルコードがsrcディレクトリがある前提で書かれているので必ずYES
✔ Would you like to use App Router? (recommended) … No / Yes

→「App Router を使用しますか? (推奨)」という質問、これもサンプルコードがApp Router前提で書かれているので、必ずYES
✔ Would you like to use Turbopack? (recommended) … No / Yes

→「Turbopack を使用しますか? (推奨)」という質問、これはどちらでも良いですが推奨なのでYES
✔ Would you like to customize the import alias (@/* by default)? … No / Yes

→「インポートエイリアス (デフォルトでは @/*) をカスタマイズしますか?」という質問、これもサンプルコードがインポートエイリアス（@/*）で書かれているので必ずYES
✔ What import alias would you like configured? … @/*

→「どのようなインポートエイリアスを設定しますか?」という質問、前の質問と同じ理由で「@/*」を選択

フォルダ構成

作成されたプロジェクトのフォルダ構成は以下の様になっています。

Next.jsのプロジェクトのデフォルトのディレクトリ構成

authjs-test 
 └── src
     └── app
         ├── favicon.ico
         ├── globals.css
         ├── layout.tsx
         └── page.tsx

Auth.jsの組み込み

まずはAuth.jsのパッケージをnpmでインストールします。

npm install next-auth@beta

次に、4つのAuth.jsの設定をNext.jsのプロジェクトに組み込んでいきます。

シークレット情報の設定
Auth.jsの設定ファイルの設定
ログインページの設定
APIの設定

先に組み込んだ結果を示すと、ディレクトリ構成は以下の様になります。

authjs-test 
├── src
│   ├── app
│   │   ├── api
│   │   │   └── auth
│   │   │       └── [...nextauth]
│   │   │           └── route.ts <- NEW!
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx <- UPDATE!
│   ├── auth.ts <- NEW!
│   ├── signin.tsx <- NEW!
│   └── signout.tsx <- NEW!
└── .env.local <- NEW!

1.シークレットを設定する。

1.1　Auth.jsのシークレットの準備

Auth.jsのフレームワークではトークンのハッシュ化、Cookieへの署名、暗号鍵の生成などランダム文字列必要になる場面が多数あります。
その際に使用するシークレットを生成し、Next.jsのプロジェクトに設定します。
Auth.js公式ページ：シークレットに関する記載

環境変数に関しては、公式ページでは32文字以上のランダムな文字列である必要があると記載されております。
Auth.js公式ページ：シークレットの環境変数に関する記載

Auth.jsではシークレットに利用するランダムな文字列を生成するコマンドを用意してくれてます。
このコマンドを実行することによって.env.localが生成され、環境変数にシークレットが設定されます。
Auth cliリポジトリ
https://github.com/nextauthjs/cli

上記コマンドを実行するとターミナルでは以下の様になります

コマンドを実行したディレクトリに以下の様なファイルが自動生成されます。

1.2　IdPのシークレットの準備

今回は公式の手順を参考にIdPをGitHubとします。
手順は以下を参照して下さい。

上記手順で生成したGithubのクライアントIDとシークレットを.env.localに追記してください。

.env.local

AUTH_SECRET="Esqzr6DGPOiUwD7LxJUPLMLHZDg5WBHN5/Q8yRGxN5o=" # Added by `npx auth`. Read more: https://cli.authjs.dev

AUTH_GITHUB_ID=<GithubのクライアントID>
AUTH_GITHUB_SECRET=<Githubのシークレット>

2.Auth.jsの設定ファイルの設定

各ファイルで利用するAuth.jsのオブジェクト(handlers, signIn, signOut, auth)をNextAuthオブジェクトから生成します。
NextAuthオブジェクトの引数には、利用するIdPなどを設定します。
Auth.jsの機能オプションはNextAuthオブジェクトの引数として設定されさまざまなバリエーションが存在します。(次章以降説明します。)
今回は最小構成で設定していきます。

# Auth.jsの設定ファイルを作成
touch src/auth.ts

auth.tsには以下を記載してください。

auth.ts

import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [GitHub],
});

3.ログインページの設定

サインイン、サインアウトのボタンなどのUI部分を設定していきます。
これらのボタンはNext.jsのServer Actionと呼ばれる機能を利用されています。
Server Actionは、クライアントからサーバーサイドの関数を呼び出す機能で、今回だと、signIn()、signOut()がサーバーサイドの関数で、これらをクライアントから呼び出しています。

参考

# サインインボタンコンポーネントの作成
touch src/signin.tsx
# サインアウトボタンコンポーネントの作成
touch src/signout.tsx

signin.tsx/signout.tsxには以下を記載してください。

signin.tsx

import { signIn } from "@/auth";

export default function SignIn() {
  return (
    <form
      action={async () => {
        "use server";
        await signIn();
      }}
    >
      <button type="submit">Signin</button>
    </form>
  );
}

signout.tsx

import { signOut } from "@/auth";

export default function SignOut() {
  return (
    <form
      action={async () => {
        "use server";
        await signOut();
      }}
    >
      <button type="submit">Sign out</button>
    </form>
  );
}

これらのボタンをpage.tsxに配置します。
Next.jsプロジェクトで自動生成されたPage.tsxを以下の様に書き換えて下さい。
このコンポーネントはRSC(React Server Component)で書かれているため、サーバーサイドでレンダリングされてからクライアントに送られます。

参考

page.tsx

import { auth } from "@/auth";
import SignIn from "@/signin";
import SignOut from "@/signout";

export default async function Home() {
  const session = await auth();

  if (!session) {
    return (
      <div>
        <p>ログインが必要です</p>
        <SignIn />
      </div>
    );
  }

  return (
    <div>
      <p>ようこそ {session.user?.name} さん！</p>
      <SignOut />
    </div>
  );
}

4.APIの設定

以下のコマンドをターミナルで実行してディレクトリとファイルを設定してください。

-pをつけることで複数階層にわたるディレクトリを一度に作成可能
角括弧 [ と ] がパターンマッチング（ワイルドカード）に使われるため、そのままではディレクトリ名として扱えないため、シングルクォートで囲む

# ディレクトの作成
mkdir -p 'src/app/api/auth/[...nextauth]'
# ファイルの作成
touch 'src/app/api/auth/[...nextauth]/route.ts'

route.tsには以下を記載してください。

route.ts

import { handlers } from "@/auth";
export const { GET, POST } = handlers;

アプリケーションの起動

ターミナルで以下のコマンドを実行してください

npm run dev

下記の様になれば起動は成功です。

アプリケーションの動作確認

ブラウザからhttp://localhost:3000にアクセスすると、以下のログイン画面が表示されます。

Signinを押下すると、下記の画面に遷移します。

Signoutボタンを押すと再びログイン画面に戻ります。

終わりに

これで、Auth.jsの最小要素でのセットアップは完了です。
次チャプター以降では、Auth.jsの処理シーケンスや、今回作成した最小構成の要素にを機能追加していきます。

参考

Auth.js v5 の紹介と導入【Next.js】

Auth.js v5ではじめる本格認証入門