> For the complete documentation index, see [llms.txt](https://docs.quasr.io/quasr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quasr.io/quasr/getting-started/connect-your-app.md).

# Connect your app

You have 3 options on how to connect your applications:

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>HOSTED (recommended)</strong></td><td>You connect your app with Quasr using <strong>OpenID Connect</strong> and use the Quasr Hosted Login UI.</td><td>Choose this if you want to get started <strong>quickly</strong>.</td></tr><tr><td><strong>CUSTOM</strong></td><td>You connect your app with Quasr using <strong>OpenID Connect</strong> and use your own custom login UI (using the <strong>Authentication API</strong>).</td><td>Choose this if you want to <strong>customize</strong> your login page.</td></tr><tr><td><strong>EMBEDDED (warning)</strong></td><td>You connect your app with Quasr using the <strong>Authentication API</strong> and embed your own custom login UI in your app.</td><td>Choose this if your app sits on a <strong>constrained device</strong> (or you require no redirect / singular app).</td></tr></tbody></table>

{% hint style="danger" %}
If you choose the embedded setup your users won't experience Single Sign-On (SSO), meaning that if a user wants to log into another application on the same device they'll have to log in again. Hence we advise you only choose this approach if you operate on constrained devices that only run a single app. If your device can open a browser it can still be beneficial not to go the embedded route if you want to improve user experience across different channels.
{% endhint %}

{% tabs %}
{% tab title="HOSTED" %}
You connect your app to Quasr using OpenID Connect and use the Quasr hosted login page.

## OpenID Connect

OpenID Connect is an Internet standard for identity federation, meaning it allows your apps to use a centralized identity provider. The standard builds upon OAuth 2.0 which is relevant for API access control. Hence it combines both identity and access control for your apps.

Don't worry it's an easy standard, in short:

1. Your app redirects to the authorization endpoint on Quasr which triggers the login.
2. Your user signs up or logs in using the Quasr login page.
3. When finished Quasr redirects back to your application with tokens, both an identity and an access token. Both tokens are signed JWT tokens. Your application can consume the identity token to learn about the user; the acces token you can use towards your backend APIs.

See: [Hosted Login UI](/quasr/getting-started/connect-your-app/hosted-login-ui.md)

## Detailed Flow

Below sequence diagram detailing the entire flow.

<figure><img src="/files/nYPVt6XuNi71LQnHRV8s" alt=""><figcaption><p>Standard OpenID Connect (OIDC) flow with Hosted Login Page</p></figcaption></figure>

{% hint style="warning" %}
If your app is a mobile app be mindful it will need to follow redirects and open a browser for the login experience. Also the redirect URI will need to open the app from the browser (see: <https://stackoverflow.com/questions/25883113/open-ios-app-from-browser>).
{% endhint %}
{% endtab %}

{% tab title="CUSTOM" %}
You connect your app to Quasr using OpenID Connect and use your own custom login page.

## OpenID Connect

OpenID Connect is an Internet standard for identity federation, meaning it allows your apps to use a centralized identity provider. The standard builds upon OAuth 2.0 which is relevant for API access control. Hence it combines both identity and access control for your apps.

Don't worry it's an easy standard, in short:

1. Your app redirects to the authorization endpoint on Quasr which triggers the login.
2. Your user signs up or logs in using **your own custom** login page.
3. When finished Quasr redirects back to your application with tokens, both an identity and an access token. Both tokens are signed JWT tokens. Your application can consume the identity token to learn about the user; the access token you can use towards your backend APIs.

See: [Hosted Login UI](/quasr/getting-started/connect-your-app/hosted-login-ui.md)

## Authentication API

You build your custom login page using the Authentication API provided by Quasr.

Don't panic it's an easy flow, in short:

1. You sign up or login using the authentication factors and obtain a session token.
2. Once you reach the required score you can get a consent token with your session.
3. You redirect back to the authorization endpoint on Quasr using the consent token.

See: [Custom Login UI](/quasr/getting-started/connect-your-app/custom-login-ui.md)

## Detailed Flow

Below sequence diagram detailing the entire flow.

<figure><img src="/files/nYPVt6XuNi71LQnHRV8s" alt=""><figcaption><p>Standard OpenID Connect (OIDC) flow with Custom Login Page</p></figcaption></figure>

{% hint style="warning" %}
If your app is a mobile app be mindful it will need to follow redirects and open a browser for the login experience. Also the redirect URI will need to open the app from the browser (see: <https://stackoverflow.com/questions/25883113/open-ios-app-from-browser>).
{% endhint %}
{% endtab %}

{% tab title="EMBEDDED" %}
You connect your app to Quasr using the Authentication API and embed login in your app.

## Authentication API

You call the Authentication API provided by Quasr directly from your application.

The flow is straightforward:

1. You sign up or login using the authentication factors and obtain a session token.
2. Once you reach the required score you can get a consent token with your session.
3. You exchange the consent token for identity and access tokens at the token endpoint.

See: [Embedded Login UI](/quasr/getting-started/connect-your-app/embedded-login-ui.md)

## Detailed Flow

Below sequence diagram detailing the entire flow.

<figure><img src="/files/2zF9SNdfwijblrTNSgTB" alt=""><figcaption><p>Embedded flow</p></figcaption></figure>

{% hint style="info" %}
The token request above exchanges the consent token for identity and/or access tokens (this in contrast with the OIDC flows where an authorization code is used). This flow uses the OAuth 2.0 JWT grant type (`urn:ietf:params:oauth:grant-type:jwt-bearer`) and currently only accepts consent tokens.
{% endhint %}

{% hint style="warning" %}
Due to the embedded nature of this setup your app can contain up to five tokens:

1. **session token** (used for signup, login and consent = 2)\
   \&#xNAN;*only used against Quasr, short/long-lived and multiple use*
2. **consent token** (used to exchange for other tokens = 3/4/5)\
   \&#xNAN;*only used against Quasr, short-lived and single use*
3. **identity token** (to be used by your app for user info)\
   \&#xNAN;*only used by your app, short-lived and single use*
4. **access token** (to be used against your API backend)\
   \&#xNAN;*only used against Quasr and/or your API; short/long-lived and multiple use*
5. **refresh token** (to be used for obtaining new tokens = 3/4/5)\
   \&#xNAN;*only used against Quasr; long-lived and single use*

All play a distinct separate role and should be kept secure.
{% endhint %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quasr.io/quasr/getting-started/connect-your-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
