propro-shared-components

propro-shared-components is a comprehensive suite of reusable React components and authentication hooks, tailored for seamless integration with a custom authentication system. It provides a consistent user interface and authentication logic across various parts of your application, such as HubHub, MapMap, ProPro-Admin, StreamBreak, StampStamp, and others.

Features

• ProProUserButton: A button component for handling user sign-in and sign-out actions.
• proproAuth: A collection of hooks and utilities for managing authentication state and logic.
• AccountManagementPopup: A component that provides a user interface for managing account details and security settings.

Installation

Install propro-shared-components with npm or yarn:

yarn add propro-shared-components
# or
npm install propro-shared-components

Usage

Below are examples and descriptions of how to use the components and hooks provided by propro-shared-components.

ProProUserButton

ProProUserButton is a customizable button for user sign-in and sign-out. It can be used as a standalone component or as a child component of ProProUserMenu.

Props

| Name | Type | Default | Description | | ----------------- | -------- | ------- | ------------------------------------------------ | | afterSignOutUrl | string | null | The URL to redirect to after the user signs out. |

Example

import React from 'react';
import { ProProUserButton } from 'propro-shared-components';

import { ProProUserButton } from 'propro-shared-components';

const Header = ({ afterSignOutUrl }) => (
  <header>
    {/* ... our other header content ... */}
    <ProProUserButton afterSignOutUrl={afterSignOutUrl} />
  </header>
);

export default Header;

proproAuth

proproAuth is a set of hooks and utilities to manage authentication state and logic.

useAuth()

useAuth() is a React hook that returns an object with the following properties:

| Name | Type | Description | | ----------------- | ---------- | ----------------------------------------- | | user | object | The user object returned by proproAuth. | | isAuthenticated | boolean | Whether the user is authenticated. | | isLoading | boolean | Whether the user is being loaded. | | signIn | function | A function to sign in the user. | | signOut | function | A function to sign out the user. | | refreshUser | function | A function to refresh the user. |

Example

import React from 'react';
import { useAuth } from 'propro-components';

const Header = ({ afterSignOutUrl }) => {
  const { user, isAuthenticated, isLoading, signIn, signOut } = useAuth();

  return (
    <header>
      {/* ... our other header content ... */}
      {isAuthenticated ? (
        <button onClick={signOut}>Sign Out</button>
      ) : (
        <button onClick={signIn}>Sign In</button>
      )}
    </header>
  );
};

export default Header;

withAuth()

withAuth() is a higher-order component that injects the proproAuth object into a component's props.

Example

import React from 'react';
import { withAuth } from 'propro-components';

const Header = ({ afterSignOutUrl, proproAuth }) => {
  const { user, isAuthenticated, isLoading, signIn, signOut } = proproAuth;

  return (
    <header>
      {/* ... our other header content ... */}
      {isAuthenticated ? (
        <button onClick={signOut}>Sign Out</button>
      ) : (
        <button onClick={signIn}>Sign In</button>
      )}
    </header>
  );
};

export default withProProAuth(Header);

AccountManagementPopup

A component that displays a modal for users to manage their account and security settings.

Props

| Name | Type | Default | Description | | --------- | ---------- | ------- | -------------------------------------------- | | user | object | null | The user object returned by proproAuth. | | onClose | function | null | A function to call when the modal is closed. |

Example

The AccountManagementPopup component can be used as a standalone component or as a child component of ProProUserMenu.

import React from 'react';
import { AccountManagementPopup } from 'propro-components';

const Header = ({ afterSignOutUrl }) => {
  const { user, isAuthenticated, isLoading, signIn, signOut } = useAuth();
  const [showAccountManagement, setShowAccountManagement] = useState(false);

  return (
    <header>
      {/* ... our other header content ... */}
      {isAuthenticated ? (
        <>
          <button onClick={signOut}>Sign Out</button>
          <button onClick={() => setShowAccountManagement(true)}>
            Manage Account
          </button>
          {showAccountManagement && (
            <AccountManagementPopup
              user={user}
              onClose={() => setShowAccountManagement(false)}
            />
          )}
        </>
      ) : (
        <button onClick={signIn}>Sign In</button>
      )}
    </header>
  );
};