Skip to content
Merged
Show file tree
Hide file tree
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
65 changes: 65 additions & 0 deletions EXAMPLES.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
- [Login with Passwordless](#login-with-passwordless)
- [Create user in database connection](#create-user-in-database-connection)
- [Using HTTPS callback URLs](#using-https-callback-urls)
- [Using Custom Headers](#using-custom-headers)
- [Set global headers during initialization](#set-global-headers-during-initialization)
- [Using custom headers with Auth0Provider component](#using-custom-headers-with-auth0provider-component)
- [Set request-specific headers](#set-request-specific-headers)
- [Management API (Users)](#management-api-users)
- [Patch user with user_metadata](#patch-user-with-user_metadata)
- [Get full user profile](#get-full-user-profile)
Expand Down Expand Up @@ -171,6 +175,67 @@ auth0.webAuth
.catch((error) => console.log(error));
```

### Using Custom Headers

You can set custom headers to be included in all requests to the Auth0 API. This can be useful for implementing custom security requirements, logging, or tracking.

#### Set global headers during initialization

Global headers are included in all requests made by the SDK:

```js
// Set global headers during Auth0 initialization
const auth0 = new Auth0({
domain: 'YOUR_AUTH0_DOMAIN',
clientId: 'YOUR_AUTH0_CLIENT_ID',
headers: {
'Accept-Language': 'fr-CA',
'X-Tracking-Id': 'user-tracking-id-123'
}
});
```


#### Using custom headers with Auth0Provider component

If you're using the hooks-based approach with Auth0Provider, you can provide headers during initialization:

```jsx
import { Auth0Provider } from 'react-native-auth0';

// In your app component
<Auth0Provider
domain={'YOUR_AUTH0_DOMAIN'}
clientId={'YOUR_CLIENT_ID'}
headers={{
'Accept-Language': 'fr-CA',
'X-App-Version': '1.2.3'
}}
>
<App />
</Auth0Provider>
```


#### Set request-specific headers

You can also provide headers for specific API calls, which will override global headers with the same name:

```js
// For specific authentication requests
auth0.auth.passwordRealm({
username: 'info@auth0.com',
password: 'password',
realm: 'myconnection',
headers: {
'X-Custom-Header': 'request-specific-value',
'X-Request-ID': 'unique-request-id-456'
}
})
.then(console.log)
.catch(console.error);
```

## Management API (Users)

### Patch user with user_metadata
Expand Down
33 changes: 33 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,26 @@ const App = () => {
export default App;
```

You can also pass custom headers that will be included in all API requests:

```js
import { Auth0Provider } from 'react-native-auth0';

const App = () => {
return (
<Auth0Provider
domain="YOUR_AUTH0_DOMAIN"
clientId="YOUR_AUTH0_CLIENT_ID"
headers={{ 'X-Custom-Header': 'custom-value' }}
>
{/* YOUR APP */}
</Auth0Provider>
);
};

export default App;
```

<details>
<summary>Using the `Auth0` class</summary>

Expand All @@ -360,6 +380,19 @@ const auth0 = new Auth0({
});
```

You can also pass custom headers that will be included in all API requests:

```js
import Auth0 from 'react-native-auth0';

const auth0 = new Auth0({
domain: 'YOUR_AUTH0_DOMAIN',
clientId: 'YOUR_AUTH0_CLIENT_ID',
headers: {
'X-Custom-Header': 'custom-value',
}
});
```
</details>

Then import the hook into a component where you want to get access to the properties and methods for integrating with Auth0:
Expand Down
54 changes: 54 additions & 0 deletions src/auth/__tests__/index.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,12 @@ describe('auth', () => {
it('should fail without domain', () => {
expect(() => new Auth({ clientId })).toThrowErrorMatchingSnapshot();
});

it('should accept custom headers', () => {
const headers = { 'X-Custom-Header': 'custom-value' };
const auth = new Auth({ baseUrl, clientId, headers });
expect(auth.client.globalHeaders).toEqual(headers);
});
});

describe('authorizeUrl', () => {
Expand Down Expand Up @@ -1053,4 +1059,52 @@ describe('auth', () => {
).resolves.toMatchSnapshot();
});
});

describe('method-specific custom headers', () => {
it('should accept and use custom headers in passwordRealm that don\'t conflict with defaults', async () => {
fetchMock.postOnce('https://samples.auth0.com/oauth/token', tokens);
const customHeaders = { 'X-Custom-Header': 'custom-value' };

await auth.passwordRealm({
username: 'info@auth0.com',
password: 'secret pass',
realm: 'Username-Password-Authentication',
headers: customHeaders
});

const [_, fetchOptions] = fetchMock.lastCall();
expect(fetchOptions.headers.get('X-Custom-Header')).toBe('custom-value');
});

it('should accept and use custom headers in userInfo that don\'t conflict with defaults', async () => {
const success = {
status: 200,
body: { sub: 'auth0|1029837475' },
headers: { 'Content-Type': 'application/json' },
};
fetchMock.getOnce('https://samples.auth0.com/userinfo', success);
const customHeaders = { 'X-Custom-Header': 'custom-value' };

await auth.userInfo({
token: 'an access token of a user',
headers: customHeaders
});

const [_, fetchOptions] = fetchMock.lastCall();
expect(fetchOptions.headers.get('X-Custom-Header')).toBe('custom-value');
});

it('should accept and use custom headers in refreshToken that don\'t conflict with defaults', async () => {
fetchMock.postOnce('https://samples.auth0.com/oauth/token', tokens);
const customHeaders = { 'X-Custom-Header': 'custom-value' };

await auth.refreshToken({
refreshToken: 'a refresh token of a user',
headers: customHeaders
});

const [_, fetchOptions] = fetchMock.lastCall();
expect(fetchOptions.headers.get('X-Custom-Header')).toBe('custom-value');
});
});
});
Loading