Skip to main content

​
Overview

The UserContext provides centralized user authentication state management for the CicloVital application. It maintains the current user’s data and automatically persists it to localStorage for session continuity.

​
Context Shape

interface UserContextValue {
  user: User | null;
  setUser: (user: User | null) => void;
}

​
Properties

​
user
User | null
The current authenticated user object, or null if no user is logged in.
​
setUser
function
Function to update the current user. Pass null to log out.
(user: User | null) => void

​
Provider Component

​
UserProvider

Wraps your application to provide user context to all child components. 
import UserProvider from './contexts/UserProvider';

function App() {
  return (
    <UserProvider>
      {/* Your app components */}
    </UserProvider>
  );
}

​
Features

  • Automatic Persistence: User data is automatically saved to localStorage
  • Session Recovery: Loads user data from localStorage on initialization
  • Safe Storage: Includes error handling for localStorage operations
  • Logout Support: Removes data from localStorage when user is set to null

​
Usage

​
Consuming the Context

import { useContext } from 'react';
import UserContext from './contexts/UserContext';

function UserProfile() {
  const { user, setUser } = useContext(UserContext);

  if (!user) {
    return <p>Please log in</p>;
  }

  return (
    <div>
      <h2>Welcome, {user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

​
Setting User Data (Login)

function LoginComponent() {
  const { setUser } = useContext(UserContext);

  const handleLogin = async (credentials) => {
    const userData = await loginAPI(credentials);
    setUser(userData);
  };

  return (
    <button onClick={() => handleLogin({ email, password })}>
      Login
    </button>
  );
}

​
Logging Out

function LogoutButton() {
  const { setUser } = useContext(UserContext);

  const handleLogout = () => {
    setUser(null);
  };

  return <button onClick={handleLogout}>Logout</button>;
}

​
Implementation Details

​
Source Files

  • src/contexts/UserContext.js - Context definition
  • src/contexts/UserProvider.jsx - Provider implementation

​
localStorage Key

The context stores user data under the key "user" in localStorage.

​
Initial State

On mount, the provider attempts to load user data from localStorage. If no data exists or parsing fails, it defaults to null. 
const [user, setUser] = useState(() => safeGet("user", null));

​
Best Practices

Always check if user is not null before accessing user properties to avoid runtime errors.
The user object is stored in plain text in localStorage. Do not store sensitive information like passwords or tokens directly in the user object.

Build docs developers (and LLMs) love

Get started for freeTalk to us