Interface Auth0ProviderOptions

The main configuration to instantiate the Auth0Provider.

interface Auth0ProviderOptions {
    auth0Client?: {
        env?: {
            [key: string]: string;
        };
        name: string;
        version: string;
    };
    authorizationParams?: AuthorizationParams;
    authorizeTimeoutInSeconds?: number;
    cache?: ICache;
    cacheLocation?: CacheLocation;
    children?: ReactNode;
    clientId: string;
    context?: Context<Auth0ContextInterface<User>>;
    cookieDomain?: string;
    domain: string;
    httpTimeoutInSeconds?: number;
    issuer?: string;
    leeway?: number;
    legacySameSiteCookie?: boolean;
    nowProvider?: (() => number | Promise<number>);
    onRedirectCallback?: ((appState?, user?) => void);
    sessionCheckExpiryDays?: number;
    skipRedirectCallback?: boolean;
    useCookiesForTransactions?: boolean;
    useFormData?: boolean;
    useRefreshTokens?: boolean;
    useRefreshTokensFallback?: boolean;
    workerUrl?: string;
}

Hierarchy

  • Auth0ClientOptions
    • Auth0ProviderOptions

Properties

auth0Client? authorizationParams? authorizeTimeoutInSeconds? cache? cacheLocation? children? clientId context? cookieDomain? domain httpTimeoutInSeconds? issuer? leeway? legacySameSiteCookie? nowProvider? onRedirectCallback? sessionCheckExpiryDays? skipRedirectCallback? useCookiesForTransactions? useFormData? useRefreshTokens? useRefreshTokensFallback? workerUrl?

Properties

Optional Internal auth0Client

auth0Client?: {
    env?: {
        [key: string]: string;
    };
    name: string;
    version: string;
}

Internal property to send information about the client to the authorization server.

Type declaration

  • Optional env?: {
        [key: string]: string;
    }
    • [key: string]: string
  • name: string
  • version: string

Optional authorizationParams

authorizationParams?: AuthorizationParams

URL parameters that will be sent back to the Authorization Server. This can be known parameters defined by Auth0 or custom parameters that you define.

Optional authorizeTimeoutInSeconds

authorizeTimeoutInSeconds?: number

A maximum number of seconds to wait before declaring background calls to /authorize as failed for timeout Defaults to 60s.

Optional cache

cache?: ICache

Specify a custom cache implementation to use for token storage and retrieval. This setting takes precedence over cacheLocation if they are both specified.

Optional cacheLocation

cacheLocation?: CacheLocation

The location to use when storing cache data. Valid values are memory or localstorage. The default setting is memory.

Read more about changing storage options in the Auth0 docs

Optional children

children?: ReactNode

The child nodes your Provider has wrapped

clientId

clientId: string

The Client ID found on your Application settings page

Optional context

context?: Context<Auth0ContextInterface<User>>

Context to be used when creating the Auth0Provider, defaults to the internally created context.

This allows multiple Auth0Providers to be nested within the same application, the context value can then be passed to useAuth0, withAuth0, or withAuthenticationRequired to use that specific Auth0Provider to access auth state and methods specifically tied to the provider that the context belongs to.

When using multiple Auth0Providers in a single application you should do the following to ensure sessions are not overwritten:

  • Configure a different redirect_uri for each Auth0Provider, and set skipRedirectCallback for each provider to ignore the others redirect_uri
  • If using localstorage for both Auth0Providers, ensure that the audience and scope are different for so that the key used to store data is different

For a sample on using multiple Auth0Providers review the React Account Linking Sample

Optional cookieDomain

cookieDomain?: string

The domain the cookie is accessible from. If not set, the cookie is scoped to the current domain, including the subdomain.

Note: setting this incorrectly may cause silent authentication to stop working on page load.

To keep a user logged in across multiple subdomains set this to your top-level domain and prefixed with a . (eg: .example.com).

domain

domain: string

Your Auth0 account domain such as 'example.auth0.com', 'example.eu.auth0.com' or , 'example.mycompany.com' (when using custom domains)

Optional httpTimeoutInSeconds

httpTimeoutInSeconds?: number

Specify the timeout for HTTP calls using fetch. The default is 10 seconds.

Optional issuer

issuer?: string

The issuer to be used for validation of JWTs, optionally defaults to the domain above

Optional leeway

leeway?: number

