feat: Add support for custom headers (#1155)

Author: subhankarmaiti

EXAMPLES.md

@@ -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)
@@ -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

README.md

@@ -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>
 
@@ -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:

src/auth/__tests__/index.spec.js

@@ -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', () => {
@@ -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');
+    });
+  });
 });