> ## Content Index
> Fetch the complete content index at: https://blog.fabrixly.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# How to Integrate Fabrixly-IDS with Next.js
- URL: https://blog.fabrixly.com/how-to-integrate-with-nextjs/
- Published: 2026-07-07T14:10:41.000Z
- Updated: 2026-07-07T14:10:41.000Z
- Author: Fabrixly
- Tags: Documentation

This guide explains how to secure a **Next.js (App Router)** application using Fabrixly-IDS and the standard **NextAuth.js (Auth.js)** library.

---

## 🏗️ Architecture Overview

NextAuth.js manages authorization flows, token exchanges, session caching, and silent refreshes inside the Next.js server-side backend context (`/api/auth/*` route handlers), exposing custom react hooks to the client components.

---

## Step 1: Install Dependencies

```bash
npm install next-auth

```

---

## Step 2: Configure NextAuth Router Handler

Create a route handler for Auth.js. NextAuth will automatically intercept redirects and exchange OIDC authorization codes.

Create `src/app/api/auth/[...nextauth]/route.ts`:

```typescript
import NextAuth, { NextAuthOptions } from "next-auth";

export const authOptions: NextAuthOptions = {
  providers: [
    {
      id: "fabrixly",
      name: "Fabrixly IDS",
      type: "oauth",
      wellKnown: "https://ids.fabrixly.com/oidc/.well-known/openid-configuration",
      authorization: { params: { scope: "openid profile email offline_access" } },
      idToken: true,
      checks: ["pkce", "state"],
      clientId: process.env.FABRIXLY_CLIENT_ID,
      clientSecret: process.env.FABRIXLY_CLIENT_SECRET,
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name || profile.preferred_username,
          email: profile.email,
          image: profile.picture
        };
      }
    }
  ],
  callbacks: {
    async jwt({ token, account }) {
      // Store the access token and refresh token in the JWT session object
      if (account) {
        token.accessToken = account.access_token;
        token.refreshToken = account.refresh_token;
      }
      return token;
    },
    async session({ session, token }: any) {
      session.accessToken = token.accessToken;
      return session;
    }
  },
  pages: {
    signIn: "/auth/signin" // Optional custom login page
  }
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

```

---

## Step 3: Configure Environment Variables

Create `.env.local` in the project root:

```env
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=a-secure-random-32-character-secret-key-change-this

FABRIXLY_CLIENT_ID=your-nextjs-client-id
FABRIXLY_CLIENT_SECRET=your-nextjs-client-secret

```

---

## Step 4: Configure Session Provider

To share session state across client components, wrap the layout in the `SessionProvider`.

Create `src/components/AuthProvider.tsx` (Client component wrapper):

```typescript
"use client";

import { SessionProvider } from "next-auth/react";

export function AuthProvider({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

```

Import this wrapper inside `src/app/layout.tsx`:

```typescript
import { AuthProvider } from "@/components/AuthProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

```

---

## Step 5: Implement Login Hooks in Pages

Create `src/app/page.tsx`:

```typescript
"use client";

import { signIn, signOut, useSession } from "next-auth/react";

export default function Home() {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return <div style={{ padding: "40px" }}>Loading session context...</div>;
  }

  if (session) {
    return (
      <div style={{ padding: "40px" }}>
        <h1>Welcome, {session.user?.name || "User"}! ⚡</h1>
        <p>Logged in as: {session.user?.email}</p>
        <button onClick={() => signOut()}>Sign Out</button>
      </div>
    );
  }

  return (
    <div style={{ padding: "40px", textAlign: "center" }}>
      <h1>Next.js + Fabrixly-IDS 🔐</h1>
      <button onClick={() => signIn("fabrixly")}>Sign In with Fabrixly</button>
    </div>
  );
}

```

---

## Step 6: Registering the Client in Admin Console

1. Open the **Clients** portal of the **Fabrixly-IDS Admin Console**.
2. Click **Create Client**:
  - **Client ID**: `your-nextjs-client-id`
  - **Grant Types**: `authorization_code`, `refresh_token`
  - **Response Types**: `code`
  - **Redirect URIs**: `http://localhost:3000/api/auth/callback/fabrixly` (Auth.js default callback route)
  - **Token Endpoint Auth Method**: `client_secret_post` (or `client_secret_basic`)
3. Save, copy the client ID and Secret into your `.env.local` file, and run your Next.js application!