From f34c8295d57a6597c6e046a8dd76769fd3967f5c Mon Sep 17 00:00:00 2001 From: Gyanesh Gouraw Date: Thu, 18 Dec 2025 17:31:16 +0530 Subject: [PATCH 1/2] feat: add methods to access Auth0 domain and client ID in Auth0Provider --- EXAMPLES.md | 28 ++++++++++++++++++++++++++-- __tests__/auth-provider.test.tsx | 15 +++++++++++++++ src/auth0-context.tsx | 24 ++++++++++++++++++++++++ src/auth0-provider.tsx | 12 ++++++++++++ 4 files changed, 77 insertions(+), 2 deletions(-) diff --git a/EXAMPLES.md b/EXAMPLES.md index fcefdc28..f284f72e 100644 --- a/EXAMPLES.md +++ b/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 ``` -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. \ No newline at end of file +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 ( +
+

Auth0 Configuration

+

Domain: {getDomain()}

+

Client ID: {getClientId()}

+ {isAuthenticated &&

Logged in as: {user.name}

} +
+ ); +}; + +export default ConfigDisplay; +``` \ No newline at end of file diff --git a/__tests__/auth-provider.test.tsx b/__tests__/auth-provider.test.tsx index 2a3685da..794e9da5 100644 --- a/__tests__/auth-provider.test.tsx +++ b/__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( diff --git a/src/auth0-context.tsx b/src/auth0-context.tsx index ba3407cc..832a9c66 100644 --- a/src/auth0-context.tsx +++ b/src/auth0-context.tsx @@ -241,6 +241,28 @@ export interface Auth0ContextInterface * 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, }; /** diff --git a/src/auth0-provider.tsx b/src/auth0-provider.tsx index 54eb5451..dea44d74 100644 --- a/src/auth0-provider.tsx +++ b/src/auth0-provider.tsx @@ -159,6 +159,10 @@ const Auth0Provider = (opts: Auth0ProviderOptions, initialAuthState as AuthState); 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 = (opts: Auth0ProviderOptions domainRef.current, []); + + const getClientId = useCallback(() => clientIdRef.current, []); + const contextValue = useMemo>(() => { return { ...state, @@ -357,6 +365,8 @@ const Auth0Provider = (opts: Auth0ProviderOptions(opts: Auth0ProviderOptions{children}; From e8552cd517a632fbfc5df8003e2cce5caa9ec037 Mon Sep 17 00:00:00 2001 From: Gyanesh Gouraw Date: Thu, 18 Dec 2025 18:00:09 +0530 Subject: [PATCH 2/2] feat: update examples and documentation for accessing Auth0 configuration --- EXAMPLES.md | 25 ++++++++++++------------- src/auth0-context.tsx | 21 +++++++-------------- 2 files changed, 19 insertions(+), 27 deletions(-) diff --git a/EXAMPLES.md b/EXAMPLES.md index f284f72e..a2d48dea 100644 --- a/EXAMPLES.md +++ b/EXAMPLES.md @@ -98,7 +98,7 @@ const Posts = () => { }; export default Posts; - +``` ## Custom token exchange Exchange an external subject token for Auth0 tokens using the token exchange flow (RFC 8693): @@ -741,24 +741,23 @@ You can now [call the API](#calling-an-api) with your access token and the API c ## 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: +Access the Auth0 domain and client ID that were configured in the `Auth0Provider`: ```jsx import React from 'react'; import { useAuth0 } from '@auth0/auth0-react'; -const ConfigDisplay = () => { - const { getDomain, getClientId, isAuthenticated, user } = useAuth0(); +const MyComponent = () => { + const { getDomain, getClientId } = useAuth0(); - return ( -
-

Auth0 Configuration

-

Domain: {getDomain()}

-

Client ID: {getClientId()}

- {isAuthenticated &&

Logged in as: {user.name}

} -
- ); + const domain = getDomain(); + const clientId = getClientId(); + + // Use domain and clientId as needed + // ... + + return
{/* Your component */}
; }; -export default ConfigDisplay; +export default MyComponent; ``` \ No newline at end of file diff --git a/src/auth0-context.tsx b/src/auth0-context.tsx index 832a9c66..57493113 100644 --- a/src/auth0-context.tsx +++ b/src/auth0-context.tsx @@ -243,24 +243,17 @@ export interface Auth0ContextInterface 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. - */ + * + * Returns the Auth0 domain configured in the Auth0Provider. + * **Use Cases:** + * - Advanced integrations requiring the tenant domain + * + * @returns The Auth0 domain (e.g., "tenant.auth0.com") + */ 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; }