> For the complete documentation index, see [llms.txt](https://oten.gitbook.io/identity-support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://oten.gitbook.io/identity-support/integration/integration-document/idp-integration/single-page-application-client.md).

# Single page application client

This section is part of OAuth 2.0 / OpenID Connect (OIDC) integration.\
Currently, the Quick Start guide and technical support for this client type are optimized for the **React**, **Javascript** framework.

### Why am i here? <a href="#i-am-new.-where-should-i-start" id="i-am-new.-where-should-i-start"></a>

If this is your first time integrating with Oten Identity, start with:

* **Creating an** [**integration app**](/identity-support/integration/integration-document.md)
* **Creating a regular web application client**
* **Using quick start to integrate authentication into your React**, **Javascript Single Page application**

#### What is a Single page application? <a href="#what-is-a-single-page-application" id="what-is-a-single-page-application"></a>

In the context of Oten Identity, a single page application is a browser-based application where all logic runs on the client side.

Authentication happens directly in the browser, and no backend server is used to manage login sessions or store secrets.

Choose a single page application if your app:

* Runs entirely in the browser (for example: React, Vue, Angular)
* Does not have a backend handling authentication
* Cannot safely store a client secret

This client type is designed for public clients where secrets must not be exposed.

#### Key characteristics include:

* Authentication is handled using OAuth 2.0 / OpenID Connect
* Uses redirect-based authentication
* Integrates with Oten Identity via the Authorization Code flow with PKCE
* Does not use a client secret
* Client configuration is managed through the Oten Developer Portal

#### Why use a SPA client?

Use this client type when:

* Your app runs fully in the browser
* You do not control or rely on a backend for authentication
* You need a fast, lightweight login experience
* You want to integrate authentication using frontend SDKs

SPA clients are optimized for modern web applications with minimal infrastructure.

#### What should i do next?

If you already know that your application is a single page application, continue by opening the **quick start** tab.

In quick start, you will find:

* Example integration code
* Step-by-step authentication guidance
* A working sample for frontend integration

Follow the instructions to integrate login with Oten into your application.

**Prerequisites**

* An **Integration application** already exists
* You know the public URL of your frontend application
* You understand basic OAuth / OIDC login flows
* You can configure redirect URLs in your frontend app

**Recommended knowledge:**

* OAuth 2.0 Authorization Code Flow with PKCE
* OpenID Connect basics
* Browser security concepts (redirects, tokens)

### I already understand. How do I proceed step by step?

#### Step 1: Open create client <a href="#step-1-open-create-client" id="step-1-open-create-client"></a>

1. Sign in to the [**Oten Developer portal**](https://developer.oten.live/)
2. Navigate to: **App Management** → **Integration App** → **App detail**
3. Select **Create app**<br>

<figure><img src="/files/Qtg4nUjLJjsglo324zvr" alt=""><figcaption></figcaption></figure>

You are now on the **Create client** screen.

#### Step 2: Select client type <a href="#step-2-select-client-type" id="step-2-select-client-type"></a>

Under **Client type**, choose:

**Single page application**

This option is designed for browser-based applications that do not use a backend to handle authentication.

<figure><img src="/files/lT6xXwXNLI46pGgkJnVN" alt=""><figcaption></figcaption></figure>

#### Step 3: Review client characteristics

By selecting **Single page application**, the client will:

* Use OAuth 2.0 Authorization Code Flow with **PKCE**
* **Not** use a Client Secret
* Authenticate users directly from the browser
* Exchange tokens without exposing sensitive credentials
* Rely strictly on redirect URI validation

This client type is considered a **public client**.

#### Step 4: Configure redirect URIs <a href="#step-4-configure-redirect-uris" id="step-4-configure-redirect-uris"></a>

In the **Configure client URIs** section, enter:

**Redirect URIs** (required)

<figure><img src="/files/LYFNHKThevLyEieDXJn5" alt=""><figcaption></figcaption></figure>

These URLs define where users are redirected after successful login.

**Guidelines:**

* Must exactly match your frontend routes
* HTTPS is recommended (required in production)
* Multiple URLs can be added
* Separate entries by comma or newline

**Example:**

`https://app.example.com/callback, http://localhost:3000/callback`

> Any redirect URI not listed here will be rejected during authentication.

#### Step 5: Create the client <a href="#step-5-create-the-client" id="step-5-create-the-client"></a>

After verifying the configuration:

1. Confirm **Single Page Application** is selected
2. Review redirect URIs
3. Click **Create client**<br>

<figure><img src="/files/xuGsDMUZKQ01wmZKxF2Q" alt=""><figcaption></figcaption></figure>

The system creates a new SPA client.

#### Step 6: Use Quick start to integrate your frontend <a href="#step-6-use-quick-start-to-integrate-your-frontend" id="step-6-use-quick-start-to-integrate-your-frontend"></a>

After onboarding, you are redirected to **Client detail**, which contains two tabs:

* **Quick start**
* **Configure**

By default, the **Quick start** tab is displayed. This section provides ready-to-use integration guidance based on your selected client type.

<figure><img src="/files/RM46UgHZr7ZGQXsRQVAZ" alt=""><figcaption></figcaption></figure>

**6.1 Select your technology**

Under **Select your technology**, choose the framework used by your application.

For Single Page Applications, supported options include:

* **React**
* **JavaScript (Vanilla)**

Selecting a technology updates the setup instructions and code samples accordingly.

**6.2 Review prerequisites**

Before proceeding with the integration, ensure the following requirements are met:

* **Node.js 18 LTS or newer**
* One of the following package managers:
  * npm 9+
  * yarn 1.22+
  * pnpm 8+
* An active **Oten IDP account**
* A configured **Single page application client**

> **Note**\
> For React-based setups, this Quick Start supports **React 18.x and newer**.

<figure><img src="/files/qVvioj4ha2eDQLGcvBr8" alt=""><figcaption></figcaption></figure>

**6.3 Create a new react project**

Create a new React project using Vite:

* Initialize the project
* Navigate into the project directory
* Install dependencies<br>

<figure><img src="/files/b430uZH9VN9tpqjjTpAo" alt=""><figcaption></figcaption></figure>

This sets up the base application for OIDC integration.

**6.4 Install OIDC dependencies**

Install the required OIDC libraries:

* `react-oidc-context`
* `oidc-client-ts`<br>

<figure><img src="/files/1Hu29pNhkscYKQrJVGmW" alt=""><figcaption></figcaption></figure>

These libraries handle authentication flows and token management with Oten Identity.

**6.5 Configure Oten identity provider**<br>

1. Create a `.env` file at the project root.
2. Add the required environment variables:
   * Oten Authorization Domain
   * Client ID
3. In the Oten Developer Portal:
   * Open **Integration app**
   * Select your application
   * Open **Client details**
   * Copy the **Client ID** from the **Configure** tab

<figure><img src="/files/lcpBQijCSzQC6Vpim9Rd" alt=""><figcaption></figcaption></figure>

Note :

* Copy the **Client ID** from the **Configure** tab\ <br>

  <figure><img src="/files/DJI4mloLDBqvTN9cYNxn" alt=""><figcaption></figcaption></figure>

**6.6 Configure client URLs**

In **Client details → Settings**, configure the following:

<figure><img src="/files/H3xbD9kr3zjJBEJ3PfkQ" alt=""><figcaption></figcaption></figure>

* **Redirect URIs**\
  Used after successful authentication\
  Example: `http://localhost:5173`
* **Logout URIs**\
  Used after user logout\
  Example: `http://localhost:5173`
* **Allow Origins (CORS)**\
  Required for browser-based requests\
  Example: `http://localhost:5173`

> Important\
> Only URLs listed here are allowed. Invalid or missing URLs will cause authentication failures.

**6.7 Create authentication components**

Create the following components in your React application:

* Login button
* Logout button
* User profile display

<figure><img src="/files/WG36ludQgobBZvz74AkM" alt=""><figcaption></figcaption></figure>

These components interact with Oten Identity via the OIDC context.

**6.8 Configure auth provider**

Wrap the application with the OIDC provider:

* Configure authority (Oten domain)
* Set client ID
* Define redirect and logout behavior
* Handle sign-in callback state cleanup

<figure><img src="/files/XqJqwQMdmlnGyBJxLe08" alt=""><figcaption></figcaption></figure>

This step enables authentication across the entire application.

**6.9 Apply styles (optional)**

Replace default styles with the provided CSS to match the example UI.

<figure><img src="/files/iTd1Pie0CmYkx6nHRm81" alt=""><figcaption></figcaption></figure>

This step is optional and does not affect authentication logic.

**6.10 Update application entry point**

Update the main application component to:

* Render login/logout actions
* Display authenticated user information
* Handle loading and error states

<figure><img src="/files/2rdjM00VAJRXhZByTqwn" alt=""><figcaption></figcaption></figure>

**6.11 Run the application**

Start the development server:

* Launch the app locally
* Open the browser at the configured origin
* Test the login and logout flows end-to-end

<figure><img src="/files/MMqjJg6eQI82dJ9FEGC9" alt=""><figcaption></figcaption></figure>

#### Step 7: Completion & next actions <a href="#step-7-completion-and-next-actions" id="step-7-completion-and-next-actions"></a>

After completing the Quick Start, a confirmation screen is displayed:

<figure><img src="/files/PrxFZ3Ryv88s6NnfH7UR" alt=""><figcaption></figcaption></figure>

You can now choose one of the following actions:

* **Go to Configure**\
  Continue configuring advanced client settings (SSO, MFA, policies)
* **Create another client**\
  Add an additional client (e.g. mobile app, another SPA)
* **Create another app**\
  Start a new integration application from scratch

#### Step 8: Additional configuration (optional) <a href="#step-8-additional-configuration-optional" id="step-8-additional-configuration-optional"></a>

For production or advanced use cases, further configuration is available under the **Configure** tab.

**8.1 Client credentials**

This section provides credentials required for SDK and API integration:

* **Client ID**\
  Used to identify your application when interacting with Oten services
* **Client secret**\
  Required for confidential client types

  Client secrets must remain private and must not be exposed publicly

<figure><img src="/files/E4oHGPqxtaUgJfhtDO1I" alt=""><figcaption></figcaption></figure>

**8.2 Configure client URIs**

Define the URLs used in authentication and authorization flows:

* **Redirect URIs**\
  Approved callback URLs after successful login\
  (Supports comma-separated or newline-separated entries)
* **Allow origins (CORS)**\
  Domains allowed to make cross-origin requests to Oten APIs\
  Redirect URIs are automatically included

<figure><img src="/files/bVMrpOMwde7HlSFAE0kh" alt=""><figcaption></figcaption></figure>

&#x20;

**8.3 OpenID connect settings**

Configure OpenID Connect–related options, including:

* Back-Channel Logout URI
* Session and logout behavior
* Other OIDC-specific parameters

<figure><img src="/files/16Y37p20SvoWXgbYCqQy" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/WQX3js0qIOx0aL7fe42X" alt=""><figcaption></figcaption></figure>