Skip to main content

Configure a Single-Page Application

A Single-Page Application (SPA) is an application that runs primarily in the user's browser.

Use this application type for browser-based frameworks such as:

  • React
  • Vue
  • Angular
  • Other client-side JavaScript applications

Quant0 uses the Authorization Code + PKCE flow for Single-Page Applications.

When to Use a Single-Page Application​

Choose Single-page app when:

  • Your application runs primarily in the browser.
  • Authentication is initiated from frontend code.
  • Your application does not have a trusted backend that can securely store a client secret.
  • You are building a React, Vue, Angular, or similar client-side application.

Authentication flow: Authorization Code + PKCE

Create a Single-Page Application​

To create a Single-Page Application:

  1. Open the Quant0 Organization Portal.

  2. Navigate to Applications.

  3. Select Create application.

  4. Select Single-page app.

  5. Select Continue.

Configure Application Basics​

The Basics step allows you to configure how the application appears in Quant0.

Name​

Enter a name that clearly identifies your application.

Example:

My React Application

Description​

The description is optional.

Example:

Customer-facing React application

Use the description to help administrators understand the purpose of the application.

Configure URLs​

The URLs step contains the redirect and browser-related configuration.

Allowed Callback URLs​

The callback URL is the location where Quant0 redirects the user after the authentication flow is completed.

Example:

https://app.example.com/callback

The callback URL is matched exactly.

For example, if you configure:

https://app.example.com/callback

then the following URL is considered different:

https://app.example.com/callback/

Important: Make sure the callback URL configured in Quant0 exactly matches the URL used by your application.

Allowed Web Origins​

Web origins are used for browser requests and CORS configuration.

Example:

https://app.example.com

A web origin should contain only the scheme and host.

Valid:

https://app.example.com

Invalid:

https://app.example.com/login

Sign-Out URLs​

You can optionally configure a URL where users are redirected after signing out.

Example:

https://app.example.com/signed-out

If no sign-out URL is configured, the user is returned to Quant0 after signing out.

Login Entry Point​

You can optionally configure where users should start the application's sign-in flow.

Example:

https://app.example.com/login

Configure Sign-In and Security​

The Sign-in & security step allows you to configure authentication and security options.

Require PKCE​

For a Single-Page Application, PKCE should remain enabled.

Configuration:

Require PKCE: Enabled

PKCE helps protect the authorization code flow for public clients.

Security recommendation: Keep PKCE enabled for Single-Page Applications.

Password Sign-Up​

Enable this option if users should be able to register using an email address and password.

Configuration:

Password sign-up: Enabled

Enable this option if users should be able to sign in using a link sent to their email address.

Configuration:

Magic link: Enabled

Require Verified Email​

When enabled, users must verify their email address before signing in.

Configuration:

Require verified email: Enabled

Configure Who Can Sign In​

Quant0 provides three options for controlling who can access the application.

Open​

Anyone in the organization can sign in.

Open

Invite Only​

Only users who have been explicitly invited can sign in.

Invite only

Admin Assign​

Only users assigned to the application by an administrator can sign in.

Admin assign

Choose the option that best matches your application's access requirements.

Configure Maximum Session Lifetime​

You can configure the maximum session lifetime in seconds.

Example:

3600

If the value is left at the organization default, the application uses the organization's default session policy.

Review the Application​

Before creating the application, Quant0 displays a Review page.

Review the following configuration:

  • Application type
  • Application name
  • Callback URLs
  • Web origins
  • Sign-out URLs
  • Login entry point
  • PKCE configuration
  • Sign-in methods
  • Email verification
  • Session lifetime
  • Who can sign in
  • Application group

Example Configuration​

Type:
Single-page app · Authorization Code + PKCE

Name:
My React Application

Callback URL:
https://app.example.com/callback

Web origin:
https://app.example.com

PKCE:
Required

Sign-in methods:
Password sign-up

Require verified email:
Yes

Who can sign in:
Open

After verifying the configuration, select Create application.

After creating application go to overview