feat: add methods to access Auth0 domain and client ID in Auth0Provider

Author: gyaneshgouraw-okta

EXAMPLES.md

@@ -11,6 +11,7 @@
 - [Device-bound tokens with DPoP](#device-bound-tokens-with-dpop)
 - [Using Multi Resource Refresh Tokens](#using-multi-resource-refresh-tokens)
 - [Connect Accounts for using Token Vault](#connect-accounts-for-using-token-vault)
+- [Access Auth0 Configuration](#access-auth0-configuration)
 
 ## Use with a Class Component
 
@@ -97,7 +98,6 @@ const Posts = () => {
 };
 
 export default Posts;
-```
 
 ## Custom token exchange
 
@@ -737,4 +737,28 @@ When the redirect completes, the user will be returned to the application and th
 </Auth0Provider>
 ```
 
-You can now [call the API](#calling-an-api) with your access token and the API can use [Access Token Exchange with Token Vault](https://auth0.com/docs/secure/tokens/token-vault/access-token-exchange-with-token-vault) to get tokens from the Token Vault to access third party APIs on behalf of the user.
+You can now [call the API](#calling-an-api) with your access token and the API can use [Access Token Exchange with Token Vault](https://auth0.com/docs/secure/tokens/token-vault/access-token-exchange-with-token-vault) to get tokens from the Token Vault to access third party APIs on behalf of the user.
+
+## Access Auth0 Configuration
+
+Access the Auth0 domain and client ID that were configured in the `Auth0Provider`. This is useful when building UI components that need access to the configuration without requiring it to be passed as props:
+
+```jsx
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+const ConfigDisplay = () => {
+  const { getDomain, getClientId, isAuthenticated, user } = useAuth0();
+
+  return (
+    <div>
+      <h3>Auth0 Configuration</h3>
+      <p>Domain: {getDomain()}</p>
+      <p>Client ID: {getClientId()}</p>
+      {isAuthenticated && <p>Logged in as: {user.name}</p>}
+    </div>
+  );
+};
+
+export default ConfigDisplay;
+```

__tests__/auth-provider.test.tsx

@@ -134,6 +134,21 @@ describe('Auth0Provider', () => {
     });
   });
 
+  it('should expose getDomain and getClientId methods', async () => {
+    const opts = {
+      clientId: 'test-client-id',
+      domain: 'test-domain.auth0.com',
+    };
+    const wrapper = createWrapper(opts);
+    const { result } = renderHook(() => useAuth0(), {
+      wrapper,
+    });
+    await waitFor(() => {
+      expect(result.current.getDomain()).toBe('test-domain.auth0.com');
+      expect(result.current.getClientId()).toBe('test-client-id');
+    });
+  });
+
   it('should check session when logged out', async () => {
     const wrapper = createWrapper();
     const { result } = renderHook(

src/auth0-context.tsx

@@ -241,6 +241,28 @@ export interface Auth0ContextInterface<TUser extends User = User>
    * Check the `EXAMPLES.md` file for a deeper look into this method.
    */
   createFetcher: Auth0Client['createFetcher'];
+
+  /**
+   * ```js
+   * const domain = auth0.getDomain();
+   * ```
+   *
+   * Returns the Auth0 domain that was configured in the Auth0Provider.
+   * This is useful for UI components that need to access the domain without
+   * requiring it to be passed as a prop.
+   */
+  getDomain: () => string;
+
+  /**
+   * ```js
+   * const clientId = auth0.getClientId();
+   * ```
+   *
+   * Returns the Auth0 client ID that was configured in the Auth0Provider.
+   * This is useful for UI components that need to access the client ID without
+   * requiring it to be passed as a prop.
+   */
+  getClientId: () => string;
 }
 
 /**
@@ -270,6 +292,8 @@ export const initialContext = {
   setDpopNonce: stub,
   generateDpopProof: stub,
   createFetcher: stub,
+  getDomain: stub,
+  getClientId: stub,
 };
 
 /**

src/auth0-provider.tsx

@@ -159,6 +159,10 @@ const Auth0Provider = <TUser extends User = User>(opts: Auth0ProviderOptions<TUs
   const [state, dispatch] = useReducer(reducer<TUser>, initialAuthState  as AuthState<TUser>);
   const didInitialise = useRef(false);
 
+  // Store domain and clientId for later access
+  const domainRef = useRef(clientOpts.domain);
+  const clientIdRef = useRef(clientOpts.clientId);
+
   const handleError = useCallback((error: Error) => {
     dispatch({ type: 'ERROR', error });
     return error;
@@ -341,6 +345,10 @@ const Auth0Provider = <TUser extends User = User>(opts: Auth0ProviderOptions<TUs
     [client]
   );
 
+  const getDomain = useCallback(() => domainRef.current, []);
+
+  const getClientId = useCallback(() => clientIdRef.current, []);
+
   const contextValue = useMemo<Auth0ContextInterface<TUser>>(() => {
     return {
       ...state,
@@ -357,6 +365,8 @@ const Auth0Provider = <TUser extends User = User>(opts: Auth0ProviderOptions<TUs
       setDpopNonce,
       generateDpopProof,
       createFetcher,
+      getDomain,
+      getClientId,
     };
   }, [
     state,
@@ -373,6 +383,8 @@ const Auth0Provider = <TUser extends User = User>(opts: Auth0ProviderOptions<TUs
     setDpopNonce,
     generateDpopProof,
     createFetcher,
+    getDomain,
+    getClientId,
   ]);
 
   return <context.Provider value={contextValue}>{children}</context.Provider>;