React Global Context

[jphill19]

Issue: Create UserLoggedContext to Manage Authentication State

Description

To manage the authentication state effectively, create a UserLoggedContext that stores the JWT token and associated user roles. This will allow the application to determine whether a user is logged in and provide secure, centralized access to this state across the React application.

The UserLoggedContext should be placed in a dedicated folder named context under src to ensure a clean and modular structure.

Acceptance Criteria

• Implement a UserLoggedContext using React's createContext API.
• Provide a UserLoggedProvider component to wrap the application and manage the authentication state.
• Include the following state and methods:
  • isUserLogged: Boolean indicating whether the user is logged in.
  • token: The JWT token.
  • roles: Array of roles associated with the user.
  • setUserLogged(token: string, roles: string[]): Sets the logged-in state.
  • clearUserLogged(): Clears the logged-in state.
• Ensure all child components of the UserLoggedProvider can access the context.
• Provide a custom hook, useUserLogged, for consuming the context.

Tasks

1. Create a context folder under src and add a file named UserLoggedContext.js.
2. Implement the following in UserLoggedContext.js:
   • UserLoggedProvider to manage and provide the authentication state.
   • useUserLogged custom hook for accessing the context.
3. Update App.js to wrap the application with the UserLoggedProvider.
4. Test the implementation in a sample component to ensure:
   • The user can log in and the state updates correctly.
   • The user roles and token are accessible across components.
   • The state clears when the user logs out.
5. Document how to use the UserLoggedContext in other components.

Implementation

Folder Structure

src/
  context/
      UserLoggedContext.js
   components/
   App.js
   index.js

Code: UserLoggedContext.js

Below is some sample code as to how the structure would look, since this is a newly introduced concept

import React, { createContext, useState, useContext } from 'react';

// Create Context
const UserLoggedContext = createContext();

// Provider Component
export const UserLoggedProvider = ({ children }) => {
  const [isUserLogged, setIsUserLogged] = useState(false);
  const [token, setToken] = useState(null);
  const [roles, setRoles] = useState([]);

  // Function to set the logged-in state
  const setUserLogged = (newToken, userRoles) => {
    setIsUserLogged(true);
    setToken(newToken);
    setRoles(userRoles);
  };

  // Function to clear the logged-in state
  const clearUserLogged = () => {
    setIsUserLogged(false);
    setToken(null);
    setRoles([]);
  };

  // Context value
  const value = {
    isUserLogged,
    token,
    roles,
    setUserLogged,
    clearUserLogged,
  };

  return (
    <UserLoggedContext.Provider value={value}>
      {children}
    </UserLoggedContext.Provider>
  );
};

// Custom Hook for accessing the context
export const useUserLogged = () => {
  const context = useContext(UserLoggedContext);
  if (!context) {
    throw new Error('useUserLogged must be used within a UserLoggedProvider');
  }
  return context;
};

Wrap the application with the UserLoggedProvider:

import React from 'react';
import { UserLoggedProvider } from './context/UserLoggedContext';
import SomeComponent from './components/SomeComponent';

function App() {
  return (
    <UserLoggedProvider>
      <SomeComponent />
    </UserLoggedProvider>
  );
}

export default App;

[DRIF7ER]

Create UserLoggedContext Update

Description

This is the preliminary plan for the UserLoggedContext. I've been able to get the skeleton hooked up and laid out as outlined above. I have not yet tested the access in other components as I am trying to understand the JWT token stuff.

Acceptance Criteria

• Implement a UserLoggedContext using React's createContext API.
• Provide a UserLoggedProvider component to wrap the application and manage the authentication state.
• Include the following state and methods:
  • isUserLogged: Boolean indicating whether the user is logged in.
  • token: The JWT token.
  • roles: Array of roles associated with the user.
  • setUserLogged(token: string, roles: string[]): Sets the logged-in state.
  • clearUserLogged(): Clears the logged-in state.
  • Ensure all child components of the UserLoggedProvider can access the context.
  • Provide a custom hook, useUserLogged, for consuming the context.

Tasks

• 1. Create a context folder under src and add a file named UserLoggedContext.tsx.
• 2. Implement the following in UserLoggedContext.tsx:
  • UserLoggedProvider to manage and provide the authentication state.
  • useUserLogged custom hook for accessing the context.
• 3. Update App.tsx to wrap the application with the UserLoggedProvider.
• 4. Test the implementation in a sample component to ensure:
  • The user can log in and the state updates correctly.
  • The user roles and token are accessible across components.
  • The state clears when the user logs out.
• 5. Document how to use the UserLoggedContext in other components.