認証プロバイダー

アプリケーションをラップし、すべてのコンポーネントに認証状態を提供するReactコンテキストプロバイダー。

概要

AuthProvider コンポーネントは、認証状態を管理し、トークンの自動更新を処理し、フックを介してすべての子コンポーネントに認証メソッドを提供する React コンテキストを作成します。クライアント側のすべてのフック (useAuth、useSession、useMfa) は、コンポーネントツリーに AuthProvider が存在することを前提としています。

基本的な使い方

import { AuthProvider } from 'authsafe-nextjs';

export default function RootLayout({ children }) {
  return (
    <AuthProvider
      config={{
        clientId: process.env.NEXT_PUBLIC_AUTHSAFE_CLIENT_ID,
        domain: process.env.NEXT_PUBLIC_AUTHSAFE_DOMAIN,
      }}
    >
      {children}
    </AuthProvider>
  );
}

ベストプラクティス

ハイドレーション中の認証のちらつきを避けるため、常にinitialSessionを渡してください。
ルートレイアウトで initAuthSafe() を使用してサーバー側で初期化します。
トークン管理をスムーズに行うには、自動更新を有効にしてください。

概要

基本的な使い方

import { AuthProvider } from 'authsafe-nextjs';

export default function RootLayout({ children }) {
  return (
    <AuthProvider
      config={{
        clientId: process.env.NEXT_PUBLIC_AUTHSAFE_CLIENT_ID,
        domain: process.env.NEXT_PUBLIC_AUTHSAFE_DOMAIN,
      }}
    >
      {children}
    </AuthProvider>
  );
}

ベストプラクティス

ハイドレーション中の認証のちらつきを避けるため、常にinitialSessionを渡してください。
ルートレイアウトで initAuthSafe() を使用してサーバー側で初期化します。
トークン管理をスムーズに行うには、自動更新を有効にしてください。