> 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 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. 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? 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? 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. #### 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 [**OXU Developer portal**](https://developer.oten.live/) 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