@openneuro/app 4.46.0 → 4.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.46.0",
+  "version": "4.47.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -79,5 +79,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b40f6f5b597cbb722d09497182059a5157abf110"
+  "gitHead": "ce9d1b3598748ab7a9510e6dc0f50422088723a1"
 }

package/src/client.jsx

@@ -14,6 +14,14 @@ import * as gtag from "./scripts/utils/gtag"
 import { relayStylePagination } from "@apollo/client/utilities"
 // TODO - This should be a global SCSS?
 import "./scripts/components/page/page.scss"
+import cookies from "./scripts/utils/cookies.js"
+import { getProfile, guardExpired } from "./scripts/authentication/profile"
+
+// Clear expired JWT before the app mounts to avoid stale auth state
+const profile = getProfile(cookies.getAll())
+if (profile && !guardExpired(profile)) {
+  cookies.remove("accessToken", { path: "/" })
+}
 
 gtag.initialize(config.analytics.trackingIds)
 

package/src/scripts/authentication/google-redirect.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+import { useUser } from "../queries/user"
+
+/**
+ * Redirects Google-authenticated users to the ORCID linking page.
+ * Renders nothing — just runs the redirect effect when the user query resolves.
+ */
+export function GoogleOrcidRedirect() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { user, loading, error } = useUser()
+
+  useEffect(() => {
+    if (
+      !loading &&
+      !error &&
+      location.pathname !== "/orcid-link" &&
+      user?.provider === "google"
+    ) {
+      navigate("/orcid-link")
+    }
+  }, [location.pathname, user, loading, error, navigate])
+
+  return null
+}

package/src/scripts/authentication/profile.ts

