logout from keycoak completely when logging out of app

Author: Deepthi-Chand

app/[locale]/dashboard/components/main-nav.tsx

@@ -1,26 +1,26 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import { Session } from 'next-auth';
+import { signIn, signOut, useSession } from 'next-auth/react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
-import { Session } from 'next-auth';
-import { signIn, signOut, useSession } from 'next-auth/react';
 import {
-  Avatar,
-  Button,
-  Dialog,
-  Divider,
-  IconButton,
-  Popover,
-  SearchInput,
-  Spinner,
-  Text,
+    Avatar,
+    Button,
+    Dialog,
+    Divider,
+    IconButton,
+    Popover,
+    SearchInput,
+    Spinner,
+    Text,
 } from 'opub-ui';
+import React, { useEffect, useState } from 'react';
 
+import { Icons } from '@/components/icons';
 import { useDashboardStore } from '@/config/store';
 import { GraphQL } from '@/lib/api';
-import { Icons } from '@/components/icons';
 import { UserDetailsQryDoc } from '../[entityType]/[entitySlug]/schema';
 import { allOrganizationsListingDoc } from '../[entityType]/schema';
 import Sidebar from './sidebar';
@@ -38,20 +38,9 @@ export function MainNav({ hideSearch = false }) {
   const [isOpen, setIsOpen] = useState(false);
   const [isExploreOpen, setIsExploreOpen] = useState(false);
 
-  const [isLoggingOut, setIsLoggingOut] = React.useState(false);
   const { data: session, status } = useSession();
   const { setUserDetails, setAllEntityDetails } = useDashboardStore();
 
-  async function keycloakSessionLogOut() {
-    try {
-      setIsLoggingOut(true);
-      await fetch(`/api/auth/logout`, { method: 'GET' });
-    } catch (err) {
-      setIsLoggingOut(false);
-      console.error(err);
-    }
-  }
-
   const handleSignIn = async () => {
     try {
       // First attempt sign in
@@ -91,10 +80,6 @@ export function MainNav({ hideSearch = false }) {
     fetchData();
   }, [session, hasFetched, setUserDetails, setAllEntityDetails]);
 
-  if (isLoggingOut) {
-    return <LogginOutPage />;
-  }
-
   const exploreLinks = [
     {
       title: 'Datasets',
@@ -145,7 +130,6 @@ export function MainNav({ hideSearch = false }) {
               data={[...exploreLinks, ...Navigation]}
               session={session}
               status={status}
-              keycloakSessionLogOut={keycloakSessionLogOut}
               signIn={signIn}
             />
           </div>
@@ -279,7 +263,6 @@ export function MainNav({ hideSearch = false }) {
               {session?.user ? (
                 <ProfileContent
                   session={session}
-                  keycloakSessionLogOut={keycloakSessionLogOut}
                 />
               ) : (
                 <Button
@@ -302,10 +285,8 @@ export function MainNav({ hideSearch = false }) {
 
 export const ProfileContent = ({
   session,
-  keycloakSessionLogOut,
 }: {
   session: Session;
-  keycloakSessionLogOut: () => Promise<void>;
 }) => {
   const [open, setOpen] = React.useState(false);
 
@@ -362,11 +343,16 @@ export const ProfileContent = ({
           <Divider className="mx-3 my-3 w-auto" />
           <div className="px-3">
             <Button
-              onClick={() => {
+              onClick={async () => {
                 setOpen(false);
-                keycloakSessionLogOut().then(() =>
-                  signOut({ callbackUrl: '/' })
-                );
+                const response = await fetch(`/api/auth/logout`, { method: 'GET' });
+                const data = await response.json();
+                
+                await signOut({ redirect: false });
+                
+                if (data.url) {
+                  window.location.href = data.url;
+                }
               }}
               kind="secondary"
               size="slim"
@@ -381,11 +367,3 @@ export const ProfileContent = ({
   );
 };
 
-const LogginOutPage = () => {
-  return (
-    <div className=" flex items-center justify-end gap-4 bg-surfaceDefault p-5 lg:p-7">
-      <Spinner color="surface" />
-      <Text variant="headingLg">Logging out...</Text>
-    </div>
-  );
-};

app/[locale]/dashboard/components/sidebar.tsx

@@ -1,22 +1,20 @@
-import React, { useState } from 'react';
 import Link from 'next/link';
 import { Button, Icon, Sheet, Spinner, Text } from 'opub-ui';
+import React, { useState } from 'react';
 
 import { Icons } from '@/components/icons';
 import { ProfileContent } from './main-nav';
 
 interface SidebarProps {
   data: { href: string; title: string }[];
   session: any;
-  keycloakSessionLogOut: any;
   signIn: any;
   status: any;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
   data,
   session,
-  keycloakSessionLogOut,
   signIn,
   status,
 }) => {
@@ -49,7 +47,6 @@ const Sidebar: React.FC<SidebarProps> = ({
                   {session?.user ? (
                     <ProfileContent
                       session={session}
-                      keycloakSessionLogOut={keycloakSessionLogOut}
                     />
                   ) : (
                     <Button

app/api/auth/logout/route.ts

@@ -1,23 +1,25 @@
 import { env } from '@/env';
 import { getServerSession } from 'next-auth';
 
-import { getIdToken } from '@/lib/sessionTokenAccessor';
 import { authOptions } from '../[...nextauth]/options';
 
 export async function GET() {
   const session = await getServerSession(authOptions);
 
   if (session) {
-    const idToken = await getIdToken();
+    
+    const idToken = session.id_token;
 
-    const url = `${env.AUTH_ISSUER}/protocol/openid-connect/logout?id_token_hint=${idToken}&post_logout_redirect_uri=${encodeURIComponent(env.NEXTAUTH_URL)}`;
+    const logoutUrl = `${env.AUTH_ISSUER}/protocol/openid-connect/logout?id_token_hint=${idToken}&post_logout_redirect_uri=${encodeURIComponent(env.NEXTAUTH_URL)}`;
 
-    try {
-      await fetch(url, { method: 'GET' });
-    } catch (err) {
-      console.error(err);
-      return new Response(null, { status: 500 });
-    }
+    return new Response(JSON.stringify({ url: logoutUrl }), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    });
   }
-  return new Response(null, { status: 200 });
+  
+  return new Response(JSON.stringify({ url: env.NEXTAUTH_URL }), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' },
+  });
 }