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 Oten Identity and how to configure guiding.

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

Typical characteristics

A Regular Web Application typically:

  • Is a web application accessed via a browser

  • Runs server-side logic (e.g. API routes, session handling)

  • Uses OAuth 2.0 Authorization Code flow

  • Relies on Redirect URIs and Logout URIs

  • Stores sensitive credentials (Client Secret) on the server

  • Uses frameworks such as Next.js

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

Why use a regular web application client?

Use this client type when:

  • Your application is a server-rendered or hybrid web application

  • You need to keep Client cecrets secure on the server

  • You want to integrate authentication using standard OAuth 2.0 / OIDC flows

  • You prefer a guided integration experience with ready-to-use code samples

  • You require a balance between security, flexibility, and ease of integration

What should i do next?

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:

  • Example integration code

  • Step-by-step guidance for authentication

  • A working sample using next.js, which is currently supported by Oten

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

Prerequisites

Before you begin, ensure you have:

  • An active Oten Developer account

  • An Integration App already created

  • A Regular Web Application client created in the Oten Developer Portal

  • Node.js 18 LTS or later

  • One of the following package managers:

    • npm

    • yarn

    • pnpm

Basic understanding of:

  • OAuth 2.0

  • OpenID Connect

  • Server-side web application concepts

  • Next.js fundamentals

I already understand. How do I process step by step?

Step 1: Open create application

  1. Sign in to the Oten Developer Portal

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

  3. Select Create app

Step 2: Select client type

Choose Regular web application as the client type.

Step 3: Review client characteristics

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

For a Regular web application:

  • Designed for server-side web applications

  • Authentication is handled on the backend

  • Language / Framework support: Next.js

  • Suitable for applications that can securely store a client secret

Once confirmed, continue to configure the client settings.

Step 4: Configure redirect URIs

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

Requirements:

  • At least one Redirect URI is required

  • URIs must be valid and explicitly listed

  • Multiple URIs can be added (comma-separated or one per line)

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.

Step 5: Create the client

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

Step 6: Integrate application

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

  • Quick start

  • Configure

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:

  • Application type: Regular Web Application

  • Framework: Next.js

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:

  • Node.js 18 LTS or newer

  • npm 9+, yarn 1.22+, or pnpm 8+

  • An Oten Identity account and an existing Integration App

  • A client created for a Regular web application

Next.js compatibility:

  • This Quick Start uses Next.js 14+

  • Uses App router

  • Authentication integration is based on NextAuth v4

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:

  • NextAuth v4 for authentication handling

  • OIDC / OAuth 2.0 integration with Oten Identity

These dependencies are used to:

  • Handle OAuth 2.0 / OpenID Connect Authorization Code flow

  • Manage user sessions securely on the server

  • Integrate Oten Identity as an external Identity Provider

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:

  • Oten authorization domain (OTEN_IDP_ISSUER)

  • Client ID

  • Client secret

  • NextAuth secret

  • NextAuth URL

6.1.6 Configure client URLs

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

  • Redirect URIs

    http://localhost:3000/api/auth/callback/oten-idp

  • Logout URIs

    http://localhost:3000

  • Allowed origins (CORS)

    http://localhost:3000

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:

  • Create the libs directory and the auth.ts configuration file

  • Add the NextAuth v4 configuration for Oten Identity

  • Configure authentication using the Authorization Code flow with PKCE

  • Specify token signing and security settings as required by Oten Identity

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:

  • Create the API route directory under app/api/auth/[...nextauth]

  • Define the route handler using NextAuth

  • Register both GET and POST handlers for authentication callbacks

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:

  • Login button

  • Logout button

  • User profile display

  • Session provider wrapper

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:

  • Replace the contents of app/layout.tsx

  • Import and apply the SessionProvider

  • Ensure all application pages are rendered within the authentication context

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:

  • Replace the contents of app/globals.css

  • Import required fonts

  • Apply global CSS rules for layout and typography

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:

  • Implemented as a Server Component

  • Uses getServerSession from next-auth to retrieve the session securely on the server

  • Conditionally renders:

    • Login action when the user is not authenticated

    • Profile information and logout action when the user is authenticated

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:

  • Open the application in your browser (default: http://localhost:3000)

  • Click Login to initiate authentication via Oten Identity

  • After successful login, verify that:

    • User profile information is displayed

    • Logout functionality works as expected

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

Step 7: Completion & next actions

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:

  • Go to Configure Review or update client configuration settings such as credentials, redirect URLs, and OpenID Connect options.

  • Create another client Create an additional client under the same Integration App (for example, for a different environment).

  • Create another app Start a new Integration App and begin a separate integration journey.

Step 8: Additional configuration (optional)

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:

  • Oten Authentication API

  • My Account API

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.

PreviousEnvironments: sandbox & productionNextNative application client

Last updated