Single page application client
This page helps you determine if a single page application (SPA) is the right choice for the application you are integrating with OXU Identity and how to configure guiding.
Last updated
This page helps you determine if a single page application (SPA) is the right choice for the application you are integrating with OXU Identity and how to configure guiding.
Last updated
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.
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
In the context of OXU 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.
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
Use this client type when:
SPA clients are optimized for modern web applications with minimal infrastructure.
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:
Follow the instructions to integrate login with Oten into your application.
Prerequisites
Recommended knowledge:
You are now on the Create client screen.
Under Client type, choose:
Single page application
This option is designed for browser-based applications that do not use a backend to handle authentication.
By selecting Single page application, the client will:
This client type is considered a public client.
In the Configure client URIs section, enter:
Redirect URIs (required)
These URLs define where users are redirected after successful login.
Guidelines:
Example:
https://app.example.com/callback, http://localhost:3000/callback
Any redirect URI not listed here will be rejected during authentication.
After verifying the configuration:
The system creates a new SPA client.
After onboarding, you are redirected to Client detail, which contains two tabs:
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:
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:
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:
This sets up the base application for OIDC integration.
6.4 Install OIDC dependencies
Install the required OIDC libraries:
These libraries handle authentication flows and token management with Oten Identity.
6.5 Configure Oten identity provider
Note :
6.6 Configure client URLs
In Client details → Settings, configure the following:
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:
These components interact with Oten Identity via the OIDC context.
6.8 Configure auth provider
Wrap the application with the OIDC provider:
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:
6.11 Run the application
Start the development server:
After completing the Quick Start, a confirmation screen is displayed:
You can now choose one of the following actions:
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:
8.2 Configure client URIs
Define the URLs used in authentication and authorization flows:
8.3 OpenID connect settings
Configure OpenID Connect–related options, including:
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
Example integration code
Step-by-step authentication guidance
A working sample for frontend integration
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
OAuth 2.0 Authorization Code Flow with PKCE
OpenID Connect basics
Browser security concepts (redirects, tokens)
Sign in to the OXU Developer portal
Navigate to: App Management → Integration App → App detail
Select Create app
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
Must exactly match your frontend routes
HTTPS is recommended (required in production)
Multiple URLs can be added
Separate entries by comma or newline
Confirm Single Page Application is selected
Review redirect URIs
Click Create client
Quick start
Configure
React
JavaScript (Vanilla)
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
Initialize the project
Navigate into the project directory
Install dependencies
react-oidc-context
oidc-client-ts
Create a .env file at the project root.
Add the required environment variables:
Oten Authorization Domain
Client ID
In the Oten Developer Portal:
Open Integration app
Select your application
Open Client details
Copy the Client ID from the Configure tab
Copy the Client ID from the Configure tab
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
Login button
Logout button
User profile display
Configure authority (Oten domain)
Set client ID
Define redirect and logout behavior
Handle sign-in callback state cleanup
Render login/logout actions
Display authenticated user information
Handle loading and error states
Launch the app locally
Open the browser at the configured origin
Test the login and logout flows end-to-end
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
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
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
Back-Channel Logout URI
Session and logout behavior
Other OIDC-specific parameters
