Add Login Using the Implicit Flow
Auth0 makes it easy to implement the Implicit Flow by 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 solution, keep reading to learn how to call our API directly.
Following successful login, your application will have access to the user's ID Token and Access Token, as well as an authorization code that can be exchanged with Auth0 for an additional Access Token. The ID Token will contain basic user profile information, and the Access Token can be used to call the Auth0 /userinfo endpoint or your own protected APIs.
Before beginning this tutorial:
- Register your Application with Auth0
- 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.
- Request tokens: If the SPA has a back-end, exchange your authorization code for tokens, including a secure Access Token.
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 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 OIDC scopes about users, such as
||(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.|
||(optional) Forces the user to sign in with a specific connection. For example, you can pass a value of
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.
Sample Use Cases
Basic Authentication Request
This example shows the most basic request you can make when authorizing the user in step 1. It displays the Auth0 login screen and allows the user to sign in with any of your configured connections:
This will return an ID Token, which you can parse from your redirect URL.
Request the User's Name and Profile Picture
In addition to the usual user authentication, this example shows how to request additional user details, such as name and picture.
To request the user's name and picture, you need to add the appropriate scopes when authorizing the user in step 1:
Now, your ID Token will contain the requested name and picture claims. When you decode the ID Token, it will look similar to:
Request a User Log In with GitHub
In addition to the usual user authentication, this example shows how to send users directly to a social identity provider, such as GitHub. For this example to work, you will first need to configure the appropriate connection in the Auth0 Dashboard and get the connection name from the Settings tab.
To send users directly to the GitHub login screen, you need to pass the
connection parameter and set its value to the connection name (in this case,
github) when authorizing the user in step 1:
Now, your ID Token will contain a
sub claim with the user's unique ID returned from GitHub. When you decode the ID Token, it will look similar to:
For a list of possible connections, see Identity Providers Supported by Auth0.