# Regular web application client

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? <a href="#i-am-new.-where-should-i-start" id="i-am-new.-where-should-i-start"></a>

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 next.js web application**

#### What is a regular web application? <a href="#what-is-a-regular-web-application" id="what-is-a-regular-web-application"></a>

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? <a href="#why-use-a-regular-web-application-client" id="why-use-a-regular-web-application-client"></a>

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 <a href="#prerequisites" id="prerequisites"></a>

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? <a href="#i-already-understand.-how-do-i-proceed-step-by-step" id="i-already-understand.-how-do-i-proceed-step-by-step"></a>

#### Step 1: Open create application <a href="#step-1-open-create-client" id="step-1-open-create-client"></a>

1. Sign in to the [**Oten Developer Portal**](https://developer.oten.live/)
2. Navigate to: **App Management** → **Integration app** → **App detail**
3. Select **Create app**

<figure><img src="/files/fnuBF0xGCumrwQnowDKy" alt=""><figcaption></figcaption></figure>

#### Step 2: Select client type <a href="#step-2-select-client-type" id="step-2-select-client-type"></a>

Choose **Regular web application** as the client type.

<figure><img src="/files/Clvnu2W17VZwOYAX84Wo" alt=""><figcaption></figcaption></figure>

#### Step 3: Review client characteristics <a href="#step-3-review-client-characteristics" id="step-3-review-client-characteristics"></a>

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.

<figure><img src="/files/EbVJqqsjFmQZNJrvBF7O" alt=""><figcaption></figcaption></figure>

#### Step 5: Create the client <a href="#step-5-create-the-client" id="step-5-create-the-client"></a>

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

<figure><img src="/files/I8ti8OwJ4VpJAm7GLo7L" alt=""><figcaption></figcaption></figure>

#### Step 6: Integrate application <a href="#step-6-integrate-your-application" id="step-6-integrate-your-application"></a>

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**&#x20;

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.

<figure><img src="/files/sxArrzkRQdtjvrvq3QZE" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/QgV893qGFPNmcgWo3o7X" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/HWLd4Z6CxoHlOS95XjrX" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/i108HhAftpROdEqRxNXq" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/TLwwZqFtuFit6Nz9BKjZ" alt=""><figcaption></figcaption></figure>

**6.1.6 Configure client URLs**

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

<figure><img src="/files/ikqQRH1PAmqgxfEZdwue" alt=""><figcaption></figcaption></figure>

* **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.

<figure><img src="/files/ArNV3EE0yvEue0tc6Af1" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/MGDovWTIAQezxpprfM7G" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/HhxA9rFTFrJjXRI1C4Xf" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/1FIwN0evklyxjJINnzWa" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/WSzA7jXLS1hrct4I2l98" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/deLpnnry1KAgx50W8Rvk" alt=""><figcaption></figcaption></figure>

**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:

<figure><img src="/files/fKbFdDbeS5ctp7isCtRd" alt=""><figcaption></figcaption></figure>

**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 <a href="#step-7-completion-and-next-actions" id="step-7-completion-and-next-actions"></a>

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

<figure><img src="/files/KOqmQQGTIb91e8LK6TZ7" alt=""><figcaption></figcaption></figure>

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) <a href="#step-8-additional-configuration-optional" id="step-8-additional-configuration-optional"></a>

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.

<figure><img src="/files/To3myZ3qU4tgxpY6CuCQ" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/tI5TlyDGkUAPqkCdD50e" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/HjkvobwMrcRqCrmTIziY" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/I6bNCdhFUAGjQ5z83OC2" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://oten.gitbook.io/identity-support/integration/integration-document/idp-integration/regular-web-application-client.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.