Profile Component

A pre-built React component for displaying and managing authenticated user profile information. This component provides a ready-to-use UI for showing user details with minimal setup.

Basic Usage

import { Profile } from 'authsafe-react';

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

Props

Property	Type	Required	Description
`-`	`-`	-	This component does not accept any props. It automatically uses the authenticated user's data from the AuthProvider context.

Features

The Profile component automatically displays:

User's profile picture
Full name
Email address
Email verification status
User ID (sub claim)
Additional user claims from the ID token

Customization

While the Profile component provides a default UI, you can build your own custom profile display using the useAuth hook:

import { useAuth } from 'authsafe-react';

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

  if (!isAuthenticated) {
    return <div>Please log in to view your profile</div>;
  }

  return (
    <div className="custom-profile">
      <img src={user?.picture} alt={user?.name} />
      <h2>{user?.name}</h2>
      <p>{user?.email}</p>
      {user?.email_verified && <span>✓ Verified</span>}
    </div>
  );
}

Complete Example

import { Profile, useAuth } from 'authsafe-react';

function UserDashboard() {
  const { isAuthenticated, isLoading } = useAuth();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!isAuthenticated) {
    return <div>Please log in to view your profile</div>;
  }

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

Styling

The Profile component uses Material-UI components and can be styled using the MUI theming system. Wrap your app with a custom theme to customize the appearance:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Profile } from 'authsafe-react';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Profile />
    </ThemeProvider>
  );
}

User Data Structure

The Profile component displays data from the User object:

interface User {
  sub: string;              // Unique user identifier
  name?: string;            // User's full name
  email?: string;           // User's email address
  picture?: string;         // Profile picture URL
  email_verified?: boolean; // Email verification status
  [key: string]: any;       // Additional claims
}

Requirements

The Profile component must be used within an AuthProvider
The user must be authenticated to use this component
The component requires access to the authentication context via useAuth hook

Best Practices

Always check authentication state before rendering the Profile component
Show a loading state while user data is being fetched
Handle cases where user data might be incomplete
Consider building custom profile components for specific use cases
Use the useAuth hook for more control over profile display

Related Hooks

useAuth() - Access user data and authentication state
useLogin() - Initiate authentication flow
useLogout() - Sign out the current user