From 3c4064b8b0e842159d1b312803cdaf6b3b68b683 Mon Sep 17 00:00:00 2001
From: Shaneeza <shaneeza.ali@mongodb.com>
Date: Mon, 21 Jul 2025 09:55:20 -0400
Subject: [PATCH] removes okta server side call from the client

---
 src/app/layout.tsx                           | 2 +-
 src/app/private/page.tsx                     | 5 +++--
 src/auth/client.ts                           | 3 +++
 src/components/global/LogIn.tsx              | 5 +++--
 src/components/global/PrivateContentWall.tsx | 4 ++--
 src/components/global/UserMenu.tsx           | 4 +---
 src/hooks/useSession.ts                      | 2 +-
 7 files changed, 14 insertions(+), 11 deletions(-)
 create mode 100644 src/auth/client.ts

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 27653b15..c60071d1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,7 @@
 
 import './globals.css';
 import { auth } from '@/auth';
-import { SessionProvider } from 'next-auth/react';
+import { SessionProvider } from '@/auth/client';
 
 import LayoutWrapper from '@/components/layout-wrapper';
 import { getComponentsService } from '@/lib/contentStack/contentStackService';
diff --git a/src/app/private/page.tsx b/src/app/private/page.tsx
index 800625d4..d7d5284a 100644
--- a/src/app/private/page.tsx
+++ b/src/app/private/page.tsx
@@ -7,7 +7,8 @@ import { BasicEmptyState } from '@leafygreen-ui/empty-state';
 import ArrowLeftIcon from '@leafygreen-ui/icon/dist/ArrowLeft';
 // @ts-expect-error
 import LogInIcon from '@leafygreen-ui/icon/dist/LogIn';
-import { login } from '@/auth';
+import { signIn } from '@/auth/client';
+
 import { ComingSoon, Security } from '@/components/glyphs';
 import { useSession } from '@/hooks';
 
@@ -33,7 +34,7 @@ export default function Private() {
       primaryButton={
         <Button
           variant="primary"
-          onClick={() => login()}
+          onClick={() => signIn('okta')}
           leftGlyph={<LogInIcon />}
         >
           Log In
diff --git a/src/auth/client.ts b/src/auth/client.ts
new file mode 100644
index 00000000..91606c61
--- /dev/null
+++ b/src/auth/client.ts
@@ -0,0 +1,3 @@
+import { signOut, signIn, SessionProvider, useSession } from 'next-auth/react';
+
+export { signOut, signIn, SessionProvider, useSession };
diff --git a/src/components/global/LogIn.tsx b/src/components/global/LogIn.tsx
index 8ce0b8cf..732c1eee 100644
--- a/src/components/global/LogIn.tsx
+++ b/src/components/global/LogIn.tsx
@@ -2,13 +2,14 @@
 
 import { css } from '@emotion/css';
 import Button from '@leafygreen-ui/button';
-import { login } from '@/auth/login';
+import { signIn } from '@/auth/client';
 
 export function LogIn() {
   return (
     <Button
       size="small"
-      onClick={() => login()}
+      // client-side log in
+      onClick={() => signIn('okta')}
       className={css`
         border-radius: 50px;
       `}
diff --git a/src/components/global/PrivateContentWall.tsx b/src/components/global/PrivateContentWall.tsx
index 9ed9d8a2..b5786857 100644
--- a/src/components/global/PrivateContentWall.tsx
+++ b/src/components/global/PrivateContentWall.tsx
@@ -7,7 +7,7 @@ import { BasicEmptyState } from '@leafygreen-ui/empty-state';
 // @ts-expect-error
 import LogInIcon from '@leafygreen-ui/icon/dist/LogIn';
 
-import { login } from '@/auth';
+import { signIn } from '@/auth/client';
 
 import { Security } from '@/components/glyphs';
 
@@ -19,7 +19,7 @@ export function PrivateContentWall() {
       primaryButton={
         <Button
           variant="primary"
-          onClick={() => login()}
+          onClick={() => signIn('okta')}
           leftGlyph={<LogInIcon />}
         >
           Log In
diff --git a/src/components/global/UserMenu.tsx b/src/components/global/UserMenu.tsx
index 88be8796..7857b94b 100644
--- a/src/components/global/UserMenu.tsx
+++ b/src/components/global/UserMenu.tsx
@@ -9,9 +9,8 @@ import { Menu, MenuItem } from '@leafygreen-ui/menu';
 import { Body, Description } from '@leafygreen-ui/typography';
 
 import { LogIn } from './LogIn';
-import { logout } from '@/auth';
 
-import { signOut } from 'next-auth/react';
+import { signOut } from '@/auth/client';
 import { useSession } from '@/hooks';
 
 export function UserMenu() {
@@ -44,7 +43,6 @@ export function UserMenu() {
         <MenuItem
           glyph={<LogOutIcon />}
           onClick={async () => {
-            logout();
             // https://github.com/nextauthjs/next-auth/discussions/11271#discussioncomment-12272576
             // Session does not clear reliably without forcing a hard refresh
             // client-side signOut; use signOut from next-auth/react whenever signing out
diff --git a/src/hooks/useSession.ts b/src/hooks/useSession.ts
index 6956872d..730c7732 100644
--- a/src/hooks/useSession.ts
+++ b/src/hooks/useSession.ts
@@ -2,7 +2,7 @@
 
 import { useMemo } from 'react';
 import { Session } from '@/auth';
-import { useSession as useAuthSession } from 'next-auth/react';
+import { useSession as useAuthSession } from '@/auth/client';
 
 export type LGSession = Partial<Session> & { isLoggedIn?: boolean };