> ## Documentation Index > Fetch the complete documentation index at: https://docs-dev-eval-flywheel-swift-quickstart.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. > Learn how to add login to your single-page application (SPA) using the Implicit Flow with Form Post. # Add Login Using the Implicit Flow with Form Post export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => { const [displayText, setDisplayText] = useState(children); const [copyText, setCopyText] = useState(children); const wrapperRef = React.useRef(null); useEffect(() => { let unsubscribe = null; function init() { if (!window.autorun || !window.rootStore) { return; } unsubscribe = window.autorun(() => { let processedChildrenForDisplay = children; let processedChildrenForCopy = children; for (const [key, value] of window.rootStore.variableStore.values.entries()) { const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`); let displayValue = value; if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") { displayValue = value.substring(0, 3) + "*****MASKED*****"; } processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue); processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value); } setDisplayText(processedChildrenForDisplay); setCopyText(processedChildrenForCopy); }); } if (window.rootStore) { init(); } else { window.addEventListener("adu:storeReady", init); } return () => { window.removeEventListener("adu:storeReady", init); unsubscribe?.(); }; }, [children]); useEffect(() => { if (!wrapperRef.current) return; const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard); let isOverriding = false; const handleClick = e => { const button = e.target.closest('[data-testid="copy-code-button"]'); if (!button || !wrapperRef.current.contains(button)) return; isOverriding = true; navigator.clipboard.writeText = text => { if (isOverriding) { isOverriding = false; navigator.clipboard.writeText = originalWriteText; return originalWriteText(copyText); } return originalWriteText(text); }; setTimeout(() => { if (isOverriding) { isOverriding = false; navigator.clipboard.writeText = originalWriteText; } }, 100); }; const wrapper = wrapperRef.current; wrapper.addEventListener('click', handleClick, true); return () => { wrapper.removeEventListener('click', handleClick, true); if (navigator.clipboard.writeText !== originalWriteText) { navigator.clipboard.writeText = originalWriteText; } }; }, [copyText]); return
{displayText}
; }; 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](/docs/get-started/authentication-and-authorization-flow/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](/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)). To implement the Implicit Flow with Form Post, you can use the following resources: * [Express OpenID Connect SDK](https://www.npmjs.com/package/express-openid-connect): 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 Reference](/docs/libraries/auth0js). * [Authentication API](https://auth0.com/docs/api/authentication): 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](/docs/secure/tokens/id-tokens). The ID token will contain basic user profile information. ## Prerequisites Register your app with Auth0. To learn more, read [Register Single Page Applications](/docs/get-started/auth0-overview/create-applications/single-page-web-apps). * 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](/docs/get-started/applications/update-grant-types). ## Authorize user 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. ### Authorization URL example export const codeExample1 = `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` | Denotes the kind of credential that Auth0 will return (code or token). For the Implicit Flow, the value can be `id_token`, `token`, or `id_token token`. Specifically, `id_token` returns an ID Token, and `token` returns an Access Token. | | `response_mode` | Specifies the method with which response parameters should be returned. For security purposes, the value should be `form_post`. In this mode, response parameters will be encoded as HTML form values that are transmitted via the HTTP POST method and encoded in the body using the `application/x-www-form-urlencoded` format. | | `client_id` | Your application's Client ID. You can find this value at your [Application's Settings](https://manage.auth0.com/#/applications/\{yourClientId}/settings). | | `redirect_uri` | 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](https://manage.auth0.com/#/Applications/\{yourClientId}/settings).

**Warning:** Per the [OAuth 2.0 Specification](https://tools.ietf.org/html/rfc6749#section-3.1.2), Auth0 removes everything after the hash and does *not* honor any fragments. | | `scope` | Specifies the [scopes](/docs/get-started/apis/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](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims) about users, such as `profile` and `email`, [custom claims](/docs/secure/tokens/json-web-tokens/json-web-token-claims#custom-claims) conforming to a [namespaced format](/docs/secure/tokens/json-web-tokens/create-custom-claims), or any scopes supported by the target API (for example, `read:contacts`). | | `state` | (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](/docs/secure/attack-protection/state-parameters). | | `nonce` | (required for `response_type` containing `id_token token`, otherwise recommended) A cryptographically random string that your app adds to the initial request and Auth0 includes inside the ID Token, [used to prevent token replay attacks](/docs/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post/mitigate-replay-attacks-when-using-the-implicit-flow). | | `connection` | (optional) Forces the user to sign in with a specific connection. For example, you can pass a value of `github` to send the user directly to GitHub to log in with their GitHub account. When not specified, the user sees the Auth0 Lock screen with all configured connections. You can see a list of your configured connections on the **Connections** tab of your application. | | `organization` | (optional) ID of the organization to use when authenticating a user. When not provided, if your application is configured to **Display Organization Prompt**, the user will be able to enter the organization name when authenticating. | | `invitation` | (optional) Ticket ID of the organization invitation. When [inviting a member to an Organization](/docs/manage-users/organizations/configure-organizations/invite-members), your application should handle invitation acceptance by forwarding the `invitation` and `organization` key-value pairs when the user accepts the invitation. | As an example, your HTML snippet for your authorization URL when adding login to your app might look like: export const codeExample2 = ` Sign In `; ### Response If all goes well, you'll receive an `HTTP 302` response. The requested credentials are encoded in the body: ```json lines theme={null} 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`. | Response Type | Components | | --------------- | ------------------------------------------------------------------ | | id\_token | ID Token | | token | Access Token (plus `expires_in` and `token_type` values) | | id\_token token | ID Token, Access Token (plus `expires_in` and `token_type` values) | Auth0 will also return any state value you included in your call to the authorization URL. Validate your tokens before saving them. To learn how, read [Validate ID Tokens](/docs/secure/tokens/id-tokens/validate-id-tokens) and [Validate Access Tokens](/docs/secure/tokens/access-tokens/validate-access-tokens). ID tokens contain user information that must be decoded and extracted. ## 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: export const codeExample3 = `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. ### Request 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: export const codeExample4 = `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: ```json lines theme={null} { "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 } ``` ### Request 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 need to go to [Auth0 Dashboard > Authentication > Social](https://manage.auth0.com/#/connections/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: export const codeExample5 = `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: ```json lines theme={null} { "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 } ``` ## Learn more * [OAuth 2.0 Authorization Framework](/docs/authenticate/protocols/oauth) * [OpenID Connect Protocol](/docs/authenticate/protocols/openid-connect-protocol) * [Tokens](/docs/secure/tokens) * [Mitigate Replay Attacks When Using the Implicit Flow](/docs/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post/mitigate-replay-attacks-when-using-the-implicit-flow) * [Register Single-Page Web Applications](/docs/get-started/auth0-overview/create-applications/single-page-web-apps) * [Update Grant Types](/docs/get-started/applications/update-grant-types)