Call API Using the Implicit Flow
Auth0 makes it easy for your app to implement the Implicit Flow using:
- Auth0.js: The easiest way to implement the flow, which will do most of the heavy-lifting for you. Our Single-Page App Quickstarts will walk you through the process.
- Authentication API: If you prefer to roll your own, keep reading to learn how to call our API directly.
Before beginning this tutorial:
- Select an Application Type of Single-Page App.
- Add an Allowed Callback URL of
- Make sure your Application's Grant Types include Implicit.
- Authorize the user: Request the user's authorization and redirect back to your app with the requested credentials.
- Call Your API: Use the retrieved Access Token to call your API.
Optional: Explore Sample Use Cases
To begin the flow, you'll need to get the user's authorization. This step may include one or more of the following processes:
- Authenticating the user;
- Redirecting the user to an Identity Provider to handle authentication;
- Checking for active Single Sign-on (SSO) sessions;
- Obtaining user consent for the requested permission level, unless consent has been previously given.
To authorize the user, your app must send the user to the authorization URL.
||Denotes the kind of credential that Auth0 will return (code or token). For the Implicit Flow, the value can be
||Your application's Client ID. You can find this value at your Application's Settings.|
||The URL to which Auth0 will redirect the browser after authorization has been granted by the user. You must specify this URL as a valid callback URL in your Application Settings.
Warning: Per the OAuth 2.0 Specification, Auth0 removes everything after the hash and does not honor any fragments.
||Specifies the scopes for which you want to request authorization, which dictate which claims (or user attributes) you want returned. These must be separated by a space. You can request any of the standard OpenID Connect (OIDC) scopes about users, such as
||The unique identifier of the API the web app wants to access. Use the Identifier value on the Settings tab for the API you created as part of the prerequisites for this tutorial.|
||(recommended) An opaque arbitrary alphanumeric string that your app adds to the initial request and Auth0 includes when redirecting back to your application. To see how to use this value to prevent cross-site request forgery (CSRF) attacks, see Mitigate CSRF Attacks With State Parameters.|
As an example, your HTML snippet for your authorization URL when adding login to your app might look like:
If all goes well, you'll receive an
HTTP 302 response. The requested credentials are included in a hash fragment at the end of the URL:
Note that the returned values depend on what you requested as a
|token||Access Token (plus
|id_token token||ID Token, Access Token (plus
Auth0 will also return any state value you included in your call to the authorization URL.
Call your API
To call your API from a SPA, the application must pass the retrieved Access Token as a Bearer token in the Authorization header of your HTTP request.
Sample Use Cases
You can use Rules to change the returned scopes of Access Tokens and/or add claims to Access and ID Tokens. To do so, add the following rule, which will run after the user authenticates:
Namespacing Custom Claims
Auth0 returns profile information in a structured claim format as defined by the OpenID Connect (OIDC) specification. This means that custom claims added to ID Tokens or Access Tokens must conform to a namespaced format to avoid possible collisions with standard OIDC claims. For example, if you choose the namespace
https://foo.com/ and you want to add a custom claim named
myclaim, you would name the claim
https://foo.com/myclaim, instead of