NextAuth.js

ネクストオーセンティックジェーエス

NextAuth.js を分かりやすく

NextAuth.js（ネクストオーセンティックジェーエス）は、Next.js アプリケーションで認証と認可を簡単に実装できるように設計されたフレームワークです。OAuth プロバイダや JWT など、さまざまな認証方法に対応しており、TypeScript との統合もサポートされています。NextAuth.js を使うことで、Next.js アプリに簡単かつ迅速に認証機能を追加することができます。

NextAuth.js の導入

NextAuth.js をプロジェクトに導入するには、まず次のコマンドを実行してパッケージをインストールします。

npm install next-auth

次に、pages ディレクトリに api/auth/[...nextauth].ts という名前のファイルを作成し、以下のようなコードを追加します。

// pages/api/auth/[...nextauth].ts
import { NextApiRequest, NextApiResponse } from 'next'
import NextAuth, { InitOptions } from 'next-auth'
import Providers from 'next-auth/providers'

const options: InitOptions = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
}

export default (req: NextApiRequest, res: NextApiResponse) => NextAuth(req, res, options)

このコードでは、NextAuth.js をインポートし、Google を認証プロバイダとして設定しています。環境変数からクライアント ID とクライアントシークレットを取得しています。

認証状態の管理

NextAuth.js は、認証状態を管理するための React Hook を提供しています。これを使って、アプリケーション全体で認証状態を簡単に管理することができます。まずは、_app.tsx ファイルに Provider コンポーネントを追加して、アプリケーション全体で認証状態を共有できるようにしましょう。

// pages/_app.tsx
import type { AppProps } from 'next/app'
import { Provider } from 'next-auth/client'
import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  )
}

export default MyApp

ここで、Provider コンポーネントをインポートし、アプリケーション全体をラップしています。これにより、NextAuth.js の機能がアプリケーション全体で利用可能になります。

次に、useSession という React Hook を使って認証状態を取得し、ユーザー情報に基づいてコンポーネントを表示する方法を説明します。

// components/Profile.tsx
import { useSession } from 'next-auth/client'

const Profile = () => {
  const [session, loading] = useSession()

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

  return (
    <div>
      {session ? (
        <div>
          <h1>Welcome, {session.user.name}!</h1>
          <p>Email: {session.user.email}</p>
        </div>
      ) : (
        <div>Please sign in to view your profile.</div>
      )}
    </div>
  )
}

export default Profile

このコードでは、useSession Hook を使って認証状態とローディング状態を取得しています。ローディング中は Loading... と表示され、認証状態に応じてユーザー情報が表示されます。

認証のカスタマイズ

NextAuth.js では、認証フローをカスタマイズすることができます。例えば、ユーザーがログインした際に、カスタムイベントを実行することができます。これを行うには、pages/api/auth/[...nextauth].ts に callbacks オブジェクトを追加します。

// pages/api/auth/[...nextauth].ts
import { NextApiRequest, NextApiResponse } from 'next'
import NextAuth, { InitOptions, User } from 'next-auth'
import Providers from 'next-auth/providers'

const options: InitOptions = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async signIn(user: User) {
      // カスタムイベントを実行
      console.log('User signed in:', user)
      return true
    },
  },
}

export default (req: NextApiRequest, res: NextApiResponse) => NextAuth(req, res, options)

このコードでは、callbacks.signIn を定義して、ユーザーがログインした際にコンソールにユーザー情報が出力されるようにしています。このようにして、NextAuth.js の認証フローをカスタマイズすることができます。

セキュリティの強化

NextAuth.js では、セキュリティを強化するための設定がいくつか用意されています。例えば、JWT トークンの署名や暗号化により、トークンの安全性を向上させることができます。

まず、JWT オプションを pages/api/auth/[...nextauth].ts に追加し、秘密鍵と署名アルゴリズムを指定します。

// pages/api/auth/[...nextauth].ts
import { NextApiRequest, NextApiResponse } from 'next'
import NextAuth, { InitOptions, User } from 'next-auth'
import Providers from 'next-auth/providers'

const options: InitOptions = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  jwt: {
    secret: process.env.JWT_SECRET,
    signingKey: process.env.JWT_SIGNING_KEY,
    encryption: true,
    encryptionKey: process.env.JWT_ENCRYPTION_KEY,
    encryptionAlgorithm: 'A256GCM',
  },
  callbacks: {
    async signIn(user: User) {
      // カスタムイベントを実行
      console.log('User signed in:', user)
      return true
    },
  },
}

export default (req: NextApiRequest, res: NextApiResponse) => NextAuth(req, res, options)

ここでは、環境変数から秘密鍵、署名鍵、暗号化鍵を取得し、JWT の設定に追加しています。また、暗号化アルゴリズムとして A256GCM を指定しています。

これにより、NextAuth.js のセキュリティが強化され、より安全な認証フローが実現できます。

まとめとして、NextAuth.js を使うことで、Next.js アプリケーションに簡単かつ迅速に認証機能を追加することができます。また、TypeScript との統合がサポートされており、型安全なコードを記述することができます。これにより、堅牢でメンテナンス性の高いアプリケーションを構築することが可能になります。

Next.js を学ぶ一覧へ