Auth.jsでGithubログインを実装する

React(Next.js15)でAuth.jsを使いGithubアカウントでログインする処理を作成したときの記録です

バージョン

React 18.3.1

Next.js 15.2.1

Auth.js(next-auth) 5.0.0-beta.25

ディレクトリ構成

最終的なディレクトリ構成としては以下のようになる想定です

手順

auth.jsのインストール

まずは以下のコマンドでAuth.jsをインストールします

npm install next-auth@beta

.env.localの作成

次に以下のコマンドで.env.localを作成します

npx auth secret

作成された.env.localにGithub用の情報を追記します

AUTH_SECRET="***"

# 以下2行を追加
AUTH_GITHUB_ID="***"
AUTH_GITHUB_SECRET="***"

AUTH_GITHUB_IDとAUTH_GITHUB_SECRETの取得方法はGithubにログイン後、Settings → Developer settings → GitHub Apps → New GitHub Appをクリックします

必要な情報を入力していきます、後から変更も可能です

• GitHub App Nameは分かりやすいもの
• Homepage URLはとりあえず http://localhost:3000
• Callback URLは http://localhost:3000/api/auth/callback/github
• Webhookのactiveは現時点では不要なのでチェックを外す

これでCreate GitHub Appをクリックします

次の画面で表示されるClient IDがAUTH_GITHUB_ID、Generate a new client secretをクリックした後に表示されるClient secretの文字列がAUTH_GITHUB_SECRETとなるのでそれぞれ設定します

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],
});

nextauthのroute.tsを作成

次にapiのルートとして/app/api/auth/[...nextauth]のフォルダを作り、[...nextauth]フォルダ配下に以下のようなroute.tsを作成します

/app/api/auth[...nextauth]/route.ts

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

ログイン画面とログイン後画面の作成

最後にログインボタンを置く画面とリダイレクト用の画面を作成します

ログイン画面 (/app/page.tsx)

import { signIn } from "@/auth";

export default function Page() {
  return (
    <form
      action={async () => {
        "use server";
        await signIn("github", { redirectTo: "/info" });
      }}
    >
      <button type="submit">GitHubでログイン</button>
    </form>
  );
}

redirectToにログイン後に遷移させたい画面のルートを設定しています

今回はログイン後に/app/info/page.tsxに遷移するようにします

ログイン後画面 (/app/info/page.tsx)

import { auth } from "@/auth";

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

  if (!session) {
    return <p>ログインしていません</p>;
  }

  return (
    <>
      <div>名前： {session.user?.name}</div>
      <div>
        アイコン:
        <img src={session.user?.image ?? ""} alt="User Avatar" width={50} />
      </div>
    </>
  );
}

正しくログインができていれば以下のように表示されるはずです！