Optional appState: anyOptional stackStatic Optional prepareOptional override for formatting stack traces
-Static stackStatic captureStatic fromThrown when handling the redirect callback fails, will be one of Auth0's +Authentication API's Standard Error Responses: https://auth0.com/docs/api/authentication?javascript#standard-error-responses
+OptionalappState: anyOptionalstackStatic OptionalprepareOptional override for formatting stack traces
+StaticstackStaticcaptureCreate .stack property on a target object
+OptionalconstructorOpt: FunctionStaticfromThrown when network requests to the Auth server fail.
-Optional stackStatic Optional prepareOptional override for formatting stack traces
-Static stackStatic captureStatic fromThrown when network requests to the Auth server fail.
+OptionalstackStatic OptionalprepareOptional override for formatting stack traces
+StaticstackStaticcaptureCreate .stack property on a target object
+OptionalconstructorOpt: FunctionStaticfromError thrown when the token exchange results in a mfa_required error
Optional stackStatic Optional prepareOptional override for formatting stack traces
-Static stackStatic captureStatic fromError thrown when the token exchange results in a mfa_required error
OptionalstackStatic OptionalprepareOptional override for formatting stack traces
+StaticstackStaticcaptureCreate .stack property on a target object
+OptionalconstructorOpt: FunctionStaticfromError thrown when there is no refresh token to use
-Optional stackStatic Optional prepareOptional override for formatting stack traces
-Static stackStatic captureStatic fromError thrown when there is no refresh token to use
+OptionalstackStatic OptionalprepareOptional override for formatting stack traces
+StaticstackStaticcaptureCreate .stack property on a target object
+OptionalconstructorOpt: FunctionStaticfromAn OAuth2 error will come from the authorization server and will have at least an error property which will
+
An OAuth2 error will come from the authorization server and will have at least an error property which will
be the error code. And possibly an error_description property
See: https://openid.net/specs/openid-connect-core-1_0.html#rfc.section.3.1.2.6
-Optional error_description: stringOptional error_Optional stackStatic Optional prepareOptional override for formatting stack traces
-Static stackStatic captureOptionalerror_description: stringOptionalerror_OptionalstackStatic OptionalprepareOptional override for formatting stack traces
+StaticstackThrown when network requests to the Auth server fail.
-Optional stackStatic Optional prepareOptional override for formatting stack traces
-Static stackStatic captureStatic fromThrown when network requests to the Auth server fail.
+OptionalstackStatic OptionalprepareOptional override for formatting stack traces
+StaticstackStaticcaptureCreate .stack property on a target object
+OptionalconstructorOpt: FunctionStaticfromError thrown when the login popup times out (if the user does not complete auth)
-Optional stackStatic Optional prepareOptional override for formatting stack traces
-Static stackStatic captureStatic fromError thrown when the login popup times out (if the user does not complete auth)
+OptionalstackStatic OptionalprepareOptional override for formatting stack traces
+StaticstackStaticcaptureCreate .stack property on a target object
+OptionalconstructorOpt: FunctionStaticfromThrown when silent auth times out (usually due to a configuration issue) or +
Thrown when silent auth times out (usually due to a configuration issue) or when network requests to the Auth server timeout.
-Optional stackStatic Optional prepareOptional override for formatting stack traces
-Static stackStatic captureStatic fromOptionalstackStatic OptionalprepareOptional override for formatting stack traces
+StaticstackStaticcaptureCreate .stack property on a target object
+OptionalconstructorOpt: FunctionStaticfromOptional addressOptional birthdateOptional emailOptional email_Optional family_Optional genderOptional given_Optional localeOptional middle_Optional nameOptional nicknameOptional phone_Optional phone_Optional pictureOptional preferred_Optional profileOptional subOptional updated_Optional websiteOptional zoneinfoOptionaladdressOptionalbirthdateOptionalemailOptionalemail_Optionalfamily_OptionalgenderOptionalgiven_OptionallocaleOptionalmiddle_OptionalnameOptionalnicknameOptionalphone_Optionalphone_OptionalpictureOptionalpreferred_OptionalprofileOptionalsubOptionalupdated_OptionalwebsiteOptionalzoneinfoThe Auth0 Context
-Readonly $$typeofOptional displayUsed in debugging messages. You might want to set it -explicitly if you want to display a different name for -debugging purposes.
-<Auth0Provider
domain={domain}
clientId={clientId}
authorizationParams={{ redirect_uri: window.location.origin }}>
<MyApp />
</Auth0Provider>
-
+<Auth0Provider
domain={domain}
clientId={clientId}
authorizationParams={{ redirect_uri: window.location.origin }}>
<MyApp />
</Auth0Provider>
+
+
Provides the Auth0Context to its child components.
-const {
// Auth state:
error,
isAuthenticated,
isLoading,
user,
// Auth methods:
getAccessTokenSilently,
getAccessTokenWithPopup,
getIdTokenClaims,
loginWithRedirect,
loginWithPopup,
logout,
} = useAuth0<TUser>();
-
+const {
// Auth state:
error,
isAuthenticated,
isLoading,
user,
// Auth methods:
getAccessTokenSilently,
getAccessTokenWithPopup,
getIdTokenClaims,
loginWithRedirect,
loginWithPopup,
logout,
} = useAuth0<TUser>();
+
+
Use the useAuth0 hook in your components to access the auth state and methods.
TUser is an optional type param to provide a type to the user field.
class MyComponent extends Component {
render() {
// Access the auth context from the `auth0` prop
const { user } = this.props.auth0;
return <div>Hello {user.name}!</div>
}
}
// Wrap your class component in withAuth0
export default withAuth0(MyComponent);
-
+class MyComponent extends Component {
render() {
// Access the auth context from the `auth0` prop
const { user } = this.props.auth0;
return <div>Hello {user.name}!</div>
}
}
// Wrap your class component in withAuth0
export default withAuth0(MyComponent);
+
+
Wrap your class components in this Higher Order Component to give them access to the Auth0Context.
Providing a context as the second argument allows you to configure the Auth0Provider the Auth0Context should come from f you have multiple within your application.
-const MyProtectedComponent = withAuthenticationRequired(MyComponent);
-
+const MyProtectedComponent = withAuthenticationRequired(MyComponent);
+
+
When you wrap your components in this Higher Order Component and an anonymous user visits your component they will be redirected to the login page; after login they will be returned to the page they were redirected from.
-

