Profile

Pre-built profile component that displays user information and provides account management features.

Basic Usage

import { Profile } from 'authsafe-react';

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

Features

The Profile component includes the following features out of the box:

User avatar display with initials fallback
Full name and email display
Email verification status indicator
MFA management with TOTP and Email OTP
Customizable branding (theme, colors, logo)
Loading and error states

Customization

Customize the Profile component by passing your own branding configuration:

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>
  );
}

Requirements

AuthProvider must be present in the component tree
User must be authenticated
Branding configuration is optional but recommended

Best Practices

Fetch branding server-side for optimal rendering performance
Provide custom error and loading elements for a branded experience
Use the Profile component for quick integration
Build custom profile pages with useAuth() and useMfa() hooks for full control
The Profile component is responsive and works on desktop, tablet, and mobile

Related Hooks

useAuth() — useAuth — Access authentication state
useLogin() — useLogin — Trigger login flow
useLogout() — useLogout — Trigger logout flow

Customization

Customize the Profile component by passing your own branding configuration:

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>
  );
}

Requirements

AuthProvider must be present in the component tree
User must be authenticated
Branding configuration is optional but recommended

Best Practices

Fetch branding server-side for optimal rendering performance
Provide custom error and loading elements for a branded experience
Use the Profile component for quick integration
Build custom profile pages with useAuth() and useMfa() hooks for full control
The Profile component is responsive and works on desktop, tablet, and mobile