認証機能ライブラリ Auth.jsのOAuth認証をNext.jsで試す

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。

Auth.js

Auth.jsは、Next.jsなどのプロジェクトに認証機能を実装するライブラリになります。

元々は、NextAuth.jsという名前のライブラリでした。現在は、Next.jsに特化しているわけではなく、他のフレームワークでも使用できるのでAuth.jsに代わっています。そのため、公式サイトの遷移先のGIthubはNext Auth.jsのままだったりします。

今回はNext.jsプロジェクトで、Auth.jsの認証をSetup with OAuthチュートリアルを試してみました。

認証機能の実装

Next.jsプロジェクトの作成

Next.jsプロジェクトを作成します。

npx create next-app　sample_authjs --ts

cd sample_authjs

Auth.jsの設定

Auth.jsをインストールします。名前は、next-authのままのようです。

yarn add next-auth

pages/api配下に、auth/[...nextauth].jsを作成し、ここで、Google、GitHub、Twitterなどの使用する認証プロバイダーを指定します。

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

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
});

_app.tsxに移動し、コンポーネントをSessionProviderでラッピングします。

_app.tsx

import { SessionProvider } from "next-auth/react";
import { AppProps } from "next/app";

const App = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
};

export default App;

useSessionから認証情報、状態を取得できます。フックは、SessionProvider内のどこからでも呼び出すことができます。

statusによってログインの有無を識別し、signIn,signOut関数でログイン処理を実装します。

pages/index.tsxを以下のように変更します。signIn関数の引数にプロバイダーを指定して渡すこともできます。

pages/index.tsx

import { useSession, signIn, signOut } from "next-auth/react";

export default function CamperVanPage() {
  const { data: session, status } = useSession();
  const userEmail = session?.user?.email;

  if (status === "loading") {
    return <p>Hang on there...</p>;
  }

  if (status === "authenticated") {
    return (
      <>
        <p>Signed in as {userEmail}</p>
        <button onClick={() => signOut()}>Sign out</button>
        <img style={{ width: "400px" }} src="https://cdn.pixabay.com/photo/2017/08/11/19/36/vw-2632486_1280.png" />
      </>
    );
  }

  return (
    <>
      <p>Not signed in.</p>
      <button onClick={() => signIn("github")}>Sign in</button>
    </>
  );
}

プロバイダーの設定

次にプロバイダーの設定を行います。チュートリアルに倣って、GitHubプロバイダーを設定します。

Githubにログインして、プロフィールの[Settings]から、[Developer settings]、[OAuth Apps]へと移動します。

右上の[New OAuth App]から、OAuthの情報を登録します。

アプリケーション名などを入力し、callback URLには、以下を指定します。

http://localhost:3000/api/auth/callback/github

遷移したページでClient IDと、Client secretsをそれぞれコピーします。Client secretsは、[Generate a new client Secret]のボタンをクリックすると、表示されます。

プロジェクトに戻り、.env.localファイルを作成し環境変数を追加します。

GITHUB_ID="クライアントID"
GITHUB_SECRET="クライアントシークレット"

ローカル環境を立ち上げ、ログインできるか確認します。

yarn dev

「Sign In」ボタンから、Github認証を行います。

ログインできました。この車がどういう意味なのかは、わかりません...

Github上でも確認してみます。

まとめ

今回は、Auth.jsを使ったプロバイダー認証を試してみました。基本的な機能しか実装していませんが、シンプルで使いやすかったです。今後は、セッション情報の格納なども試したいと思います。

ではまた。