📚 Documentation - 🚀 Getting Started - 💻 API Reference - 💬 Feedback
-📚 Documentation - 🚀 Getting Started - 💻 API Reference - 💬 Feedback
+Using npm
-npm install @auth0/auth0-react
-
+Using npm
+npm install @auth0/auth0-react
+
+
Using yarn
-yarn add @auth0/auth0-react
-
-Create a Single Page Application in the Auth0 Dashboard.
+yarn add @auth0/auth0-react
+
+
+Create a Single Page Application in the Auth0 Dashboard.
-If you're using an existing application, verify that you have configured the following settings in your Single Page Application:
+If you're using an existing application, verify that you have configured the following settings in your Single Page Application:
-
- Click on the "Settings" tab of your application's page.
+- Click on the "Settings" tab of your application's page.
- Scroll down and click on the "Show Advanced Settings" link.
- Under "Advanced Settings", click on the "OAuth" tab.
- Ensure that "JsonWebToken Signature Algorithm" is set to
@@ -35,25 +37,26 @@RS256and that "OIDC Conformant" is enabled.- Allowed Web Origins:
http://localhost:3000--These URLs should reflect the origins that your application is running on. Allowed Callback URLs may also include a path, depending on where you're handling the callback.
+These URLs should reflect the origins that your application is running on. Allowed Callback URLs may also include a path, depending on where you're handling the callback.
Take note of the Client ID and Domain values under the "Basic Information" section. You'll need these values in the next step.
-Configure the SDK
Configure the SDK by wrapping your application in
-Auth0Provider:+// src/index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
const root = createRoot(document.getElementById('app'));
root.render(
<Auth0Provider
domain="YOUR_AUTH0_DOMAIN"
clientId="YOUR_AUTH0_CLIENT_ID"
authorizationParams={{
redirect_uri: window.location.origin,
}}
>
<App />
</Auth0Provider>
); -Take note of the Client ID and Domain values under the "Basic Information" section. You'll need these values in the next step.
+Configure the SDK
Configure the SDK by wrapping your application in
+Auth0Provider:+// src/index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
const root = createRoot(document.getElementById('app'));
root.render(
<Auth0Provider
domain="YOUR_AUTH0_DOMAIN"
clientId="YOUR_AUTH0_CLIENT_ID"
authorizationParams={{
redirect_uri: window.location.origin,
}}
>
<App />
</Auth0Provider>
); +-Instructions for React <18
+-// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
ReactDOM.render(
<Auth0Provider
domain="YOUR_AUTH0_DOMAIN"
clientId="YOUR_AUTH0_CLIENT_ID"
authorizationParams={{
redirect_uri: window.location.origin,
}}
>
<App />
</Auth0Provider>,
document.getElementById('app')
); +// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
ReactDOM.render(
<Auth0Provider
domain="YOUR_AUTH0_DOMAIN"
clientId="YOUR_AUTH0_CLIENT_ID"
authorizationParams={{
redirect_uri: window.location.origin,
}}
>
<App />
</Auth0Provider>,
document.getElementById('app')
); -Use the
-useAuth0hook in your components to access authentication state (isLoading,isAuthenticatedanduser) and authentication methods (loginWithRedirectandlogout):+// src/App.js
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
function App() {
const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } =
useAuth0();
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Oops... {error.message}</div>;
}
if (isAuthenticated) {
return (
<div>
Hello {user.name}{' '}
<button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
Log out
</button>
</div>
);
} else {
return <button onClick={() => loginWithRedirect()}>Log in</button>;
}
}
export default App; -+// src/App.js
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
function App() {
const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } =
useAuth0();
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Oops... {error.message}</div>;
}
if (isAuthenticated) {
return (
<div>
Hello {user.name}{' '}
<button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
Log out
</button>
</div>
);
} else {
return <button onClick={() => loginWithRedirect()}>Log in</button>;
}
}
export default App; +For more code samples on how to integrate auth0-react SDK in your React application, have a look at our examples.
-API reference
Explore public API's available in auth0-react.
+API reference
Explore public API's available in auth0-react.
-
- Auth0Provider
- Auth0ProviderOptions
@@ -61,14 +64,14 @@- withAuth0
- withAuthenticationRequired
Feedback
Contributing
We appreciate feedback and contribution to this repo! Before you get started, please see the following:
+Feedback
Contributing
We appreciate feedback and contribution to this repo! Before you get started, please see the following:
-
-- Auth0's general contribution guidelines
-- Auth0's code of conduct guidelines
-- This repo's contribution guide
+- Auth0's general contribution guidelines
+- Auth0's code of conduct guidelines
+- This repo's contribution guide
Raise an issue
To provide feedback or report a bug, please raise an issue on our issue tracker.
-Vulnerability Reporting
Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.
+Raise an issue
To provide feedback or report a bug, please raise an issue on our issue tracker.
+Vulnerability Reporting
Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.
@@ -79,4 +82,4 @@ Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout Why Auth0?
-This project is licensed under the MIT license. See the LICENSE file for more info.
Contains the authenticated state and authentication methods provided by the useAuth0 hook.
Optional errorconst token = await getAccessTokenSilently(options);
-
-If there's a valid token stored, return it. Otherwise, opens an +
Contains the authenticated state and authentication methods provided by the useAuth0 hook.
const token = await getAccessTokenSilently(options);
+
+
+If there's a valid token stored, return it. Otherwise, opens an
iframe with the /authorize URL using the parameters provided
as arguments. Random and secure state and nonce parameters
will be auto-generated. If the response is successful, results
will be valid according to their expiration times.
If refresh tokens are used, the token endpoint is called directly with the
-'refresh_token' grant. If no refresh token is available to make this call,
-the SDK will only fall back to using an iframe to the '/authorize' URL if
+'refresh_token' grant. If no refresh token is available to make this call,
+the SDK will only fall back to using an iframe to the '/authorize' URL if
the useRefreshTokensFallback setting has been set to true. By default this
setting is false.
This method may use a web worker to perform the token call if the in-memory @@ -28,23 +29,26 @@ back to using an iframe to make the token exchange.
Note that in all cases, falling back to an iframe requires access to
the auth0 cookie.
Optional options: GetTokenSilentlyOptionsconst token = await getTokenWithPopup(options, config);
-
+const token = await getTokenWithPopup(options, config);
+
+
Get an access token interactively.
Opens a popup with the /authorize URL using the parameters
provided as arguments. Random and secure state and nonce
parameters will be auto-generated. If the response is successful,
results will be valid according to their expiration times.
Optional options: GetTokenWithPopupOptionsOptional config: PopupConfigOptionsconst claims = await getIdTokenClaims();
-
+const claims = await getIdTokenClaims();
+
+
Returns all claims from the id_token if available.
-After the browser redirects back to the callback page, +
After the browser redirects back to the callback page,
call handleRedirectCallback to handle success and error
responses from Auth0. If the response is successful, results
will be valid according to their expiration times.
Optional url: stringThe URL to that should be used to retrieve the state and code values. Defaults to window.location.href if not given.
await loginWithPopup(options, config);
-
+Optionalurl: stringThe URL to that should be used to retrieve the state and code values. Defaults to window.location.href if not given.
await loginWithPopup(options, config);
+
+
Opens a popup with the /authorize URL using the parameters
provided as arguments. Random and secure state and nonce
parameters will be auto-generated. If the response is successful,
@@ -52,15 +56,17 @@
IMPORTANT: This method has to be called from an event handler that was started by the user like a button click, for example, otherwise the popup will be blocked in most browsers.
-Optional options: PopupLoginOptionsOptional config: PopupConfigOptionsawait loginWithRedirect(options);
-
+await loginWithRedirect(options);
+
+
Performs a redirect to /authorize using the parameters
provided as arguments. Random and secure state and nonce
parameters will be auto-generated.
Optional options: RedirectLoginOptions<AppState>auth0.logout({ logoutParams: { returnTo: window.location.origin } });
-
+auth0.logout({ logoutParams: { returnTo: window.location.origin } });
+
+
Clears the application session and performs a redirect to /v2/logout, using
the parameters provided as arguments, to clear the Auth0 session.
If the logoutParams.federated option is specified, it also clears the Identity Provider session.
Read more about how Logout works at Auth0.
Optional options: LogoutOptionsOptional userThe main configuration to instantiate the Auth0Provider.
Optional Internal auth0Internal property to send information about the client to the authorization server.
-Optional env?: { Optional authorizationURL parameters that will be sent back to the Authorization Server. This can be known parameters +
The main configuration to instantiate the Auth0Provider.
Optional Internalauth0Internal property to send information about the client to the authorization server.
+OptionalauthorizationURL 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 authorizeA maximum number of seconds to wait before declaring background calls to /authorize as failed for timeout +
OptionalauthorizeA maximum number of seconds to wait before declaring background calls to /authorize as failed for timeout Defaults to 60s.
-Optional cacheSpecify a custom cache implementation to use for token storage and retrieval. This setting takes precedence over cacheLocation if they are both specified.
Optional cacheThe location to use when storing cache data. Valid values are memory or localstorage.
+
OptionalcacheSpecify a custom cache implementation to use for token storage and retrieval. This setting takes precedence over cacheLocation if they are both specified.
OptionalcacheThe 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 childrenThe child nodes your Provider has wrapped
-The Client ID found on your Application settings page
-Optional contextContext to be used when creating the Auth0Provider, defaults to the internally created context.
+OptionalchildrenThe child nodes your Provider has wrapped
+The Client ID found on your Application settings page
+OptionalcontextContext 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.
@@ -46,60 +46,62 @@ used to store data is differentFor a sample on using multiple Auth0Providers review the React Account Linking Sample
-Optional cookieThe domain the cookie is accessible from. If not set, the cookie is scoped to +
OptionalcookieThe 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).
Your Auth0 account domain such as 'example.auth0.com',
-'example.eu.auth0.com' or , 'example.mycompany.com'
+
Your Auth0 account domain such as 'example.auth0.com',
+'example.eu.auth0.com' or , 'example.mycompany.com'
(when using custom domains)
Optional httpSpecify the timeout for HTTP calls using fetch. The default is 10 seconds.
Optional issuerThe issuer to be used for validation of JWTs, optionally defaults to the domain above
-Optional leewayThe value in seconds used to account for clock skew in JWT expirations. +
OptionalhttpSpecify the timeout for HTTP calls using fetch. The default is 10 seconds.
OptionalissuerThe issuer to be used for validation of JWTs, optionally defaults to the domain above
+OptionalleewayThe 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 legacySets an additional cookie with no SameSite attribute to support legacy browsers +
OptionallegacySets 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 nowModify the value used as the current time during the token validation.
+OptionalnowModify the value used as the current time during the token validation.
Note: Using this improperly can potentially compromise the token validation.
-Optional onBy default this removes the code and state parameters from the url when you are redirected from the authorize page. +
OptionalonBy 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.
Optional sessionNumber of days until the cookie auth0.is.authenticated will expire
+See the EXAMPLES.md for more info.
OptionalsessionNumber of days until the cookie auth0.is.authenticated will expire
Defaults to 1.
Optional skipBy default, if the page url has code/state params, the SDK will treat them as Auth0's and attempt to exchange the +
OptionalskipBy 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 useIf true, the SDK will use a cookie when storing information about the auth transaction while
+
<Auth0Provider
clientId={clientId}
domain={domain}
skipRedirectCallback={window.location.pathname === '/stripe-oauth-callback'}
>
+
+
+OptionaluseIf 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.
You might want to enable this if you rely on your users being able to authenticate using flows that +
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 useIf 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.
OptionaluseIf 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 useIf 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.
+
OptionaluseIf 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 useIf 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
+
OptionaluseIf 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).
+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.
let token: string;
try {
token = await auth0.getTokenSilently();
} catch (e) {
if (e.error === 'missing_refresh_token' || e.error === 'invalid_grant') {
auth0.loginWithRedirect();
}
}
-
-Optional workerIf 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
+
OptionalworkerIf 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.
Note: The worker is only used when useRefreshTokens: true, cacheLocation: 'memory', and the cache is not custom.
If you need to send custom parameters to the Authorization Server, +
If you need to send custom parameters to the Authorization Server, make sure to use the original parameter name.
-Optional acr_Optional audienceThe default audience to be used for requesting API access.
-Optional connectionThe name of the connection configured for your application. +
Optionalacr_OptionalaudienceThe default audience to be used for requesting API access.
+OptionalconnectionThe name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget.
-Optional display'page': displays the UI with a full page view'popup': displays the UI with a popup window'touch': displays the UI in a way that leverages a touch interface'wap': displays the UI with a "feature phone" type interfaceOptionaldisplay'page': displays the UI with a full page view'popup': displays the UI with a popup window'touch': displays the UI in a way that leverages a touch interface'wap': displays the UI with a "feature phone" type interfaceOptional id_Previously issued ID Token.
-Optional invitationThe Id of an invitation to accept. This is available from the user invitation URL that is given when participating in a user invitation flow.
-Optional login_The user's email address or other identifier. When your app knows +
Optionalid_Previously issued ID Token.
+OptionalinvitationThe Id of an invitation to accept. This is available from the user invitation URL that is given when participating in a user invitation flow.
+Optionallogin_The user's email address or other identifier. When your app knows which user is trying to authenticate, you can provide this parameter to pre-fill the email box or select the right session for sign-in.
This currently only affects the classic Lock experience.
-Optional max_Maximum allowable elapsed time (in seconds) since authentication. +
Optionalmax_Maximum allowable elapsed time (in seconds) since authentication. If the last time the user authenticated is greater than this value, the user must be reauthenticated.
-Optional organizationThe organization to log in to.
-This will specify an organization parameter in your user's login request.
OptionalorganizationThe organization to log in to.
+This will specify an organization parameter in your user's login request.
org_), it will be validated against the org_id claim of your user's ID Token. The validation is case-sensitive.org_), it will be validated against the org_name claim of your user's ID Token. The validation is case-insensitive.org_), it will be validated against the org_id claim of your user's ID Token. The validation is case-sensitive.org_), it will be validated against the org_name claim of your user's ID Token. The validation is case-insensitive.
+To use an Organization Name you must have "Allow Organization Names in Authentication API" switched on in your Auth0 settings dashboard.
+More information is available on the Auth0 documentation portalOptional prompt'none': do not prompt user for login or consent on reauthentication'login': prompt user for reauthentication'consent': prompt user for consent before processing request'select_account': prompt user to select an accountOptionalprompt'none': do not prompt user for login or consent on reauthentication'login': prompt user for reauthentication'consent': prompt user for consent before processing request'select_account': prompt user to select an accountOptional redirect_The default URL where Auth0 will redirect your browser to with +
Optionalredirect_The default URL where Auth0 will redirect your browser to with the authentication result. It must be whitelisted in -the "Allowed Callback URLs" field in your Auth0 Application's +the "Allowed Callback URLs" field in your Auth0 Application's settings. If not provided here, it should be provided in the other methods that provide authentication.
-Optional scopeThe default scope to be used on authentication requests.
+OptionalscopeThe default scope to be used on authentication requests.
This defaults to profile email if not set. If you are setting extra scopes and require
profile and email to be included then you must include them in the provided scope.
Note: The openid scope is always applied regardless of this setting.
Optional screen_Provides a hint to Auth0 as to what flow should be displayed. +
Optionalscreen_Provides a hint to Auth0 as to what flow should be displayed. The default behavior is to show a login page but you can override -this by passing 'signup' to show the signup page instead.
+this by passing 'signup' to show the signup page instead.This only affects the New Universal Login Experience.
-Optional ui_The space-separated list of language tags, ordered by preference.
-For example: 'fr-CA fr en'.
Optionalui_The space-separated list of language tags, ordered by preference.
+For example: 'fr-CA fr en'.
Optional authorizationParameters that will be sent back to Auth0 as part of a request.
-If you need to send custom parameters to the Authorization Server, +
OptionalauthorizationParameters that will be sent back to Auth0 as part of a request.
+If you need to send custom parameters to the Authorization Server, make sure to use the original parameter name.
-Optional audience?: stringThe audience that was used in the authentication request
-Optional redirect_There's no actual redirect when getting a token silently, +
Optionalaudience?: stringThe audience that was used in the authentication request
+Optionalredirect_uri?: stringThere's no actual redirect when getting a token silently,
but, according to the spec, a redirect_uri param is required.
Auth0 uses this parameter to validate that the current origin
matches the redirect_uri origin when sending the response.
It must be whitelisted in the "Allowed Web Origins" in your
-Auth0 Application's settings.
Optional scope?: stringThe scope that was used in the authentication request
-Optional cacheWhen off, ignores the cache and always sends a
+Auth0 Application's settings.
Optionalscope?: stringThe scope that was used in the authentication request
+OptionalcacheWhen off, ignores the cache and always sends a
request to Auth0.
When cache-only, only reads from the cache and never sends a request to Auth0.
Defaults to on, where it both reads from the cache and sends a request to Auth0 as needed.
Optional detailedIf true, the full response from the /oauth/token endpoint (or the cache, if the cache was used) is returned +
OptionaldetailedIf true, the full response from the /oauth/token endpoint (or the cache, if the cache was used) is returned
(minus refresh_token if one was issued). Otherwise, just the access token is returned.
The default is false.
Optional timeoutA maximum number of seconds to wait before declaring the background /authorize call as failed for timeout +
OptionaltimeoutA maximum number of seconds to wait before declaring the background /authorize call as failed for timeout Defaults to 60s.
-Optional authorizationURL parameters that will be sent back to the Authorization Server. This can be known parameters +
OptionalauthorizationURL 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 cacheWhen off, ignores the cache and always sends a request to Auth0.
+
OptionalcacheWhen off, ignores the cache and always sends a request to Auth0.
When cache-only, only reads from the cache and never sends a request to Auth0.
Defaults to on, where it both reads from the cache and sends a request to Auth0 as needed.
Optional acrOptional addressOptional amrOptional at_Optional audOptional auth_Optional azpOptional birthdateOptional c_Optional cnfOptional emailOptional email_Optional expOptional family_Optional genderOptional given_Optional iatOptional issOptional jtiOptional localeOptional middle_Optional nameOptional nbfOptional nicknameOptional nonceOptional org_Optional org_Optional phone_Optional phone_Optional pictureOptional preferred_Optional profileOptional sidOptional sub_Optional updated_Optional websiteOptional zoneinfoOptionalacrOptionaladdressOptionalamrOptionalat_OptionalaudOptionalauth_OptionalazpOptionalbirthdateOptionalc_OptionalcnfOptionalemailOptionalemail_OptionalexpOptionalfamily_OptionalgenderOptionalgiven_OptionaliatOptionalissOptionaljtiOptionallocaleOptionalmiddle_OptionalnameOptionalnbfOptionalnicknameOptionalnonceOptionalorg_Optionalorg_Optionalphone_Optionalphone_OptionalpictureOptionalpreferred_OptionalprofileOptionalsidOptionalsub_Optionalupdated_OptionalwebsiteOptionalzoneinfoOptional clientThe clientId of your application.
OptionalclientThe clientId of your application.
If this property is not set, then the clientId that was used during initialization of the SDK is sent to the logout endpoint.
If this property is set to null, then no client ID value is sent to the logout endpoint.
Optional logoutParameters to pass to the logout endpoint. This can be known parameters defined by Auth0 or custom parameters +
OptionallogoutParameters to pass to the logout endpoint. This can be known parameters defined by Auth0 or custom parameters you wish to provide.
-If you need to send custom parameters to the logout endpoint, make sure to use the original parameter name.
-Optional federated?: booleanWhen supported by the upstream identity provider, +
If you need to send custom parameters to the logout endpoint, make sure to use the original parameter name.
+Optionalfederated?: booleanWhen supported by the upstream identity provider, forces the user to logout of their identity provider and from Auth0. Read more about how federated logout works at Auth0
-Optional returnThe URL where Auth0 will redirect your browser to after the logout.
+OptionalreturnTo?: stringThe URL where Auth0 will redirect your browser to after the logout.
Note: If the client_id parameter is included, the
returnTo URL that is provided must be listed in the
-Application's "Allowed Logout URLs" in the Auth0 dashboard.
+Application's "Allowed Logout URLs" in the Auth0 dashboard.
However, if the client_id parameter is not included, the
returnTo URL must be listed in the "Allowed Logout URLs" at
the account level in the Auth0 dashboard.
Optional openUsed to control the redirect and not rely on the SDK to do the actual redirect.
+OptionalopenUsed to control the redirect and not rely on the SDK to do the actual redirect.
Set to false to disable the redirect, or provide a function to handle the actual redirect yourself.
await auth0.logout({
openUrl(url) {
window.location.replace(url);
}
});
-
-import { Browser } from '@capacitor/browser';
await auth0.logout({
async openUrl(url) {
await Browser.open({ url });
}
});
-
-Optional clientThe clientId of your application.
OptionalclientThe clientId of your application.
If this property is not set, then the clientId that was used during initialization of the SDK is sent to the logout endpoint.
If this property is set to null, then no client ID value is sent to the logout endpoint.
Optional logoutParameters to pass to the logout endpoint. This can be known parameters defined by Auth0 or custom parameters +
OptionallogoutParameters to pass to the logout endpoint. This can be known parameters defined by Auth0 or custom parameters you wish to provide.
-If you need to send custom parameters to the logout endpoint, make sure to use the original parameter name.
-Optional federated?: booleanWhen supported by the upstream identity provider, +
If you need to send custom parameters to the logout endpoint, make sure to use the original parameter name.
+Optionalfederated?: booleanWhen supported by the upstream identity provider, forces the user to logout of their identity provider and from Auth0. Read more about how federated logout works at Auth0
-Optional returnThe URL where Auth0 will redirect your browser to after the logout.
+OptionalreturnTo?: stringThe URL where Auth0 will redirect your browser to after the logout.
Note: If the client_id parameter is included, the
returnTo URL that is provided must be listed in the
-Application's "Allowed Logout URLs" in the Auth0 dashboard.
+Application's "Allowed Logout URLs" in the Auth0 dashboard.
However, if the client_id parameter is not included, the
returnTo URL must be listed in the "Allowed Logout URLs" at
the account level in the Auth0 dashboard.
Optional popupAccepts an already-created popup window to use. If not specified, the SDK +
OptionalpopupAccepts an already-created popup window to use. If not specified, the SDK will create its own. This may be useful for platforms like iOS that have security restrictions around when popups can be invoked (e.g. from a user click event)
-Optional timeoutThe number of seconds to wait for a popup response before +
OptionaltimeoutThe number of seconds to wait for a popup response before throwing a timeout error. Defaults to 60s
-Optional authorizationURL parameters that will be sent back to the Authorization Server. This can be known parameters +
Optional appUsed to store state before doing the redirect
-Optional authorizationURL parameters that will be sent back to the Authorization Server. This can be known parameters +
OptionalappUsed to store state before doing the redirect
+OptionalauthorizationURL 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 fragmentUsed to add to the URL fragment before redirecting
-Optional openUsed to control the redirect and not rely on the SDK to do the actual redirect.
-const client = new Auth0Client({
openUrl(url) {
window.location.replace(url);
}
});
-
-import { Browser } from '@capacitor/browser';
const client = new Auth0Client({
async openUrl(url) {
await Browser.open({ url });
}
});
-
-OptionalfragmentUsed to add to the URL fragment before redirecting
+OptionalopenUsed to control the redirect and not rely on the SDK to do the actual redirect.
+Components wrapped in withAuth0 will have an additional auth0 prop
Components wrapped in withAuth0 will have an additional auth0 prop
Options for the withAuthenticationRequired Higher Order Component
-Optional contextThe context to be used when calling useAuth0, this should only be provided if you are using multiple Auth0Providers +
Options for the withAuthenticationRequired Higher Order Component
+OptionalcontextThe context to be used when calling useAuth0, this should only be provided if you are using multiple Auth0Providers within your application and you wish to tie a specific component to a Auth0Provider other than the Auth0Provider associated with the default Auth0Context.
-Optional loginwithAuthenticationRequired(Profile, {
loginOptions: {
appState: {
customProp: 'foo'
}
}
})
-
+OptionalloginwithAuthenticationRequired(Profile, {
loginOptions: {
appState: {
customProp: 'foo'
}
}
})
+
+
Pass additional login options, like extra appState to the login page.
This will be merged with the returnTo option used by the onRedirectCallback handler.
Optional onwithAuthenticationRequired(Profile, {
onBeforeAuthentication: () => { analyticsLibrary.track('login_triggered'); }
})
-
+OptionalonwithAuthenticationRequired(Profile, {
onBeforeAuthentication: () => { analyticsLibrary.track('login_triggered'); }
})
+
+
Allows executing logic before the user is redirected to the login page.
-Optional onwithAuthenticationRequired(Profile, {
onRedirecting: () => <div>Redirecting you to the login...</div>
})
-
+OptionalonwithAuthenticationRequired(Profile, {
onRedirecting: () => <div>Redirecting you to the login...</div>
})
+
+
Render a message to show that the user is being redirected to the login.
-Optional returnwithAuthenticationRequired(Profile, {
returnTo: '/profile'
})
-
+OptionalreturnwithAuthenticationRequired(Profile, {
returnTo: '/profile'
})
+
+
or
-withAuthenticationRequired(Profile, {
returnTo: () => window.location.hash.substr(1)
})
-
+withAuthenticationRequired(Profile, {
returnTo: () => window.location.hash.substr(1)
})
+
+
Add a path for the onRedirectCallback handler to return the user to after login.
The state of the application before the user was redirected to the login page.
-Optional returnThe possible locations where tokens can be stored
-The possible locations where tokens can be stored
+ConstThe Auth0 Context
+(
const opts = {
...loginOptions,
appState: {
- ...(loginOptions && loginOptions.appState),
+ ...loginOptions?.appState,
returnTo: typeof returnTo === 'function' ? returnTo() : returnTo,
},
};
- (async (): Promise
Thrown when handling the redirect callback fails, will be one of Auth0's -Authentication API's Standard Error Responses: https://auth0.com/docs/api/authentication?javascript#standard-error-responses
-