Remove server side okta code from client

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';

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

src/auth/client.ts

@@ -0,0 +1,3 @@
+import { signOut, signIn, SessionProvider, useSession } from 'next-auth/react';
+
+export { signOut, signIn, SessionProvider, useSession };

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;
       `}

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

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

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 };