The value in seconds used to account for clock skew in JWT expirations. Typically, this value is no more than a minute or two at maximum. Defaults to 60s.

Optional legacySameSiteCookie

legacySameSiteCookie?: boolean

Sets an additional cookie with no SameSite attribute to support legacy browsers that are not compatible with the latest SameSite changes. This will log a warning on modern browsers, you can disable the warning by setting this to false but be aware that some older useragents will not work, See https://www.chromium.org/updates/same-site/incompatible-clients Defaults to true

Optional nowProvider

nowProvider?: (() => number | Promise<number>)

Type declaration

    • (): number | Promise<number>

    • Modify the value used as the current time during the token validation.

      Note: Using this improperly can potentially compromise the token validation.

      Returns number | Promise<number>

Optional onRedirectCallback

onRedirectCallback?: ((appState?, user?) => void)

Type declaration

    • (appState?, user?): void

    • By default this removes the code and state parameters from the url when you are redirected from the authorize page. It uses window.history but you might want to overwrite this if you are using a custom router, like react-router-dom See the EXAMPLES.md for more info.

      Parameters

      Returns void

Optional sessionCheckExpiryDays

sessionCheckExpiryDays?: number

Number of days until the cookie auth0.is.authenticated will expire Defaults to 1.

Optional skipRedirectCallback

skipRedirectCallback?: boolean

By default, if the page url has code/state params, the SDK will treat them as Auth0's and attempt to exchange the code for a token. In some cases the code might be for something else (another OAuth SDK perhaps). In these instances you can instruct the client to ignore them eg

<Auth0Provider
  clientId={clientId}
  domain={domain}
  skipRedirectCallback={window.location.pathname === '/stripe-oauth-callback'}
>

Optional useCookiesForTransactions

useCookiesForTransactions?: boolean

If true, the SDK will use a cookie when storing information about the auth transaction while the user is going through the authentication flow on the authorization server.

The default is false, in which case the SDK will use session storage.

Notes

You might want to enable this if you rely on your users being able to authenticate using flows that may end up spanning across multiple tabs (e.g. magic links) or you cannot otherwise rely on session storage being available.

Optional useFormData

useFormData?: boolean

If true, data to the token endpoint is transmitted as x-www-form-urlencoded data, if false it will be transmitted as JSON. The default setting is true.

Note: Setting this to false may affect you if you use Auth0 Rules and are sending custom, non-primitive data. If you disable this, please verify that your Auth0 Rules continue to work as intended.

Optional useRefreshTokens

useRefreshTokens?: boolean

If true, refresh tokens are used to fetch new access tokens from the Auth0 server. If false, the legacy technique of using a hidden iframe and the authorization_code grant with prompt=none is used. The default setting is false.

Note: Use of refresh tokens must be enabled by an administrator on your Auth0 client application.

Optional useRefreshTokensFallback

useRefreshTokensFallback?: boolean

If true, fallback to the technique of using a hidden iframe and the authorization_code grant with prompt=none when unable to use refresh tokens. If false, the iframe fallback is not used and errors relating to a failed refresh_token grant should be handled appropriately. The default setting is false.

Note: There might be situations where doing silent auth with a Web Message response from an iframe is not possible, like when you're serving your application from the file system or a custom protocol (like in a Desktop or Native app). In situations like this you can disable the iframe fallback and handle the failed refresh_token grant and prompt the user to login interactively with loginWithRedirect or loginWithPopup."

E.g. Using the file: protocol in an Electron application does not support that legacy technique.

Example

let token: string;
try {
  token = await auth0.getTokenSilently();
} catch (e) {
  if (e.error === 'missing_refresh_token' || e.error === 'invalid_grant') {
    auth0.loginWithRedirect();
  }
}

Optional workerUrl

workerUrl?: string

If provided, the SDK will load the token worker from this URL instead of the integrated blob. An example of when this is useful is if you have strict Content-Security-Policy (CSP) and wish to avoid needing to set worker-src: blob:. We recommend either serving the worker, which you can find in the module at <module_path>/dist/auth0-spa-js.worker.production.js, from the same host as your application or using the Auth0 CDN https://cdn.auth0.com/js/auth0-spa-js/<version>/auth0-spa-js.worker.production.js.

Note: The worker is only used when useRefreshTokens: true, cacheLocation: 'memory', and the cache is not custom.

Settings

Member Visibility

Theme

On This Page