GitHubを使ったOAuth

このチュートリアルでは、GitHubでログインできるように、Next.jsアプリケーションにAuth.jsを設定します。

Auth.jsの設定

Auth.jsとNext.jsのインストール

このチュートリアルでは、デフォルトのAuth.jsとNext.jsのサンプルアプリを使用します。既存のNext.jsアプリが既にある場合は、それも機能するはずです。ない場合は、リポジトリをクローンしてください

git clone https://github.com/nextauthjs/next-auth-example.git && cd next-auth-example

サンプルアプリを使用している場合、Auth.jsは既にインストールされています。そうでない場合は、インストール手順に従ってください。

サーバー設定の作成

次に、Auth.jsに必要な設定と動的ルートハンドラーを含む、Auth.jsのメイン設定ファイルを作成します。

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
 
export const { handlers, auth } = NextAuth({
  providers: [GitHub],
})

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers
export const runtime = "edge" // optional

これはキャッチオール動的ルートであるため、関連するすべてのAuth.js APIルートに応答し、アプリケーションはOAuth 2プロトコルを使用して選択したOAuthプロバイダーと対話できます。

環境変数の追加

インストールセクションで説明されているように、.env.localファイルを作成し、次の2つのGitHub変数を追加します

AUTH_SECRET="changeMe"
 
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=

GitHubでアプリケーションを登録したら、AUTH_GITHUB_IDとAUTH_GITHUB_SECRETにGitHubデベロッパーポータルからの適切な値を入力します。

アプリの登録

GitHubでのOAuthアプリの作成

GitHubから必要な認証情報を取得するには、開発者設定でアプリケーションを作成する必要があります。

設定 → 開発者 → OAuthアプリにあるGitHub開発者設定に移動し、「新しいOAuthアプリ」をクリックします

次に、アプリケーションを登録するための画面が表示されます。必要なすべてのフィールドに入力してください。

デフォルトのコールバックURLは、一般的に[origin]/api/auth/callback/[provider]の形式になりますが、使用しているフレームワークによってデフォルトがわずかに異なります。

// Local
http://localhost:3000/api/auth/callback/github
 
// Prod
https://app.company.com/api/auth/callback/github

// Local
http://localhost:3000/auth/callback/github
 
// Prod
https://app.company.com/auth/callback/github

// Local
http://localhost:3000/auth/callback/github
 
// Prod
https://app.company.com/auth/callback/github

// Local
http://localhost:3000/auth/callback/github
 
// Prod
https://app.company.com/auth/callback/github

必要なフィールドをすべて入力したら、「アプリケーションの登録」を押します。

シークレット

アプリケーションの登録が完了すると、GitHubに必要な詳細が表示されます。

この画面からは、クライアントIDとクライアントシークレットの2つが必要です。

クライアントIDは常に表示されます。これは、GitHub内でのOAuthアプリケーションのパブリック識別子です。

クライアントシークレットを取得するには、「新しいクライアントシークレットを生成する」をクリックする必要があります。これにより、最初のクライアントシークレットが作成されます。最初のクライアントシークレットが漏洩、紛失などした場合に備えて、ここで簡単に新しいクライアントシークレットを作成できます。

すべてを連携させる

必要なクライアントIDとクライアントシークレットを取得したので、それらを先ほど作成した.env.localファイルに貼り付けます。

AUTH_SECRET="changeMe"
 
AUTH_GITHUB_ID={clientId}
AUTH_GITHUB_SECRET={clientSecret}

すべての準備が整ったので、ローカル開発サーバーを起動してログインプロセスをテストできます。

npm run dev

pnpm run dev

yarn dev

bun run dev

http://localhost:3000に移動します。次のページが表示されます

「サインイン」をクリックすると、デフォルトのAuth.jsサインインページにリダイレクトされます。必要に応じて、このページをカスタマイズできます。次に、「GitHubでサインイン」をクリックします。Auth.jsはGitHubにリダイレクトし、GitHubはアプリケーションを認識して、資格情報を入力することで新しいアプリケーションへの認証を確認するようにユーザーに求めます。

認証されると、GitHubはユーザーをアプリにリダイレクトし、Auth.jsが残りの処理を行います

ここにリダイレクトされた場合は、すべてがうまくいったことを意味します！ユーザーがGitHub経由でアプリケーションにログインできるように、OAuth認証フロー全体が完了しました！

デプロイ

アプリを本番環境にリリースする前に、いくつかの変更を行う必要があります。

残念ながら、GitHubは1つのアプリケーションに複数のコールバックURLを登録できないプロバイダーの1つです。したがって、前に行ったように、GitHubのダッシュボードで別のアプリケーションを登録する必要がありますが、コールバックURLをアプリケーションの本番ドメイン（例：https://example.com/api/auth/callback/github）に設定する必要があります。次に、ホスティングプロバイダーのダッシュボード（Vercel、Netlify、Cloudflareなど）または本番環境で環境変数を管理する方法を通じて、本番環境に追加する必要がある新しいクライアントIDとクライアントシークレットも取得します。

詳細については、デプロイメントページを参照してください。