# 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>


---

# Agent Instructions: 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://oten.gitbook.io/identity-support/integration/integration-document/idp-integration/single-page-application-client.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.