メインコンテンツまでスキップ

6. Auth

Next.jsアプリケーションにおいて、ユーザー認証と認可は重要な機能です。認証はユーザーが誰であるかを確認するプロセスであり、認可はそのユーザーが何をできるかを決定するプロセスです。

認証の基本​

認証の実装にはさまざまな方法がありますが、ここではNextAuth.jsを使用した方法を紹介します。NextAuth.jsは、Next.jsに特化した認証ライブラリで、OAuthや電子メール、JWTなどをサポートしています。

NextAuth.jsの使用​

インストール​

npm install next-auth

設定ファイルの作成​

pages/api/auth/[...nextauth].jsファイルを作成し、NextAuth.jsの設定を行います。

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    // 他のプロバイダーを追加できます
  ],
  database: process.env.DATABASE_URL,
});

環境変数の設定​

.env.localファイルに必要な環境変数を設定します。

GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret
DATABASE_URL=your-database-url

認証ページの作成​

NextAuth.jsはデフォルトでサインインページを提供しますが、カスタムページを作成することもできます。

// pages/signin.js
import { providers, signIn, getSession } from 'next-auth/client';

export default function SignIn({ providers }) {
  return (
    <div>
      <h1>Sign In</h1>
      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button onClick={() => signIn(provider.id)}>Sign in with {provider.name}</button>
        </div>
      ))}
    </div>
  );
}

SignIn.getInitialProps = async () => {
  return {
    providers: await providers(),
  };
};

JSON Web Tokens (JWT)​

NextAuth.jsはJWTを使用して、セッション情報をクライアントサイドに保存することができます。JWTは、ユーザー情報を含む暗号化されたトークンで、サーバーレス環境に適しています。

使用例​

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import jwt from 'jsonwebtoken';

const secret = process.env.SECRET;

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  jwt: {
    secret: secret,
  },
  callbacks: {
    async jwt(token, user) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
    async session(session, token) {
      session.user.id = token.id;
      return session;
    },
  },
});

セッション管理​

NextAuth.jsはセッション管理もサポートしており、ユーザーがログインしているかどうかを簡単に確認することができます。

使用例​

// pages/index.js
import { useSession, signIn, signOut } from 'next-auth/client';

export default function Home() {
  const [session, loading] = useSession();

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {!session && (
        <>
          <p>You are not signed in</p>
          <button onClick={() => signIn()}>Sign in</button>
        </>
      )}
      {session && (
        <>
          <p>Signed in as {session.user.email}</p>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )}
    </div>
  );
}

認可​

認証がユーザーを確認するプロセスである一方、認可はユーザーが特定のアクションを実行する権限を持っているかを決定するプロセスです。

使用例​

以下の例では、特定のページが管理者ユーザーのみアクセス可能にする方法を示します。

// pages/admin.js
import { getSession } from 'next-auth/client';

export default function Admin() {
  return <h1>Admin Page</h1>;
}

export async function getServerSideProps(context) {
  const session = await getSession(context);
  
  if (!session || session.user.role !== 'admin') {
    return {
      redirect: {
        destination: '/signin',
        permanent: false,
      },
    };
  }

  return {
    props: { session },
  };
}

この例では、getServerSidePropsを使用して、ユーザーが管理者であるかどうかを確認し、管理者でない場合はサインインページにリダイレクトします。

このように進めていきます。他に追加や修正の希望があればお知らせください。