Single page application client

Currently, the Quick Start guide and technical support for this client type are optimized for the React, Javascript framework.

Why am i here?

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

• Creating an integration app

• 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?

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

1. Sign in to the Oten Developer portal

2. Navigate to: App Management → Integration App → App detail

3. Select Create app

You are now on the Create client screen.

Step 2: Select client type

Under Client type, choose:

Single page application

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

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

In the Configure client URIs section, enter:

Redirect URIs (required)

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

After verifying the configuration:

1. Confirm Single Page Application is selected

2. Review redirect URIs

3. Click Create client

The system creates a new SPA client.

Step 6: Use Quick start to integrate your frontend

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.

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.

6.3 Create a new react project

Create a new React project using Vite:

• Initialize the project

• Navigate into the project directory

• Install dependencies

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

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

6.5 Configure Oten identity provider

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

Note :

• Copy the Client ID from the Configure tab

  

6.6 Configure client URLs

In Client details → Settings, configure the following:

• 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

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

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.

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

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

Step 7: Completion & next actions

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

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)

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

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

8.3 OpenID connect settings

Configure OpenID Connect–related options, including:

• Back-Channel Logout URI

• Session and logout behavior

• Other OIDC-specific parameters