frontend-comps

Reusable React UI + authentication library for Strategy& / PwC internal apps.

• React 18+, Tailwind v4, react-router v6+
• Branded Microsoft sign-in flow via MSAL (opt-in)
• Zero-config dark/light tokens

npm install frontend-comps

Peer dependencies (auto-installed on npm ≥7 / pnpm ≥8): react, react-dom, react-router-dom, lucide-react, @azure/msal-browser, @azure/msal-react.

Import the stylesheet once in your app entry:

import 'frontend-comps/styles.css';

Authentication (Microsoft / Azure AD) — quick start

Three components cover the full flow:

| Component | Role | |---|---| | <AuthShell> | Creates the MSAL instance, handles the redirect promise, mounts MsalProvider + AuthProvider. Wrap your app in this. | | <LoginPage> | Branded Strategy& login screen (logo baked in). Renders a "Sign in with Microsoft" button. | | <AuthGate> | Route guard. Redirects unauthenticated users to your login path and validates tokens silently. |

Minimal setup

// src/main.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthShell, AuthGate, LoginPage } from 'frontend-comps';
import 'frontend-comps/styles.css';
import App from './App';

export default function Root() {
  return (
    <BrowserRouter>
      <AuthShell
        clientId={import.meta.env.VITE_AZURE_CLIENT_ID}
        tenantId={import.meta.env.VITE_AZURE_TENANT_ID}
      >
        <Routes>
          <Route
            path="/login"
            element={
              <LoginPage
                productName="Edwin AI"
                tagline="AI-powered presentation platform"
              />
            }
          />
          <Route
            path="/*"
            element={
              <AuthGate redirectTo="/login">
                <App />
              </AuthGate>
            }
          />
        </Routes>
      </AuthShell>
    </BrowserRouter>
  );
}

Add the two env vars to your .env:

VITE_AZURE_CLIENT_ID=<your Azure AD app registration client ID>
VITE_AZURE_TENANT_ID=<your Azure AD tenant ID>

Reading the current user

import { useAuth } from 'frontend-comps';

function UserMenu() {
  const { user, isAuthenticated, signOut } = useAuth();
  if (!isAuthenticated) return null;
  return (
    <div>
      <span>Hi {user?.name}</span>
      <button onClick={signOut}>Sign out</button>
    </div>
  );
}

<LoginPage> props

All branding is prop-driven; only productName / tagline are project-specific.

| Prop | Default | Notes | |---|---|---| | productName | (none) | Bold accent-colored text in the heading. Heading is hidden if omitted. | | tagline | (none) | Subtitle below the heading. | | headingPrefix | "Welcome to " | Text before productName. | | logoSrc | bundled Strategy& PNG | Override to use a different logo. | | logoAlt, logoHeight | sensible defaults | | | accentColor / accentColorLight | #8E1E1E / #a82828 | Used for the button gradient + product name. | | backgroundGradient | light pink gradient | Full CSS gradient string. | | buttonLabel / signingInLabel | "Sign in with Microsoft" / "Signing in..." | | | dividerText | "Secured by Microsoft Azure AD" | | | footerText | "Part of the PwC network" | | | buttonIcon | Microsoft tiles SVG | Any ReactNode. | | loginRequest | defaultLoginRequest | { scopes: string[] } — see below. | | postLoginRedirect | "/" | Path navigated to after successful auth. | | fadeDurationMs | 600 | Fade animation before redirect. |

<AuthShell> props

| Prop | Default | Notes | |---|---|---| | clientId | required | Azure AD app (client) ID. | | tenantId | required | Azure AD tenant ID. | | redirectUri | window.location.origin | Override login redirect URI. | | postLogoutRedirectUri | window.location.origin | Override logout redirect URI. | | cacheLocation | "localStorage" | Or "sessionStorage". | | storeAuthStateInCookie | false | Enable for IE / cross-tab edge cases. | | navigateToLoginRequestUrl | false | Whether MSAL navigates back to the original URL after login. | | loginRequest | defaultLoginRequest | Forwarded to AuthProvider. | | postLogoutRedirect | "/login" | Where signOut() sends the user. | | loadingFallback | simple centered text | Shown while MSAL initializes. | | onInitError | (none) | Called if MSAL init fails. |

<AuthGate> props

| Prop | Default | Notes | |---|---|---| | children | required | Rendered when authenticated. | | redirectTo | "/login" | Navigated to when unauthenticated. | | loginRequest | defaultLoginRequest | Scopes used for silent token check. | | LoadingComponent | simple centered text | Shown while the guard checks auth. | | onAuthenticated | (none) | Callback fired with the active account on success. |

Requesting custom scopes

import { AuthShell, createLoginRequest } from 'frontend-comps';

const loginRequest = createLoginRequest([
  'openid', 'profile', 'email',
  'User.Read', 'Mail.Read',
]);

<AuthShell clientId={...} tenantId={...} loginRequest={loginRequest}>
  ...
</AuthShell>

Lower-level escape hatch

If you need to build the MSAL instance yourself (e.g. custom logger, special interaction type), use createMsalConfig + the standard @azure/msal-* packages directly, and then wrap your tree in AuthProvider from this library to get the useAuth hook.

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { AuthProvider, createMsalConfig } from 'frontend-comps';

const instance = new PublicClientApplication(createMsalConfig({ clientId, tenantId }));
await instance.initialize();

<MsalProvider instance={instance}>
  <AuthProvider>…</AuthProvider>
</MsalProvider>

UI components

All components are exported from the package root.

Chat

• <Messages>, <Message> — conversation rendering
• <InputBar> — message composer with file attachments
• <FilesPreview> — attached-file thumbnails

Header

• <Header> — app top bar (title + action slot)

Buttons

• <SendButton>, <NewChatButton>
• <CopyButton>, <DownloadButton>
• <LogoutButton>, <ThemeToggleButton>

Design tokens

Theme CSS variables live in src/styles/theme.css and are exposed at two export paths:

import 'frontend-comps/tokens';
// or (explicit path)
import 'frontend-comps/styles.css';

Importing styles.css gives you the full stack: Tailwind v4, theme, base, animations, utilities, component classes. tokens is just the CSS variables if you want to bring your own reset.

Development

npm install
npm run build    # produces dist/index.es.js, dist/index.cjs.js, dist/frontend-comps.css

License

MIT