Auth.js 何番煎じか分からないが、改めてOAuthを解説する（実践編）

はじめに

この記事の目的

• OAuthを実際のアプリケーションで実装する方法を知る
• Auth.jsの使い方を知る

想定される読者

• OAuthを実際のアプロケーションで実践してみたい人
• Auth.jsを使ってみたい人
• 基礎・概念編を読みを得て実践してみたい人

解説すること

• Auth.jsの使い方

解説しないこと

• OAuthが誕生した歴史
• OAuthについての概念的な説明
• ※ 上記は概念編で解説しています。
  Auth.js 何番煎じか分からないが、改めてOAuthを解説する（基礎・概念編）

私からの勧め

実践編を読む前に、Auth.js 何番煎じか分からないが、改めてOAuthを解説する（基礎・概念編）を読むことをお勧めします。

私の失敗談
私の失敗談として、いきなりライブラリを使って実装しようとしても仕組みがわからず混乱した過去がありました。動くものは作れるけど、なぜ動くのかはわからないというのはちょっと怖いですね。得にOAuthは認可に関わる部分なのでしっかり理解したいところです。
また、ライブラリの中で何が行われているのかを把握することで、自分が今している作業に自信を持って開発できるようになります。

前提条件

本記事はNext.jsでAuth.jsを使用してGitHubのOAuth連携をすることを目標とします。
読者は以下の知識があることが望ましいです。

• OAuth2.0に関する知識
• Next.jsの知識
• GitHubの知識

環境構築

Next.jsの立ち上げ,ライブラリの準備, 雛形コードの作成を行います。

Auth.jsとは?

公式から引用

Auth.js は、標準の Web API に基づくランタイムに依存しないライブラリであり、複数の最新の JavaScript フレームワークと緊密に統合され、簡単に開始でき、拡張が容易で、常にプライベートかつ安全な認証エクスペリエンスを提供します。

OAuthを使った認証をアプリ側で楽に実装するためのライブラリです。
OAuthを実現するには複数のステップが存在しますが、その辺をいい感じに自動化してくれます。

Auth.jsが解決する範囲

一旦OAuthのステップを確認してみましょう。

1. ユーザーがクライアント上で操作を行う(ログインボタンを押す) 
2. クライアントはユーザーを認可サーバーへリダイレクトする(ログインページ表示)
3. ユーザーは認可サーバーでログインし、権限付与に同意する
4. 認可サーバーは認可コードを付与してクライアントへリダイレクトする
5. クライアントは認可コードを使ってアクセストークンを要求する
6. 認可サーバーはアクセストークンを発行する
7. クライアントはアクセストークンを使ってAPIへアクセスする

OAuthは「第三者に限定的な権限を安全に委譲する仕組み」ですので2 ~ 6番までです。
このうちAuth.jsは2 ~ 6番全てを自動化します。
※ 細かく見ると認可コードやアクセストークンの発行は連携先のProvider(GitHub等)の認可サーバーが担当します。
私たちが自前でやるのは、連携したいProvider(Github)に対して認証Appを作成することと、Auth.jsの軽い設定Auth.jsから提供されるSignInを呼び出すButtonを用意することくらいです。

実践

ここからOAuthを使ってGithubの情報を使えるようにします。

手順

まずはこの先の手順を先に確認しておきます。

- GitHubでOAuth Appを作成
- Next.jsの環境構築
- Auth.jsのインストールと設定
- Auth.jsを使用してログイン・ログアウトを実装

GitHubにOAuth Appを作成

まずは今回連携するGitHubに対してOAuth認証用のAppを登録します。
自分のGitHubアカウントを開いて以下の手順で進めてください。

右上のアイコン → Settings → Developer settings → OAuth Apps

以下のようなページが表示されたら正解です。 (まだTestAppはないと思います)

New OAuth Appを押して新しいAppを追加します。

項目	説明
Application name	今回作成するOAuth Appの名前
Homepage URL	自分が開発するアプリのroot urlを設定します。 今回はlocal環境とします
Application description	名の通り説明です。 今回はスキップします
Authorization callback URL	ユーザーがProviderの情報を使用することに許可を出した後に飛ぶURL。この際に認可コードも一緒に送る。 Auth.jsではこの認可コードを使用してAccessTokenの取得を自動で行ってくれる

Next.jsの環境構築

以下のコマンドでNext.jsを立ち上げてください。 今回はTypeScript, App Routerで進めます。指示に従って選択肢を選んでください。 ※ Yes, use recommended defaultsが表示された方はそれを選んでおけばOKです。

$ npx create-next-app

一部デフォルトの内容を削除して綺麗にしておきます。

page.tsx

export default function Home() {
  return <div></div>;
}

globacl.css

@import "tailwindcss";

Auth.jsのインストールと設定

$ npm install next-auth@beta

暗号化に使用するためのランダム文字列を作成

# 公式に載っているnpm install next-auth@betaは私が試した時点では不具合があるようでした
$ openssl rand -base64 32

opensslで作成した値をAUTH_SECRETに、それ以外はGitHubでOAuth Appを作成して得られる情報を記入

.env

AUTH_SECRET=xxxxxxxxxxxxxxxxxxxx
AUTH_GITHUB_ID=xxxxxxxxxxxxxxxxxxxx
AUTH_GITHUB_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

アプリのrootにauth.jsを用意

./auth.js

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

// signIn, signOutもexportsuru
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],// ProviderはGithubを利用
});

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    domains: [
      "avatars.githubusercontent.com", // GitHub のユーザーアバター
    ],
  },
};

export default nextConfig;

callback用のrootの作成

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

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

Auth.jsを使用してログイン・ログアウトを実装

components/Signin.tsx

import { signIn } from "@/auth";

export default function SignIn() {
  return (
    <form
      action={async () => {
        "use server";
        await signIn("Github");
      }}
    >
      <button
        type="submit"
        className="border solid bg-green-200 cursor-pointer"
      >
        Signin with GitHub
      </button>
    </form>
  );
}

components/Signout.tsx

import { signOut } from "@/auth";

export default function SignOut() {
  return (
    <form
      action={async () => {
        "use server";
        await signOut();
      }}
    >
      <button type="submit" className="border solid bg-red-200 cursor-pointer">
        Signout
      </button>
    </form>
  );
}

page.tsx

import { auth } from "@/auth";
import SignIn from "@/components/Signin";
import SignOut from "@/components/Signout";
import Image from "next/image";

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

  const username = session?.user?.name ?? "Guest";
  const email = session?.user?.email ?? "No Email";
  const imagePath = session?.user?.image;

  return (
    <>
      <p>名前: {username}</p>
      <p>メール: {email}</p>
      {imagePath && (
        <Image src={imagePath} alt="User Image" width={50} height={50} />
      )}
      <SignIn />
      <SignOut />
    </>
  );
}

ここまででnpx run devで以下のような表示になるはずです。
Signinを押すとGitHubの認証ページに飛び、ログインすることが可能です。ログイン後は名前、メール、写真が表示されます。

おわりに

何番煎じか分からないが、改めてOAuthを解説する(基礎・概念編)に続き、Auth.jsを使った具体的なステップも紹介しました。
OAuthは具体的なTODOよりも、誕生した歴史的背景や、解決する問題、内部で行われているステップを把握する実装のイメージがすきやすいです。　ぜひ基礎・概念編も読んでみてください。 そっちがメインです。