@ecommerce-platform/auth-provider

A reusable React authentication provider for ecommerce micro-frontend applications with MSAL (Azure AD B2C) support.

Installation

``bash
npm install @ecommerce-platform/auth-provider
`

Features

- 🔐 MSAL (Azure AD B2C) integration
- 🔄 Token broadcast for micro-frontend synchronization
- 🛠️ Debug mode with preset tokens for development
- ⚛️ React Query integration
- 🎣 Convenient auth hooks

Usage

$3

`tsx
import { EcommerceAuthProvider, useAuth } from '@ecommerce-platform/auth-provider';

const msalConfig = {
clientId: 'your-client-id',
authority: 'https://your-tenant.b2clogin.com/your-tenant.onmicrosoft.com/B2C_1_signupsignin',
knownAuthorities: ['your-tenant.b2clogin.com'],
};

function App() {
return (



);
}
`

$3

`tsx
import { useAuth } from '@ecommerce-platform/auth-provider';

function UserProfile() {
const { user, isAuthenticated, isLoading, login, logout } = useAuth();

if (isLoading) {
return

`tsx
msalConfig={msalConfig}
debug={{
logging: true,
presetToken: 'dev-token-123',
presetUser: {
id: 'dev-user-1',
email: 'dev@example.com',
displayName: 'Dev User',
},
}}
>


`

$3

If your application already has MSAL and QueryClient providers:

`tsx
import { MsalProvider } from '@azure/msal-react';
import { QueryClientProvider } from '@tanstack/react-query';
import { InternalAuthProvider } from '@ecommerce-platform/auth-provider';

function App() {
return (







);
}
`

API Reference

$3

#### EcommerceAuthProvider

Main authentication provider that includes MSAL, QueryClient, and auth context.

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| msalConfig | MsalConfigOptions | Yes | MSAL configuration options |
| debug | DebugOptions | No | Debug options for development |
| children | ReactNode | Yes | Child components |

#### InternalAuthProvider

Internal provider without MSAL/QueryClient wrappers. Use when you have existing providers.

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| debug | DebugOptions | No | Debug options for development |
| children | ReactNode | Yes | Child components |

$3

#### useAuth()

Main hook to access authentication context.

`tsx
const {
user, // AuthUser | null
isAuthenticated,// boolean
isLoading, // boolean
accessToken, // string | null
error, // Error | null
login, // () => Promise
logout, // () => Promise
getAccessToken, // () => Promise
isTokenExpired, // () => boolean
isDebugMode, // boolean
} = useAuth();
`

#### Additional Hooks

- useLogin() - Login functionality
- useLogout() - Logout functionality
- useAccessToken() - Get access token
- useIsAuthenticated() - Check authentication status
- useCurrentUser() - Get current user
- useAuthLoading() - Get loading state
- useUserDisplayName() - Get user display name
- useUserEmail() - Get user email

$3

#### MsalConfigOptions

`typescript
interface MsalConfigOptions {
clientId: string;
authority: string;
knownAuthorities?: string[];
redirectUri?: string;
postLogoutRedirectUri?: string;
scopes?: string[];
}
`

#### DebugOptions

`typescript
interface DebugOptions {
logging?: boolean;
presetToken?: string;
presetUser?: Partial;
env?: 'development' | 'staging' | 'production';
}
`

#### AuthUser

`typescript
interface AuthUser {
id: string;
username: string;
displayName: string;
email?: string;
firstName?: string;
lastName?: string;
accountInfo?: AccountInfo;
claims?: Record;
}
`

Token Broadcasting

The package includes token broadcasting for micro-frontend synchronization:

`tsx
// In host app - broadcast token updates
import { broadcastToken } from '@ecommerce-platform/auth-provider';

broadcastToken(accessToken, tokenExpiry);

// In remote modules - subscribe to broadcasts
import { useTokenBroadcastSubscription } from '@ecommerce-platform/auth-provider';

function RemoteModule() {
const { token, tokenExpiry } = useTokenBroadcastSubscription();
// Token updates automatically received from host
}
`

Development

`bash


Install dependencies

`bash


Build and publish

License

MIT