Skip to content
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,3 +96,97 @@ To read this license, please see [LICENSE.md](https://github.com/amp-labs/react/
## Local Development

Please see [CONTRIBUTING.md](https://github.com/amp-labs/react/blob/main/CONTRIBUTING.md).

# AmpersandProvider with JWT Token Support

The `AmpersandProvider` now supports both API key and JWT token authentication methods.

## Usage

### API Key Authentication (Existing)

```tsx
import { AmpersandProvider } from './AmpersandContextProvider';

function App() {
return (
<AmpersandProvider
options={{
apiKey: "your-api-key-here",
project: "your-project-id"
}}
>
{/* Your app components */}
</AmpersandProvider>
);
}
```

### JWT Token Authentication (New)

```tsx
import { AmpersandProvider } from './AmpersandContextProvider';

function App() {
const getToken = async (consumerRef: string, groupRef: string): Promise<string> => {
// Your custom token retrieval logic here
// This could involve calling your auth service, checking sessionStorage, etc.
const response = await fetch('/api/auth/token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ consumerRef, groupRef }),
});

const data = await response.json();
return data.token;
};

return (
<AmpersandProvider
options={{
getToken,
project: "your-project-id"
}}
>
{/* Your app components */}
</AmpersandProvider>
);
}
```

## Features

### JWT Token Caching

The JWT token provider automatically caches tokens in both memory and sessionStorage:

- **Memory Cache**: Fast access for the current session
- **sessionStorage**: Persistence across browser tabs/windows within the same session
- **Automatic Expiration**: Tokens are automatically refreshed when they expire
- **Cache Key**: Tokens are cached using the pattern `{consumerRef}:{groupRef}`

### Authentication Methods

The provider supports two mutually exclusive authentication methods:

1. **API Key**: Traditional API key authentication
2. **JWT Token**: Dynamic token retrieval with caching

You cannot use both methods simultaneously - the provider will throw an error if both `apiKey` and `getToken` are provided.

### Error Handling

- If neither `apiKey` nor `getToken` is provided, the provider will throw an error
- If both are provided, the provider will throw an error
- JWT token retrieval failures are properly handled and logged

## API Service Integration

The `useAPI` hook automatically detects which authentication method is available and configures the API service accordingly:

- **API Key**: Uses `X-Api-Key` header
- **JWT Token**: Uses `Authorization: Bearer {token}` header

The API service will automatically retrieve fresh tokens when needed, handling the caching and refresh logic transparently.