Add Login Using the Implicit Flow with Form Post

You can add login to your single-page application (SPA) using the Implicit Flow with Form Post. To learn how the flow works and why you should use it, read Implicit Flow with Form Post.

Use the Implicit Flow with Form Post for login-only use cases; if you need to request access tokens while logging the user in so you can call your API, use the Authorization Code Flow with PKCE. To learn more, read Authorization Code Flow with Proof Key for Code Exchange (PKCE).

To implement the Implicit Flow with Form Post, you can use the following resources:

• Express OpenID Connect SDK: The easiest way to implement the flow, which will do most of the heavy-lifting for you. If you use our Javascript SDK, please ensure you are implementing mitigations that are appropriate for your architecture. To learn more, read Auth0.js v9 Reference.

• Authentication API: If you prefer to build your own solution, keep reading to learn how to call our API directly.

Following a successful login, your application will have access to the user's ID token. The ID token will contain basic user profile information.

Register your app with Auth0. To learn more, read Register Single Page Applications.

• Select Single-Page App as the Application Type.

• Add an Allowed Callback URL of {https://yourApp/callback}.

• Make sure your application's Grant Types include Implicit. To learn more, read Update Grant Types.

Request the user's authorization and redirect back to your app. 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.

https://{yourDomain}/authorize?
    response_type=YOUR_RESPONSE_TYPE&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=SCOPE&
    state=STATE&
    nonce=NONCE

As an example, your HTML snippet for your authorization URL when adding login to your app might look like:

<a href="https://{yourDomain}/authorize?
  response_type=id_token token&
  response_mode=form_post&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}&
  scope=read:tests&
  state=xyzABC123&
  nonce=eq...hPmz">
  Sign In
</a>

If all goes well, you'll receive an HTTP 302 response. The requested credentials are encoded in the body:

HTTP/1.1 302 Found
Content-Type: application/x-www-form-urlencoded
id_token=eyJ...acA&
state=xyzABC123

Note that the returned values depend on what you requested as a response_type.

Auth0 will also return any state value you included in your call to the authorization URL.

ID tokens contain user information that must be decoded and extracted.

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:

https://{yourDomain}/authorize?
    response_type=id_token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    nonce=NONCE

This will return an ID token, which you can parse from your redirect URL.

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:

https://{yourDomain}/authorize?
    response_type=id_token token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state=STATE&
    nonce=NONCE

Now, your ID token will contain the requested name and picture claims. When you decode the ID token, it will look similar to:

{
  "name": "jerrie@...",
  "picture": "https://s.gravatar.com/avatar/6222081fd7dcea7dfb193788d138c457?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fje.png",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt...",
  "exp": 1478113129,
  "iat": 1478077129
}

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 need to go to Auth0 Dashboard > Authentication > Social and configure the appropriate connection. 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:

https://{yourDomain}/authorize?
    response_type=id_token token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state=STATE&
    nonce=NONCE&
    connection=github

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:

{
  "name": "Jerrie Pelser",
  "nickname": "jerriep",
  "picture": "https://avatars.githubusercontent.com/u/1006420?v=3",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "github|100...",
  "aud": "xvt...",
  "exp": 1478114742,
  "iat": 1478078742
}

• OAuth 2.0 Authorization Framework
• OpenID Connect Protocol
• Tokens
• Mitigate Replay Attacks When Using the Implicit Flow
• Register Single-Page Web Applications
• Update Grant Types