プロフィール

ユーザー情報を表示し、アカウント管理機能を提供する、あらかじめ構築されたプロファイルコンポーネント。

基本的な使い方

import { Profile } from 'authsafe-react';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Profile />
    </div>
  );
}

特徴

Profileコンポーネントには、以下の機能が標準で含まれています。

ユーザーアバター表示（イニシャル表示の代替）
氏名とメールアドレスの表示
メール認証ステータスインジケーター
TOTPとメールOTPによるMFA管理
カスタマイズ可能なブランディング（テーマ、カラー、ロゴ）
ロード状態とエラー状態

カスタマイズ

独自のブランディング設定を渡すことで、プロファイルコンポーネントをカスタマイズできます。

import { useAuth } from 'authsafe-react';

function CustomProfile() {
  const { user, isAuthenticated } = useAuth();

  if (!isAuthenticated) return null;

  return (
    <div>
      <img src={user?.picture} alt={user?.name} />
      <h2>{user?.name}</h2>
      <p>{user?.email}</p>
    </div>
  );
}

要件

AuthProviderはコンポーネントツリー内に存在する必要があります
ユーザーは認証される必要があります
ブランディング設定は任意ですが推奨します

ベストプラクティス

最適なレンダリングパフォーマンスを実現するために、ブランディング情報をサーバー側で取得します。
ブランド体験のためのカスタムエラー要素と読み込み要素を提供する
プロファイルコンポーネントを使用して、迅速な統合を実現します。
useAuth() および useMfa() フックを使用してカスタムプロファイルページを構築し、完全な制御を実現します。
Profileコンポーネントはレスポンシブデザインで、デスクトップ、タブレット、モバイル端末で動作します。

関連フック

useAuth() — useAuth — アクセス認証状態
useLogin() — useLogin — ログインフローをトリガーする
useLogout() — useLogout — ログアウトフローをトリガーする

特徴

Profileコンポーネントには、以下の機能が標準で含まれています。

ユーザーアバター表示（イニシャル表示の代替）

氏名とメールアドレスの表示

メール認証ステータスインジケーター

TOTPとメールOTPによるMFA管理

カスタマイズ可能なブランディング（テーマ、カラー、ロゴ）

ロード状態とエラー状態

カスタマイズ

独自のブランディング設定を渡すことで、プロファイルコンポーネントをカスタマイズできます。

import { useAuth } from 'authsafe-react';

function CustomProfile() {
  const { user, isAuthenticated } = useAuth();

  if (!isAuthenticated) return null;

  return (
    <div>
      <img src={user?.picture} alt={user?.name} />
      <h2>{user?.name}</h2>
      <p>{user?.email}</p>
    </div>
  );
}

要件

AuthProviderはコンポーネントツリー内に存在する必要があります
ユーザーは認証される必要があります
ブランディング設定は任意ですが推奨します

ベストプラクティス

最適なレンダリングパフォーマンスを実現するために、ブランディング情報をサーバー側で取得します。
ブランド体験のためのカスタムエラー要素と読み込み要素を提供する
プロファイルコンポーネントを使用して、迅速な統合を実現します。
useAuth() および useMfa() フックを使用してカスタムプロファイルページを構築し、完全な制御を実現します。
Profileコンポーネントはレスポンシブデザインで、デスクトップ、タブレット、モバイル端末で動作します。