Regular web application client

This page helps you determine if a regular web application 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 Next.js 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 next.js web application

What is a regular web application?

In the context of OXU Identity, A regular web application is a web app that has a backend server handling authentication. Users log in through the browser, but the login process and session management are managed securely on the server side.

Choose a regular web application if your app:

Has a backend server (for example: Next.js with server-side logic)
Handles login, tokens, or sessions on the server
Needs to keep client secrets secure

This client type is recommended for most production web applications.

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
Client configuration is managed through the Oten Developer Portal

A Regular Web Application typically:

Note: The current Quick Start integration for Regular Web Applications supports Next.js only.

Use this client type when:

If you already know that your application is a regular web application, continue by opening the quick start tab.

In quick start, you will find:

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

Before you begin, ensure you have:

Basic understanding of:

Choose Regular web application as the client type.

Review the selected client type and its supported technology, then proceed to the next step.

For a Regular web application:

Once confirmed, continue to configure the client settings.

Enter the Redirect URI(s) that Oten Identity will use to redirect users back to your application after authentication.

Requirements:

Example (Next.js):

https://your-app.com/callback, http://localhost:3000/callback

These Redirect URIs must match exactly with the callback route implemented in your application.

Click Create client to finalize client creation. You will be redirected to the Client detail page.

After the client is created, the Client detail page provides two integration options:

You can choose either approach based on your technical experience and integration requirements.

6.1 Quick start

Quick Start provides guided integration steps with ready-to-use code samples for server-side web applications.

This option is recommended if you are building a Regular web application using Next.js and want to integrate Oten Identity quickly with minimal manual configuration.

6.1.1 Select your technology

Select your technology stack to receive customized integration instructions.

Based on the current UI:

Note: Quick Start currently supports Next.js for Regular Web Applications.

6.1.2 Review prerequisites

Before continuing, ensure your local environment meets the following requirements:

Next.js compatibility:

6.1.3 Create a new Next.js project

Create a new Next.js project using the provided command, or use an existing Next.js application.

The Quick Start uses Next.js (app router) as the framework.

6.1.4 Install authentication dependencies

Install the required authentication dependencies:

These dependencies are used to:

6.1.5 Configure Oten Identity provider

Configure your Next.js application using environment variables from the Client detail page.

You need the following values:

6.1.6 Configure client URLs

In the Client configuration, set the following URLs exactly as shown in the Quick start:

All URLs must exactly match your application’s runtime URLs. Invalid or missing URLs will cause authentication failures.

6.1.7 Configure auth configuration

Create the authentication configuration used by NextAuth.

This step defines how your application integrates with Oten Identity using OAuth 2.0 and OpenID Connect.

Actions:

Note: The configuration uses PKCE (Proof Key for Code Exchange) for enhanced security. Oten Identity uses the EdDSA algorithm for signing tokens.

6.1.8 Create NextAuth API route

Create the API route that handles authentication requests.

This route connects your application to the authentication configuration defined in the previous step.

Actions:

This API route is responsible for processing login, callback, and session-related requests.

6.1.9 Create authentication components

Create authentication-related components in your Next.js application, including:

These components use NextAuth hooks and APIs and are implemented as client components where required.

Use the provided Quick start code samples as the reference implementation.

6.1.10 Update the root layout

Update the application root layout to enable authentication context across the app.

This step wraps the entire application with the session provider so authenticated user state is available globally.

Actions:

This configuration is required for session management and authenticated routing to function correctly.

6.1.11 Add styles

Add the global styles used by the sample application.

This step applies base styling and font configuration to ensure consistent UI rendering.

Actions:

This step is optional for authentication functionality, but recommended for matching the sample application appearance.

6.1.12 Update the home page

Replace the contents of app/page.tsx with the provided implementation.

This page acts as the main entry point of the application and demonstrates how authentication state is handled on the server.

Key characteristics:

This approach avoids client-side session fetching and ensures better security and performance.

6.1.13 Run your application

Start the development server by running the following command:

Once the server is running:

At this point, the Regular Web Application integration with Oten Identity is complete and fully functional.

After completing Quick start, you will see a confirmation message indicating that the integration is successful:

From here, you can choose one of the following actions:

Additional configuration is available in the Configure tab on the Client detail page. This section allows you to manually review and manage client credentials, application URLs, and OpenID Connect–related settings.

8.1 Client credentials

The Client credentials section provides the information required to configure authentication in your application.

Client ID A unique identifier for the client, used by your application when interacting with Oten Identity.

Client secret A confidential credential associated with the client.

Important: Client secrets must remain private for confidential client types and must never be exposed publicly or included in frontend code.

8.2 Configure client URIs

The Configure client URIs section defines the URLs used during authentication and API access.

Redirect URIs A list of allowed callback URLs where users are redirected after successful authentication. Entries can be separated by commas or new lines.

Only URLs included in this list are accepted. Any invalid or missing redirect URI will cause authentication to fail.

Allow origins (CORS) A list of allowed origins permitted to make cross-origin requests to:

Allowed callback URLs are automatically included in this list.

8.3 OpenID Connect

The OpenID Connect section contains protocol-level configuration options.

Back-Channel Logout URI A server endpoint that receives logout notifications from Oten Identity to invalidate user sessions when a logout event occurs.

This mechanism operates without browser redirects and enables secure single logout across applications.

Additional OpenID Connect settings are optional and intended for advanced integration scenarios.