Issue while logging out from Keycloak Provider #12152

jyoti-r-4 · 2024-10-30T11:15:39Z

jyoti-r-4
Oct 30, 2024

I have a next JS 14 application, it's integrated with keycloak 25. I'm facing an issue in integrating Keycloak with Next.js 14 applicaiton.

If I'm logging in to my application on one tab, and opening another application on another tab, then that application also logging in.
If i am logging out from my application(Application A), then it's logging out from the other application(Application B) which is also integrated with keycloak25 . If I'm logging out from my application, then the session in keycloak gets removed and from both application it's getting logged out. But when i am logging out from the other application(Application B) and checking my application, it's not logging out in real time. If I'll print the token in my middleware.ts or status from session in SessionHandler.tsx, then it's printing token and status as authenticated.
If I'll logout my session from keycloak manually, that means there is no session active from keycloak side, still, it's active in my applciation.

I'm sharing my implementation with you:

**layout.tsx** 
import type { Metadata } from 'next'
import 'bootstrap/dist/css/bootstrap.css'
import { Inter } from 'next/font/google'
import './globals.css'
import SessionProviderWrapper from '@/components/auth_provider_wrapper'
import SessionHandler from '@/components/sessionHandler'
import { Toaster } from 'react-hot-toast'
import CreateUserApi from '@/components/create_user'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: "assessIt",
  description: "",
  icons: {
    icon: "/favicon.ico",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <SessionProviderWrapper>
      <html lang="en">
        <body className={`{inter.className}`}>
          <SessionHandler>
            <CreateUserApi />
            <Toaster position="bottom-center" />
            {children}
          </SessionHandler>
        </body>
      </html>
    </SessionProviderWrapper>
  )
}

**SessionProviderWrapper.tsx:**

'use client'
import { SessionProvider } from 'next-auth/react'

const SessionProviderWrapper = ({ children }: { children: React.ReactNode }) => {
    return (
        <SessionProvider>{children}</SessionProvider>
    )
}

