Merge pull request #393 from mongodb/brooke/login-flow

QOL session improvements

Author: bruugey

src/auth/logout.tsx

@@ -1,8 +1,8 @@
-"use server";
+'use server';
 
-import { signOut } from "@/auth/auth";
+import { signOut } from '@/auth/auth';
 
 export async function logout() {
-  "use server";
-  await signOut({ redirectTo: "/" });
+  'use server';
+  await signOut({ redirect: true, redirectTo: '/' });
 }

src/components/global/Search/Search.tsx

@@ -4,6 +4,8 @@ import Fuse, { IFuseOptions } from 'fuse.js';
 import debounce from 'lodash/debounce';
 // @ts-expect-error
 import LockIcon from '@leafygreen-ui/icon/dist/Lock';
+// @ts-expect-error
+import UnlockIcon from '@leafygreen-ui/icon/dist/Unlock';
 import { SearchInput, SearchResult } from '@leafygreen-ui/search-input';
 import { useSession } from '@/hooks';
 import { components } from '@/utils/components';
@@ -52,6 +54,8 @@ export function Search() {
     }
   }, [searchTerm]);
 
+  const PrivateIcon = session?.user ? UnlockIcon : LockIcon;
+
   return (
     <SearchInput
       aria-label="Search Components"
@@ -73,7 +77,7 @@ export function Search() {
         >
           <div className={searchResultStyle}>
             {item.name}
-            {item.isPrivate && !session?.user && <LockIcon size="small" />}
+            {item.isPrivate && <PrivateIcon size="small" />}
           </div>
         </SearchResult>
       ))}

src/components/global/SideNavigation/SideNavigation.tsx

@@ -14,6 +14,8 @@ import AppsIcon from '@leafygreen-ui/icon/dist/Apps';
 import LockIcon from '@leafygreen-ui/icon/dist/Lock';
 // @ts-expect-error
 import MenuIcon from '@leafygreen-ui/icon/dist/Menu';
+// @ts-expect-error
+import UnlockIcon from '@leafygreen-ui/icon/dist/Unlock';
 import IconButton from '@leafygreen-ui/icon-button';
 import {
   PortalContextProvider,
@@ -22,7 +24,7 @@ import {
 import { MongoDBLogo, SupportedColors } from '@leafygreen-ui/logo';
 import { color, spacing } from '@leafygreen-ui/tokens';
 import { SIDE_NAV_WIDTH } from '@/constants';
-import { useMediaQuery } from '@/hooks';
+import { useMediaQuery, useSession } from '@/hooks';
 import { ComponentMeta, Group, groupedComponents } from '@/utils/components';
 import { Search } from '../Search/Search';
 import { Drawer } from './Drawer';
@@ -31,6 +33,7 @@ import { SideNavLabel } from './SideNavLabel';
 import { SideNavList } from './SideNavList';
 
 export function SideNavigation() {
+  const session = useSession();
   const navRef = useRef<HTMLElement>(null);
   const [open, setOpen] = React.useState(false);
   const [isMobile] = useMediaQuery(['(max-width: 640px)'], {
@@ -42,6 +45,8 @@ export function SideNavigation() {
     topLevelPage === 'component' ? activeSubDirOrPage : '';
   const { darkMode, theme } = useDarkMode();
 
+  const PrivateIcon = session?.user ? UnlockIcon : LockIcon;
+
   const navContent = (
     <>
       <SideNavLabel
@@ -176,7 +181,7 @@ export function SideNavigation() {
                   >
                     {component.name}
                     {component.isPrivate && (
-                      <LockIcon
+                      <PrivateIcon
                         className={css`
                           margin-left: ${spacing[400]}px;
                         `}

src/components/global/UserMenu.tsx

@@ -1,6 +1,7 @@
 'use client';
-
+import { useEffect, useState } from 'react';
 import { css } from '@emotion/css';
+import { Session } from 'next-auth';
 import Button from '@leafygreen-ui/button';
 // @ts-expect-error
 import CaretDownIcon from '@leafygreen-ui/icon/dist/CaretDown';
@@ -14,8 +15,24 @@ import { LogIn } from './LogIn';
 
 export function UserMenu() {
   const session = useSession();
+  // TODO: use next-auth session when available
+  // Session does not clear reliably without forcing a state change or a hard refresh
+  // https://github.com/nextauthjs/next-auth/discussions/4687
+  const [manualSession, setManualSession] = useState<Session | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    if (session?.user) {
+      setManualSession(session);
+    }
+
+    if (!session?.user) {
+      setManualSession(undefined);
+    }
+  }, [session]);
 
-  return session?.user ? (
+  return manualSession?.user ? (
     <div
       className={css`
         z-index: 1;
@@ -30,15 +47,21 @@ export function UserMenu() {
             `}
             rightGlyph={<CaretDownIcon />}
           >
-            {session.user.name}
+            {manualSession.user.name}
           </Button>
         }
       >
         <MenuItem>
-          <Body darkMode>{session.user.name}</Body>
-          <Description darkMode>{session.user.email}</Description>
+          <Body darkMode>{manualSession.user.name}</Body>
+          <Description darkMode>{manualSession.user.email}</Description>
         </MenuItem>
-        <MenuItem glyph={<LogOutIcon />} onClick={() => logout()}>
+        <MenuItem
+          glyph={<LogOutIcon />}
+          onClick={() => {
+            logout();
+            setManualSession(undefined);
+          }}
+        >
           Log out
         </MenuItem>
       </Menu>