プロファイルコンポーネント

プロファイルの詳細とセキュリティ設定用のタブを備えた、フル機能のプロファイル管理UI。

概要

Profileコンポーネントは、すぐに使用できるカスタマイズ可能なプロファイルページです。ユーザープロファイル情報の表示、メール認証ステータス、MFA管理を含むセキュリティ設定、カスタマイズ可能なブランディング、および読み込み/エラー状態が含まれます。最適なパフォーマンスを実現するため、ブランディングデータはサーバー側で取得します。

基本的な使い方

import { Profile } from 'authsafe-nextjs';
import { getBranding } from 'authsafe-nextjs/server';

export default async function ProfilePage() {
  const branding = await getBranding(
    process.env.NEXT_PUBLIC_AUTHSAFE_CLIENT_ID
  );

  return <Profile branding={branding} />;
}

ベストプラクティス

最適なレンダリングパフォーマンスを実現するため、ブランディングデータをサーバー側で取得する
ブランド化されたローディング/エラー状態のために、カスタムのerrorElementとfallbackElementを渡してください。
完全にカスタマイズ可能なプロファイルページを作成するには、useAuth() および useMfa() フックを使用してください。

概要

基本的な使い方

import { Profile } from 'authsafe-nextjs';
import { getBranding } from 'authsafe-nextjs/server';

export default async function ProfilePage() {
  const branding = await getBranding(
    process.env.NEXT_PUBLIC_AUTHSAFE_CLIENT_ID
  );

  return <Profile branding={branding} />;
}

ベストプラクティス

最適なレンダリングパフォーマンスを実現するため、ブランディングデータをサーバー側で取得する
ブランド化されたローディング/エラー状態のために、カスタムのerrorElementとfallbackElementを渡してください。
完全にカスタマイズ可能なプロファイルページを作成するには、useAuth() および useMfa() フックを使用してください。