NextAuth.js v4 の新しい更新: 知っておくべきこと

認証は、アプリケーション開発の重要なコンポーネントです。ユーザー データを保護し、悪意のあるアクティビティを防止するのに役立ちます。簡単に言えば、ユーザー ID の信頼性を判断し、許可されたユーザーのみがアプリケーションとそのリソースにアクセスできるようにします。

カスタム認証システムの作成は時間のかかる作業になる可能性があり、ここで NextAuth.js が役に立ちます。Next.js フレームワークで構築されたアプリケーションに安全な認証サポートを提供します。

NextAuth.js とは?

NextAuth.jsは、Next.js アプリケーションの認証と承認のサポートを提供するオープンソースの軽量ライブラリです。これにより、開発者は Next.js アプリの認証と承認をすばやく簡単に設定できます。複数のプロバイダーによる認証、電子メール、パスワードレス認証などの機能を提供します。

NextAuth.js は認証でどのように機能しますか?

NextAuth.js の認証ソリューションは、Next.js アプリケーションに統合できるクライアント側 API を提供します。これを使用して、アカウントを作成したさまざまなサインイン プロバイダーでユーザーを認証できます。

内部では、ユーザーはプロバイダーのサインイン ページにリダイレクトされます。認証が成功すると、プロバイダーはユーザーのペイロードを含むセッション データを返します。このペイロードは、アプリケーションとそのリソースへのアクセスを承認できます。

NextAuth.js (v4) の新機能の更新

2022 年 12 月、NextAuth.js は 4 番目のバージョンをリリースしました。このバージョンは、以前のバージョンである v3 から改善され、新しい更新と変更が加えられています。変更は主に、認証プロセスでのライブラリの使用方法の改善に焦点を当てています。

1. useSession フックの更新

useSession フックを使用して、ユーザーがサインインしているかどうかを確認できます。この新しいバージョンでは、useSession フックは、status オプションの追加により、状態をテストするためのより簡単な方法を提供するオブジェクトを返します。以下のコードを参照してください。

import { useSession } from "next-auth/react"


export default function Component() {
    const { data: session, status } = useSession()

    return <p> Not signed in </p>
}

2. SessionProvider コンテキストが必須になる

新しいバージョン 4 では、SessionProvider コンテキストの使用が義務付けられています。これは、アプリを useSession プロバイダーでラップする必要があることを意味します。NextAuth.js では、アプリを_app.jsxファイル内にラップすることをお勧めします。

さらに、clientMaxAge メソッドは refetchInterval に置き換えられました。これにより、バックグラウンドで定期的にセッションを取得することが容易になります。

import { SessionProvider } from "next-auth/react"


export default function App({
    Component, pageProps: { session,. ..pageProps },
}) {
    return (
        <SessionProvider session={session} refetchInterval={5 * 60}>
        <Component {...pageProps} /> </SessionProvider>
    )
}

3. プロバイダを個別にインポートする

NextAuth.js は、ユーザーのサインインに使用できるいくつかのプロバイダー サービスを提供します。それらには以下が含まれます：

• 組み込みの OAuth プロバイダー (GitHub、Google など) を使用する。
• 電子メール プロバイダーの使用。

この新しいバージョンでは、各プロバイダーを個別にインポートする必要があります。

import GoogleProvider from "next-auth/providers/google"
import Auth0Provider from "next-auth/providers/auth0";

4. その他のマイナーチェンジ

• クライアント側のインポートは、next-auth/client から next-auth/react に名前が変更されました。
• コールバック メソッドの引数の変更: signIn({ user, account, profile, email, credentials })
session({ session, token, user })
jwt({ token, user, account, profile, isNewUser })

認証で NextAuth.js を使い始める

NextAuth.js を Next.js アプリケーションに統合するには、次の手順に従います。

1. 次のコマンドを実行して、Next.js アプリケーションを作成します: npx create-next-app <app name>
2. ターミナルでnpm install next-authを実行して、NextAuth.js アプリケーションに NextAuth.js をインストールします。
3. NextAuth.js の公式ドキュメントにアクセスし、サポートされているリストから希望のプロバイダーを選択してください。次に、選択したプロバイダーの開発者コンソールでアカウントを作成し、Next.js アプリケーションを登録します。
4. 選択したプロバイダーの開発者コンソールで、ホーム ルート URLとコールバック リダイレクト URLを指定し、変更を保存してClientIDとClient Secretをコピーします。
5. Next.js アプリケーションのルート ディレクトリに、. Client IDとClient Secretを保持する env ファイル。
6. 最後に、/pages/api ディレクトリにauthという名前の新しいフォルダーを作成します。auth フォルダーに新しいファイルを作成し、[…nextauth].js という名前を付けます。作成したファイルに、以下のコードを追加します。このコードは、Google プロバイダーを使用した NextAuth.js クライアント側 API を示しています。

import GoogleProvider from "next-auth/providers/google";


providers: [
    GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET
   })
]

これで、ログイン認証ページを作成できます。ログイン コンポーネントの DOM レンダリングを次に示します。

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


export default function Component() {
  const { data: session } = useSession()

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

useSessionフックは、現在のユーザー セッション オブジェクトにアクセスします。ユーザーがサインインして Google によって認証されると、ユーザー ペイロードを含むセッション オブジェクトが返されます。これにより、Next.js はアプリのクライアント側 (この場合は電子メール) でユーザーの詳細をレンダリングできます。

カスタム認証システムと NextAuth.js などのすぐに使えるソリューション

カスタム認証システムを構築するか、NextAuth.js などのすぐに使用できる認証ソリューションを統合するかを選択するには、各ソリューションのコスト、複雑さ、およびセキュリティを考慮することが重要です。

カスタム認証システムを開発するためのリソースと専門知識がある場合は、それが最適なアプローチかもしれません。ただし、実装が簡単で、安全で、費用対効果の高いすぐに使えるソリューションを探している場合は、NextAuth.js を検討することをお勧めします。最終的に、選択はニーズと好みによって異なります。