export default SessionProviderWrapper`

**SessionHandler.tsx**

'use client'
import { useSession } from 'next-auth/react'
import NavBar from '@/components/navbar'
import SideBar from '@/components/sidebar'
import UserSideBar from '@/components/user/user_sidebar'
import UserNavBar from '@/components/user/user_navbar'
import Signin from '@/components/Signin'
import Loading from '@/app/loading'
import styles from './styles.module.css'


export default function SessionHandler({ children }: Readonly<{ children: React.ReactNode }>) {
  const { data: session, status } = useSession()

  if (status === 'loading') {
    return <div><Loading /></div>
  }

  if (!session) {
    return <Signin />
  }



  return (
    <div className='container-fluid'>
      <div className='row' style={{ height: '100vh' }}>
        <div className={`col-lg-3 col-xl-3 col-xxl-2 d-none d-lg-block p-0 ${styles.sidebar}`}>
          {session.user.isUser && <UserSideBar />}
          {session.user.isAdmin && <SideBar />}
        </div>
        <div className={`col-lg-9 col-xl-9 col-xxl-10 p-0 ${styles.main_container}`}>
          {session.user.isUser && <UserNavBar />}
          {session.user.isAdmin && <NavBar />}
          {children}
        </div>
      </div>
    </div>
  )
}

**middleware.ts** 

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { getToken } from "next-auth/jwt";

export async function middleware(request: NextRequest) {
  const token = await getToken({
    req: request,
    secret: process.env.NEXTAUTH_SECRET,
  });

  const { pathname } = request.nextUrl;


  if (!token && pathname !== "/login") {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  const roleRestrictions = {
    "/admin": ["Admin"],
    "/myassessment": ["Admin"],
    "/reports": ["Admin"],
    "/userManagements": ["Admin"],
    "/user/": ["User"],
  };

  for (const [path, roles] of Object.entries(roleRestrictions)) {
    if (pathname.startsWith(path)) {
      if (!token) {
        return NextResponse.redirect(new URL("/login", request.url));
      }

      const userRoles = JSON.parse(
        Buffer.from(token.access_token!.split(".")[1], "base64").toString()
      ).realm_access.roles;
      const hasRole = roles.some((role) => userRoles.includes(role));

      if (!hasRole) {
        return NextResponse.redirect(new URL("/403", request.url));
      }
    }
  }
  return NextResponse.next();
}

export const config = {
  matcher: [
    "/admin/:path*",
    "/myassessment/:path*",
    "/reports/:path*",
    "/userManagements/:path*",
    "/user/:path*",
  ],
};

**/api/auth/[...nextauth]/route.ts**

import NextAuth, { Session } from "next-auth";
import { JWT } from "next-auth/jwt";
import KeycloakProvider from "next-auth/providers/keycloak";

declare module "next-auth/jwt" {
  interface JWT {
    id_token?: string;
    provider?: string;
    access_token?: string;
    refresh_token?: string;
  }
}

declare module "next-auth" {
  interface Session {
    user: {
      sub?: string;
      id?: string;
      access_token?: string;
      roles?: string[];
      name?: string;
      email?: string;
      image?: string;
      isAdmin?: boolean;
      isUser?: boolean;
      isSuperadmin?: boolean;
      firstName?: string;
      lastName?: string;
      phone?: string;
    };
  }
}

export const authOptions = {
  
  providers: [
    KeycloakProvider({
      clientId: process.env.NEXT_PUBLIC_AUTH_CLIENT_ID!,
      clientSecret: process.env.NEXT_PUBLIC_AUTH_CLIENT_SECRET!,
      issuer: process.env.NEXT_PUBLIC_AUTH_ISSUER!,
    }),
  ],
 
  callbacks: {
    async jwt({ token, account }: { token: JWT; account: any }) {

      if (account) {
    
        token.id_token = account.id_token;
        token.provider = account.provider;
        token.access_token = account.access_token;
        token.refresh_token = account.refresh_token;
      }
      return token;
    },
    async session({ session, token }: { session: Session; token: JWT }) {
      
      session.user.sub = token!.sub;
      session.user.id = token!.id_token;
      session.user.access_token = token!.access_token;
      let roles = JSON.parse(
        Buffer.from(token.access_token!.split(".")[1], "base64").toString()
      ).realm_access.roles;
      session.user.isAdmin = roles.includes(
        process.env.NEXT_PUBLIC_AUTH_ROLE_ADMIN
      );
      session.user.isUser = roles.includes(
        process.env.NEXT_PUBLIC_AUTH_ROLE_USER
      );
      session.user.isSuperadmin = roles.includes(
        process.env.NEXT_PUBLIC_AUTH_ROLE_SUPERADMIN
      );
      let access_token = JSON.parse(
        Buffer.from(token.access_token!.split(".")[1], "base64").toString()
      );
      session.user.firstName = access_token.given_name;
      session.user.lastName = access_token.family_name;
      session.user.phone = access_token.phone;
      return session;
    },
    
  },
  pages: {
    error: "/",
    signOut: "/auth/signout",
  },

  events: {
    async signOut({ token }: { token: JWT }) {
      if (token.provider === "keycloak") {
        const logOutUrl = new URL(
          `${process.env.NEXT_PUBLIC_AUTH_ISSUER}/protocol/openid-connect/logout`
        );
        const urlencoded = new URLSearchParams();
        const header = new Headers();
        header.append("Content-Type", "application/x-www-form-urlencoded");
        urlencoded.append("refresh_token", token?.refresh_token!);
        urlencoded.append("client_id", process.env.NEXT_PUBLIC_AUTH_CLIENT_ID!);
        urlencoded.append(
          "client_secret",
          process.env.NEXT_PUBLIC_AUTH_CLIENT_SECRET!
        );

        try {
          const response = await fetch(logOutUrl.toString(), {
            headers: header,
            method: "POST",
            body: urlencoded.toString(),
          });
          console.log(response.status,"response");
          
          if (!response.ok) {
            const errorText = await response.text(); // Get the error response as text
            console.error("Logout failed:", response.status, errorText);
          } else {
            // Check if the response is JSON
            const contentType = response.headers.get("Content-Type");
            if (contentType && contentType.includes("application/json")) {
                const resp = await response.json();
                console.log("Logout successfully", resp);
            } else {
                console.error("Logout response is not JSON:", await response.text());
            }
        }
        } catch (error) {
          console.error("Logout failed:", error);
        }
      }
    },
  },

  secret: process.env.NEXTAUTH_SECRET!,
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

If anyone have any idea please help me here.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Issue while logging out from Keycloak Provider #12152

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Issue while logging out from Keycloak Provider #12152

Uh oh!

jyoti-r-4 Oct 30, 2024

Replies: 0 comments

jyoti-r-4
Oct 30, 2024