By Fabrixly in Documentation — 07 Jul 2026

How to Integrate Fabrixly-IDS with Next.js

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

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:

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:

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

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

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

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

Create src/app/page.tsx:

"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

Open the Clients portal of the Fabrixly-IDS Admin Console.
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)
Save, copy the client ID and Secret into your .env.local file, and run your Next.js application!