Add Login Using the Implicit Flow with Form Post

You can add login functionality to your traditional web application using the Implicit Flow with Form Post. For details about how this flow works and when to use it, refer to Implicit Flow with Form Post.

This flow is recommended for login-only use cases. If you need access tokens to call APIs in addition to logging in, use the Authorization Code Flow with PKCE or the Hybrid Flow for enhanced security and functionality.

---

Prerequisites

1. Register your application with Login 3.0:

   • Choose the appropriate application type (e.g., Web App or Single-Page App).

2. Configure Allowed Callback URLs:

   • For example, https://yourApp/callback.

3. Enable Implicit Grant Types:

   • Ensure your application’s grant types include the Implicit Flow.

4. Define Scopes:

   • Specify scopes such as openid email profile depending on your application’s needs.

---

Authorize User

To authorize the user and redirect them back to your application, begin the flow by constructing an authorization URL.

Authorization URL Example

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

Parameters

Parameter Name	Description
response_type	The type of credential to be returned (id_token, token, or id_token token).
response_mode	Specifies the method for returning response parameters. Use form_post for security.
client_id	Your application's Client ID, available in the application settings.
redirect_uri	The URL to which Login 3.0 redirects after user authorization. Must match your callback URL.
scope	A space-separated list of requested scopes (e.g., openid email profile).
state	A recommended random string to prevent CSRF attacks.
nonce	A cryptographically random string to prevent token replay attacks.
connection	(Optional) Forces the user to log in using a specific connection.
organization	(Optional) Specifies an organization for authentication.
invitation	(Optional) Includes the invitation ticket ID for organization-based authentication.

---

Example HTML Snippet

<a href="https://{yourDomain}/authorize?
    response_type=id_token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={<https://yourApp/callback>}&
    scope=openid profile&
    state=xyzABC123&
    nonce=randomString123">
    Sign In
</a>

---

Response

If successful, Login 3.0 responds with an HTTP 302 redirect to the callback URL. The response includes the requested credentials in the body:

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

Response Type	Returned Components
id_token	ID Token for user authentication.
token	Access Token (plus expires_in and token_type values).
id_token token	Both ID Token and Access Token (plus expires_in and token_type values).

---

Use Cases

Basic Authentication

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

This returns an ID Token containing user authentication details.

---

Request User Profile Information

https://{yourDomain}/authorize?
    response_type=id_token token&
    response_mode=form_post&
    client_id={yourClientId}&
    redirect_uri={<https://yourApp/callback>}&
    scope=openid name picture&
    state=xyzABC123&
    nonce=randomString123

The ID Token includes user claims like name and profile picture.

Example decoded token:

{
  "name": "John Doe",
  "picture": "<https://example.com/avatar.jpg>",
  "iss": "<https://login.example.com/>",
  "sub": "auth0|123456",
  "aud": "yourClientId",
  "exp": 1672531200,
  "iat": 1672527600
}