@@ -21,7 +21,11 @@ export const parseJwt = jwtDecode
 export function getProfile(cookies): OpenNeuroTokenProfile {
   const accessToken = cookies["accessToken"]
   if (!accessToken) return null
-  return parseJwt(accessToken) as OpenNeuroTokenProfile
+  try {
+    return parseJwt(accessToken) as OpenNeuroTokenProfile
+  } catch {
+    return null
+  }
 }
 /**
  * Return profile if token is not expired.

package/src/scripts/common/partials/__tests__/freshdesk-widget.spec.tsx

@@ -0,0 +1,82 @@
+import { vi, describe, it, expect } from "vitest"
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+import { MockedProvider } from "@apollo/client/testing"
+
+// Mock the dependencies
+vi.mock("react-cookie", () => ({
+  useCookies: () => [{}],
+}))
+
+vi.mock("../../authentication/profile", () => ({
+  getProfile: () => ({ email: "test@example.com" }),
+}))
+
+vi.mock("../../queries/user", () => ({
+  useUser: () => ({
+    user: { email: "test@example.com" },
+  }),
+}))
+
+import FreshdeskWidget from "../freshdesk-widget"
+
+describe("FreshdeskWidget component", () => {
+  it("includes meta[referrer] with current page URL in iframe src", () => {
+    const testRoute = "/datasets/ds000001"
+
+    render(
+      <MemoryRouter initialEntries={[testRoute]}>
+        <MockedProvider>
+          <FreshdeskWidget subject="Test" description="Test description" />
+        </MockedProvider>
+      </MemoryRouter>,
+    )
+
+    const iframe = screen.getByTitle("Feedback Form") as HTMLIFrameElement
+
+    // The iframe src should contain the current page URL as meta[referrer]
+    expect(iframe.src).toContain("meta[referrer]=")
+    // Verify it includes the test route pathname
+    expect(iframe.src).toContain("/datasets/ds000001")
+  })
+
+  it("includes prepopulated subject and description fields", () => {
+    const testRoute = "/datasets/ds000001"
+
+    render(
+      <MemoryRouter initialEntries={[testRoute]}>
+        <MockedProvider>
+          <FreshdeskWidget
+            subject="Test Issue"
+            description="This is a test"
+          />
+        </MockedProvider>
+      </MemoryRouter>,
+    )
+
+    const iframe = screen.getByTitle("Feedback Form") as HTMLIFrameElement
+
+    // Verify subject and description are in the iframe src
+    expect(iframe.src).toContain("helpdesk_ticket[subject]=Test%20Issue")
+    expect(iframe.src).toContain("helpdesk_ticket[description]=This%20is%20a%20test")
+  })
+
+  it("encodes special characters in the referrer URL correctly", () => {
+    const testRoute = "/search?query=test"
+
+    render(
+      <MemoryRouter initialEntries={[testRoute]}>
+        <MockedProvider>
+          <FreshdeskWidget subject="Test" />
+        </MockedProvider>
+      </MemoryRouter>,
+    )
+
+    const iframe = screen.getByTitle("Feedback Form") as HTMLIFrameElement
+
+    // Should properly encode the URL with query parameters
+    expect(iframe.src).toContain("meta[referrer]=")
+    expect(iframe.src).toContain("/search")
+  })
+})

package/src/scripts/common/partials/freshdesk-widget.jsx

@@ -1,6 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { useCookies } from "react-cookie"
+import { useLocation } from "react-router-dom"
 import { getProfile } from "../../authentication/profile"
 import { config } from "../../config"
 import { useUser } from "../../queries/user"
@@ -10,13 +11,21 @@ const buildCustomQuery = (customText, prepopulatedFields) => {
     ...Object.entries(customText).map(([key, value]) => `${key}=${value}`),
     ...Object.entries(prepopulatedFields)
       .filter(([, value]) => value)
-      .map(([key, value]) => `helpdesk_ticket[${key}]=${value}`),
+      .map(([key, value]) => {
+        // Handle meta_ prefixed fields separately (e.g., meta_referrer -> meta[referrer])
+        if (key.startsWith("meta_")) {
+          const fieldName = key.replace(/^meta_/, "")
+          return `meta[${fieldName}]=${value}`
+        }
+        return `helpdesk_ticket[${key}]=${value}`
+      }),
   ]
   return customizerQueries.length ? `&${customizerQueries.join(";")}` : ""
 }
 
 function FreshdeskWidget({ subject, error, sentryId, description }) {
   const [cookies] = useCookies()
+  const { pathname } = useLocation()
   const profile = getProfile(cookies)
   const sentry = sentryId && `Sentry ID: ${sentryId}`
   const joinedDescription = [sentry, description, error]
@@ -38,6 +47,7 @@ function FreshdeskWidget({ subject, error, sentryId, description }) {
     requester: profile && user?.email,
     subject,
     description: joinedDescription,
+    meta_referrer: pathname,
   }
 
   return (

package/src/scripts/dataset/__tests__/__snapshots__/snapshot-container.spec.tsx.snap

@@ -348,6 +348,22 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                     <p>
                       CBRAIN is a web-based distributed computing platform for collaborative neuroimaging research.
                     </p>
+                    <hr />
+                    <img
+                      height="16"
+                      src="/packages/openneuro-app/src/assets/external/neurodesk.png"
+                      width="16"
+                    />
+                     
+                    <a
+                      href="https://play-america.neurodesk.org/hub/user-redirect/lab/tree/data/openneuro/ds001032"
+                      target="_blank"
+                    >
+                      View on Neurodesk
+                    </a>
+                    <p>
+                      Neurodesk provides browser-based access to a neuroimaging analysis environment with this dataset mounted.
+                    </p>
                   </div>
                 </div>
               </div>

package/src/scripts/dataset/components/AnalyzeDropdown.tsx

@@ -5,6 +5,7 @@ import styled from "@emotion/styled"
 import BrainlifeIcon from "../../../assets/external/brainlife.png"
 import NemarIcon from "../../../assets/external/nemar.png"
 import CbrainIcon from "../../../assets/external/cbrain.png"
+import NeurodeskIcon from "../../../assets/external/neurodesk.png"
 
 export interface CloneDropdownProps {
   datasetId: string
@@ -24,6 +25,8 @@ export const AnalyzeDropdown: React.FC<CloneDropdownProps> = (
     `https://nemar.org/dataexplorer/detail?dataset_id=${datasetId}`
   const cbrainUrl =
     `https://portal.cbrain.mcgill.ca/openneuro/${datasetId}/versions/${snapshotVersion}`
+  const neurodeskUrl =
+    `https://play-america.neurodesk.org/hub/user-redirect/lab/tree/data/openneuro/${datasetId}`
   return (
     <AnalyzeDiv className="clone-dropdown">
       <Dropdown
@@ -91,6 +94,19 @@ export const AnalyzeDropdown: React.FC<CloneDropdownProps> = (
             CBRAIN is a web-based distributed computing platform for
             collaborative neuroimaging research.
           </p>
+          <hr />
+          <img
+            src={NeurodeskIcon}
+            height="16"
+            width="16"
+          />{" "}
+          <a href={neurodeskUrl} target="_blank">
+            View on Neurodesk
+          </a>
+          <p>
+            Neurodesk provides browser-based access to a neuroimaging analysis
+            environment with this dataset mounted.
+          </p>
         </div>
       </Dropdown>
     </AnalyzeDiv>

package/src/scripts/dataset/components/__tests__/AnalyzeDropdown.spec.tsx

@@ -15,5 +15,11 @@ describe("AnalyzeDropdown component", () => {
     expect(menu).toHaveClass("collapsed")
     fireEvent.click(button)
     expect(menu).toHaveClass("expanded")
+    expect(
+      screen.getByRole("link", { name: "View on Neurodesk" }),
+    ).toHaveAttribute(
+      "href",
+      "https://play-america.neurodesk.org/hub/user-redirect/lab/tree/data/openneuro/ds000031",
+    )
   })
 })

package/src/scripts/dataset/mutations/delete-dataset-form.jsx

@@ -21,6 +21,7 @@ const fields = (hasEdit) => {
           { value: "subject privacy" },
           { value: "duplicate dataset" },
           { value: "abuse of service", admin: true },
+          { value: "data retention policy", admin: true },
         ],
         showOptionOther: true,
         required: false,

package/src/scripts/errors/404page.tsx

@@ -36,6 +36,14 @@ const FourOFourPage: FC<FourOFourPageProps> = ({
     <Container styleContext={theme} data-testid="404-page">
       <h3>404: The page you are looking for does not exist.</h3>
       {message && <p>{message}</p>}
+      {message.includes("data retention policy") && (
+        <p>
+          See our documentation for the{" "}
+          <a href="https://docs.openneuro.org/policy/data_retention.html">
+            full data retention policy
+          </a>.
+        </p>
+      )}
       <p>
         Click <Link to={redirectRoute}>here</Link> to go to
         {" " + redirectRouteName}.

package/src/scripts/errors/freshdesk-widget.jsx

@@ -1,6 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { useCookies } from "react-cookie"
+import { useLocation } from "react-router-dom"
 import { getProfile } from "../authentication/profile"
 import { config } from "../config"
 import { useUser } from "../queries/user"
@@ -10,13 +11,21 @@ const buildCustomQuery = (customText, prepopulatedFields) => {
     ...Object.entries(customText).map(([key, value]) => `${key}=${value}`),
     ...Object.entries(prepopulatedFields)
       .filter(([, value]) => value)
-      .map(([key, value]) => `helpdesk_ticket[${key}]=${value}`),
+      .map(([key, value]) => {
+        // Handle meta_ prefixed fields separately (e.g., meta_referrer -> meta[referrer])
+        if (key.startsWith("meta_")) {
+          const fieldName = key.replace(/^meta_/, "")
+          return `meta[${fieldName}]=${value}`
+        }
+        return `helpdesk_ticket[${key}]=${value}`
+      }),
   ]
   return customizerQueries.length ? `&${customizerQueries.join(";")}` : ""
 }
 
 function FreshdeskWidget({ subject, error, sentryId, description }) {
   const [cookies] = useCookies()
+  const { pathname } = useLocation()
   const profile = getProfile(cookies)
   const sentry = sentryId && `Sentry ID: ${sentryId}`
   const joinedDescription = [sentry, description, error]
@@ -39,6 +48,7 @@ function FreshdeskWidget({ subject, error, sentryId, description }) {
     requester: profile && user?.email,
     subject,
     description: joinedDescription,
+    meta_referrer: pathname,
   }
   return (
     <>

package/src/scripts/index.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from "react"
-import { useLocation, useNavigate } from "react-router-dom"
+import React from "react"
 import Uploader from "./uploader/uploader"
 import AppRoutes from "./routes"
 import HeaderContainer from "./common/containers/header"
@@ -7,47 +6,23 @@ import FooterContainer from "./common/containers/footer"
 import { SearchParamsProvider } from "./search/search-params-ctx"
 import { UserModalOpenProvider } from "./utils/user-login-modal-ctx"
 import { useAnalytics } from "./utils/analytics"
-import { useUser } from "./queries/user"
 import { NotificationsProvider } from "./users/notifications/user-notifications-context"
+import { GoogleOrcidRedirect } from "./authentication/google-redirect"
 import "../assets/email-header.png"
 
 const Index: React.FC = () => {
   useAnalytics()
 
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { user, loading, error } = useUser()
-
-  useEffect(() => {
-    if (
-      !loading &&
-      !error &&
-      location.pathname !== "/orcid-link" &&
-      user?.provider === "google"
-    ) {
-      navigate("/orcid-link")
-    }
-  }, [location.pathname, user, loading, error, navigate])
-
-  if (loading || error) return null
-
-  const initialNotifications = user?.notifications?.map((n) => ({
-    id: n.id,
-    status: Array.isArray(n.notificationStatus)
-      ? n.notificationStatus.map((ns) => ns.status.toLowerCase())[0] || "unread"
-      : n.notificationStatus?.status?.toLowerCase() || "unread",
-    ...n,
-  })) || []
-
   return (
     <Uploader>
       <SearchParamsProvider>
         <UserModalOpenProvider>
-          <NotificationsProvider initialNotifications={initialNotifications}>
+          <NotificationsProvider>
             <div className="sticky-content">
               <HeaderContainer />
               <AppRoutes />
             </div>
+            <GoogleOrcidRedirect />
           </NotificationsProvider>
           <div className="sticky-footer">
             <FooterContainer />

package/src/scripts/queries/user.ts

@@ -1,3 +1,4 @@
+import { useEffect } from "react"
 import { gql, useQuery } from "@apollo/client"
 import { useCookies } from "react-cookie"
 import { getProfile } from "../authentication/profile"
@@ -211,7 +212,7 @@ export const ADVANCED_SEARCH_DATASETS_QUERY = gql`
 
 // Reusable hook to fetch user data
 export const useUser = (userId?: string) => {
-  const [cookies] = useCookies()
+  const [cookies, , removeCookie] = useCookies()
   const profile = getProfile(cookies)
   const profileSub = profile?.sub
 
@@ -230,6 +231,13 @@ export const useUser = (userId?: string) => {
     Sentry.captureException(userError)
   }
 
+  // Clear invalid session: cookie exists but query failed or returned no user
+  useEffect(() => {
+    if (!userLoading && profile && (userError || !userData?.user)) {
+      removeCookie("accessToken", { path: "/" })
+    }
+  }, [userLoading, profile, userError, userData?.user, removeCookie])
+
   return {
     user: userData?.user,
     loading: userLoading,

package/src/scripts/users/__tests__/user-account-view.spec.tsx

@@ -33,7 +33,7 @@ const baseUser: User = {
 const userMock = {
   request: {
     query: userQueries.GET_USER,
-    variables: { id: baseUser.orcid },
+    variables: { userId: baseUser.id },
   },
   result: {
     data: {
@@ -50,13 +50,13 @@ describe("<UserAccountView />", () => {
         request: {
           query: userQueries.UPDATE_USER,
           variables: {
-            id: baseUser.orcid,
+            id: baseUser.id,
           },
         },
         result: {
           data: {
             updateUser: {
-              id: baseUser.orcid,
+              id: baseUser.id,
               location: "Marin, CA",
               links: ["https://newlink.com"],
               institution: "New University",
@@ -87,14 +87,14 @@ describe("<UserAccountView />", () => {
         request: {
           query: userQueries.UPDATE_USER,
           variables: {
-            id: baseUser.orcid,
+            id: baseUser.id,
             location: "Marin, CA",
           },
         },
         result: {
           data: {
             updateUser: {
-              id: baseUser.orcid,
+              id: baseUser.id,
               location: "Marin, CA",
               links: ["https://newlink.com"],
               institution: "New University",
@@ -128,14 +128,14 @@ describe("<UserAccountView />", () => {
       request: {
         query: userQueries.UPDATE_USER,
         variables: {
-          id: baseUser.orcid,
+          id: baseUser.id,
           institution: "New University",
         },
       },
       result: {
         data: {
           updateUser: {
-            id: baseUser.orcid,
+            id: baseUser.id,
             location: "Marin, CA",
             links: ["https://newlink.com"],
             institution: "New University",
@@ -168,14 +168,14 @@ describe("<UserAccountView />", () => {
       request: {
         query: userQueries.UPDATE_USER,
         variables: {
-          id: baseUser.orcid,
+          id: baseUser.id,
           links: ["https://newlink.com"],
         },
       },
       result: {
         data: {
           updateUser: {
-            id: baseUser.orcid,
+            id: baseUser.id,
             location: "Marin, CA",
             links: ["https://newlink.com"],
             institution: "New University",
@@ -208,14 +208,14 @@ describe("<UserAccountView />", () => {
       request: {
         query: userQueries.UPDATE_USER,
         variables: {
-          id: baseUser.orcid,
+          id: baseUser.id,
           links: ["https://newlink.com"],
         },
       },
       result: {
         data: {
           updateUser: {
-            id: baseUser.orcid,
+            id: baseUser.id,
             location: "Marin, CA",
             links: ["https://newlink.com"],
             institution: "New University",

package/src/scripts/users/notifications/user-notifications-context.tsx

@@ -1,8 +1,18 @@
-import React, { createContext, useCallback, useContext, useState } from "react"
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react"
 import * as Sentry from "@sentry/react"
 import { useMutation } from "@apollo/client"
 import { UPDATE_NOTIFICATION_STATUS_MUTATION } from "../../queries/datasetEvents"
-import type { MappedNotification } from "../../types/event-types"
+import {
+  type MappedNotification,
+  mapRawEventToMappedNotification,
+} from "../../types/event-types"
+import { useUser } from "../../queries/user"
 
 interface NotificationsContextValue {
   notifications: MappedNotification[]
@@ -15,7 +25,7 @@ interface NotificationsContextValue {
 
 interface NotificationsProviderProps {
   children: React.ReactNode
-  initialNotifications?: MappedNotification[]
+  userId?: string
 }
 
 const NotificationsContext = createContext<
@@ -24,11 +34,16 @@ const NotificationsContext = createContext<
 
 export const NotificationsProvider: React.FC<NotificationsProviderProps> = ({
   children,
-  initialNotifications = [],
+  userId,
 }) => {
-  const [notifications, setNotifications] = useState<MappedNotification[]>(
-    initialNotifications,
-  )
+  const { user } = useUser(userId)
+  const [notifications, setNotifications] = useState<MappedNotification[]>([])
+
+  useEffect(() => {
+    const mapped = user?.notifications?.map(mapRawEventToMappedNotification) ??
+      []
+    setNotifications(mapped)
+  }, [user?.notifications])
   const [updateEventStatus] = useMutation(UPDATE_NOTIFICATION_STATUS_MUTATION)
 
   const handleUpdateNotification = useCallback(

package/src/scripts/users/notifications/user-notifications-view.tsx

@@ -10,10 +10,6 @@ import styles from "./scss/usernotifications.module.scss"
 import iconUnread from "../../../assets/icon-unread.png"
 import iconSaved from "../../../assets/icon-saved.png"
 import iconArchived from "../../../assets/icon-archived.png"
-import { useUser } from "../../queries/user"
-import { Loading } from "../../components/loading/Loading"
-import * as Sentry from "@sentry/react"
-import { mapRawEventToMappedNotification } from "../../types/event-types"
 import {
   NotificationsProvider,
   useNotifications,
@@ -27,8 +23,6 @@ export const UserNotificationsView: React.FC<UserNotificationsViewProps> = (
   const { tab = "unread" } = useParams()
   const navigate = useNavigate()
   const location = useLocation()
-  const { user, loading, error } = useUser(orcidUser.id)
-
   const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({
     width: "0px",
     transform: "translateX(0px)",
@@ -63,19 +57,8 @@ export const UserNotificationsView: React.FC<UserNotificationsViewProps> = (
     }
   }, [tab, orcidUser.orcid, navigate])
 
-  if (loading) return <Loading />
-  if (error) {
-    Sentry.captureException(error)
-    return (
-      <div>Error loading notifications: {error.message}. Please try again.</div>
-    )
-  }
-
-  const initialNotifications =
-    user?.notifications.map(mapRawEventToMappedNotification) || []
-
   return (
-    <NotificationsProvider initialNotifications={initialNotifications}>
+    <NotificationsProvider userId={orcidUser.id}>
       <div data-testid="user-notifications-view">
         <h3>Notifications for {orcidUser.name}</h3>
         <div className={styles.tabContainer}>

package/src/scripts/users/user-account-view.tsx

@@ -14,12 +14,12 @@ import { pageTitle } from "../resources/strings.js"
 export const UserAccountView: React.FC<UserAccountViewProps> = ({
   orcidUser,
 }) => {
-  const [userLinks, setLinks] = useState<string[]>(orcidUser?.links || [])
+  const [userLinks, setLinks] = useState<string[]>(orcidUser.links ?? [])
   const [userLocation, setLocation] = useState<string>(
-    orcidUser?.location || "",
+    orcidUser.location ?? "",
   )
   const [userInstitution, setInstitution] = useState<string>(
-    orcidUser?.institution || "",
+    orcidUser.institution ?? "",
   )
   const [updateUser] = useMutation(UPDATE_USER)
 
@@ -28,13 +28,13 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
     try {
       await updateUser({
         variables: {
-          id: orcidUser?.orcid,
+          id: orcidUser.id,
           links: newLinks,
         },
         refetchQueries: [
           {
             query: GET_USER,
-            variables: { id: orcidUser?.orcid },
+            variables: { userId: orcidUser.id },
           },
         ],
       })
@@ -49,13 +49,13 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
     try {
       await updateUser({
         variables: {
-          id: orcidUser?.orcid,
+          id: orcidUser.id,
           location: newLocation,
         },
         refetchQueries: [
           {
             query: GET_USER,
-            variables: { id: orcidUser?.orcid },
+            variables: { userId: orcidUser.id },
           },
         ],
       })
@@ -70,13 +70,13 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
     try {
       await updateUser({
         variables: {
-          id: orcidUser?.orcid,
+          id: orcidUser.id,
           institution: newInstitution,
         },
         refetchQueries: [
           {
             query: GET_USER,
-            variables: { id: orcidUser?.orcid },
+            variables: { userId: orcidUser.id },
           },
         ],
       })
@@ -107,7 +107,7 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
             <span>ORCID:</span>
             {orcidUser.orcid}
           </li>
-          {orcidUser?.github &&
+          {orcidUser.github &&
             (
               <li>
                 <span>GitHub:</span>
@@ -128,7 +128,7 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
           data-testid="links-section"
         />
 
-        {orcidUser?.id && orcidUser?.orcid !== undefined && (
+        {orcidUser.orcid !== undefined && (
           <div className={styles.umbOrcidConsent}>
             <div className={styles.umbOrcidHeading}>
               <h4>ORCID Integration</h4>

package/src/scripts/users/user-menu.tsx

@@ -10,15 +10,17 @@ export interface UserMenuProps {
 }
 
 export const UserMenu: React.FC<UserMenuProps> = ({ signOutAndRedirect }) => {
-  const { user } = useUser()
+  const { user, loading } = useUser()
   const { notifications } = useNotifications()
 
+  if (loading || !user) return null
+
   const inboxCount =
     notifications?.filter((n) => n.status === "unread").length || 0
 
   return (
     <span className="user-menu-wrap">
-      {user?.orcid && (
+      {user.orcid && (
         <span className="notifications-link">
           <Link to={`/user/${user.orcid}/notifications/unread`}>
             <i className="fa fa-inbox">
@@ -41,7 +43,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({ signOutAndRedirect }) => {
 
       <Dropdown
         className="user-menu-dropdown"
-        label={user?.avatar
+        label={user.avatar
           ? (
             <img
               className="user-menu-label avatar"
@@ -56,23 +58,23 @@ export const UserMenu: React.FC<UserMenuProps> = ({ signOutAndRedirect }) => {
             <li className="dropdown-header">
               <p>
                 <span>Hello</span> <br />
-                {user?.name} <br />
-                {user?.email}
+                {user.name} <br />
+                {user.email}
               </p>
               <p>
-                <span>signed in via {user?.provider}</span>
+                <span>signed in via {user.provider}</span>
               </p>
             </li>
 
             <li>
               <Link
-                to={user?.orcid ? `/user/${user.orcid}` : "/search?mydatasets"}
+                to={user.orcid ? `/user/${user.orcid}` : "/search?mydatasets"}
               >
                 My Datasets
               </Link>
             </li>
 
-            {user?.orcid && (
+            {user.orcid && (
               <li>
                 <Link to={`/user/${user.orcid}/account`}>Account Info</Link>
               </li>
@@ -82,13 +84,13 @@ export const UserMenu: React.FC<UserMenuProps> = ({ signOutAndRedirect }) => {
               <Link to="/keygen">Obtain an API Key</Link>
             </li>
 
-            {user?.provider !== "orcid" && (
+            {user.provider !== "orcid" && (
               <li className="user-menu-link">
                 <a href="/crn/auth/orcid?link=true">Link ORCID to my account</a>
               </li>
             )}
 
-            {user?.admin && (
+            {user.admin && (
               <li className="user-menu-link">
                 <Link to="/admin">Admin</Link>
               </li>