Degraded auth

Author: farmaazon

app/common/src/text/english.json

@@ -515,6 +515,9 @@
   "cloudUnavailableOffline": "Enso Cloud is unavailable offline.",
   "cloudUnavailableOfflineDescription": "Please connect to the internet to access the cloud.",
   "cloudUnavailableOfflineDescriptionOfferLocal": "Alternatively, you can work on your local projects.",
+  "cloudDataUnavailable": "Enso Cloud is temporarily unavailable.",
+  "cloudDataUnavailableTitle": "Enso Cloud is unavailable",
+  "cloudDataUnavailableSubtitle": "Cannot reach Enso Cloud. Retry or work on local projects.",
   "loginUnavailableOffline": "Login functionality is unavailable offline. Please connect to the internet to log in.",
   "loginUnavailableOfflineLocal": "After logging in, you can work offline with your local projects.",
   "productionOnlyFeatures": "Production-only features",

app/gui/integration-test/dashboard/degradedAuth.spec.ts

@@ -0,0 +1,67 @@
+/** @file Verify the degraded-auth mode triggered when `users/me` fails for a non-auth reason. */
+import { expect, test } from 'integration-test/base'
+
+import { TEXT } from '../actions'
+
+const HTTP_INTERNAL_SERVER_ERROR = 500
+const HTTP_UNAUTHORIZED = 401
+
+// Sign in with fresh storage state so every test exercises the post-login flow.
+test.use({ storageState: { cookies: [], origins: [] } })
+
+test('cloud 500 lands in degraded mode and switching to local works', async ({
+  loginPage,
+  cloudApi,
+}) => {
+  cloudApi.setUsersMeFailureStatus(HTTP_INTERNAL_SERVER_ERROR)
+
+  await loginPage
+    .login()
+    .do(async (page) => {
+      await expect(page.getByTestId('cloud-unavailable-stub')).toBeVisible({ timeout: 15_000 })
+      await expect(
+        page.getByRole('button', { name: TEXT.retry, exact: true }),
+      ).toBeVisible()
+      await expect(
+        page.getByRole('button', { name: TEXT.switchToLocal, exact: true }),
+      ).toBeVisible()
+      // The cloud sidebar entry is still rendered but the button is disabled.
+      await expect(
+        page.getByRole('button', { name: TEXT.cloudCategory }).first(),
+      ).toBeDisabled()
+    })
+    .goToCategory.local()
+    .withDriveView(async (driveView) => {
+      await expect(driveView).toBeVisible()
+    })
+})
+
+test('retry exits degraded mode once the backend recovers', async ({ loginPage, cloudApi }) => {
+  cloudApi.setUsersMeFailureStatus(HTTP_INTERNAL_SERVER_ERROR)
+
+  await loginPage
+    .login()
+    .do(async (page) => {
+      await expect(page.getByTestId('cloud-unavailable-stub')).toBeVisible({ timeout: 15_000 })
+      cloudApi.setUsersMeFailureStatus(null)
+      await page.getByRole('button', { name: TEXT.retry, exact: true }).click()
+      await expect(page.getByTestId('cloud-unavailable-stub')).toBeHidden({ timeout: 15_000 })
+      await expect(page.getByTestId('drive-view')).toBeVisible()
+    })
+})
+
+test('401 keeps the existing recovery + logout path, no degraded UI', async ({
+  loginPage,
+  cloudApi,
+}) => {
+  cloudApi.setUsersMeFailureStatus(HTTP_UNAUTHORIZED)
+
+  await loginPage.login().do(async (page) => {
+    // The unauthorized-recovery flow eventually logs the user out, which makes the
+    // login form visible again. The degraded `cloud-unavailable` stub must never show.
+    await expect(
+      page.getByRole('button', { name: TEXT.login, exact: true }),
+    ).toBeVisible({ timeout: 30_000 })
+    await expect(page.getByTestId('cloud-unavailable-stub')).toHaveCount(0)
+  })
+})

app/gui/integration-test/mock/cloudApi.ts

@@ -188,6 +188,12 @@ export async function mockCloudApi(page: Page) {
   let currentPassword = defaultPassword
   let currentOrganization: backend.OrganizationInfo | null = defaultOrganization
   let currentOrganizationProfilePicture: string | null = null
+  /**
+   * When non-null, the `users/me` endpoint responds with this HTTP status instead of the
+   * normal user payload. Used by integration tests to simulate cloud-data-unavailable
+   * (5xx) or unauthorized (401) flows.
+   */
+  let usersMeFailureStatus: number | null = null
 
   const assetMap = new Map<backend.AssetId, backend.AnyAsset>()
   const deletedAssets = new Set<backend.AssetId>()
@@ -1294,6 +1300,9 @@ export async function mockCloudApi(page: Page) {
     })
     await get(paths.USERS_ME_PATH, (route) => {
       called('usersMe', {})
+      if (usersMeFailureStatus != null) {
+        return route.fulfill({ status: usersMeFailureStatus })
+      }
       if (currentUser == null) {
         return route.fulfill({ status: HTTP_STATUS_NOT_FOUND })
       }
@@ -1444,6 +1453,14 @@ export async function mockCloudApi(page: Page) {
     goOnline: () => {
       isOnline = true
     },
+    /**
+     * Force `users/me` to respond with the given HTTP status. Pass `null` to restore the
+     * default behavior. Use 500 to exercise the degraded-auth flow; use 401 to drive the
+     * unauthorized-recovery flow.
+     */
+    setUsersMeFailureStatus: (status: number | null) => {
+      usersMeFailureStatus = status
+    },
     setPlan: (plan: backend.Plan) => {
       if (currentUser) {
         object.unsafeMutable(currentUser).plan = plan

app/gui/src/components/AppContainer/LeftPanel.vue

@@ -55,6 +55,8 @@ const driveToolbarReact: React.MutableRefObject<HTMLElement | null> = { current:
 const cloudDisabledReason = computed(() => {
   if (!isOnline.value) {
     return getText('unavailableOffline')
+  } else if (auth.session?.isCloudDataUnavailable) {
+    return getText('cloudDataUnavailable')
   } else if (!auth.session?.user.isEnabled) {
     return getText('notEnabledSubtitle')
   } else {

app/gui/src/components/AppContainerLayout.vue

@@ -60,9 +60,16 @@ export const dataLoader: DataLoader<Props> = {
     }
 
     const needsOrganizationSetup = PLANS_TO_SPECIFY_ORG_NAME.includes(plan)
-
-    const organizationQuery = useQuery(backendQueryOptions('getOrganization', [], backend))
-    await waitForData(organizationQuery)
+    const cloudDataUnavailable = computed(() => auth.session?.isCloudDataUnavailable ?? false)
+
+    const organizationQuery = useQuery({
+      ...backendQueryOptions('getOrganization', [], backend),
+      // In degraded-auth mode the backend would reject this with a 5xx/network error;
+      // leave the query idle so cloud-dependent modals stay hidden. Reactive so the
+      // query auto-fires once `users/me` recovers without re-running the data loader.
+      enabled: computed(() => !cloudDataUnavailable.value),
+    })
+    if (!cloudDataUnavailable.value) await waitForData(organizationQuery)
 
     const acceptInvitationModalProps = computed(() => (invitation ? { invitation } : undefined))
 

app/gui/src/dashboard/layouts/Drive.tsx

@@ -49,7 +49,9 @@ export const Drive = React.memo(function Drive(props: DriveProperties) {
 function DriveInner(props: DriveProperties) {
   const { isOffline } = offlineHooks.useOffline()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const { user } = authProvider.useFullUserSession()
+  const session = authProvider.useFullUserSession()
+  const { user } = session
+  const auth = authProvider.useAuth()
   const { localBackend } = useBackends()
   const { getText } = useText()
   const [category, setCategory] = useDriveCurrentCategory()
@@ -58,13 +60,41 @@ function DriveInner(props: DriveProperties) {
   const isCloud = isCloudCategory(category)
 
   const supportLocalBackend = localBackend != null
+  const switchToLocal = useEventCallback(() => {
+    setCategory({ type: 'local' })
+  })
+  const retryUsersMe = useEventCallback(() => {
+    void auth.refetchSession()
+  })
 
   const status =
     isCloud && isOffline ? 'offline'
+    : isCloud && session.isCloudDataUnavailable ? 'cloud-unavailable'
     : isCloud && !user.isEnabled ? 'not-enabled'
     : 'ok'
 
   switch (status) {
+    case 'cloud-unavailable': {
+      return (
+        <result.Result
+          status="error"
+          title={getText('cloudDataUnavailableTitle')}
+          testId="cloud-unavailable-stub"
+          subtitle={getText('cloudDataUnavailableSubtitle')}
+        >
+          <Button.Group align="center">
+            <Button variant="primary" size="medium" onPress={retryUsersMe}>
+              {getText('retry')}
+            </Button>
+            {supportLocalBackend && (
+              <Button size="medium" variant="outline" onPress={switchToLocal}>
+                {getText('switchToLocal')}
+              </Button>
+            )}
+          </Button.Group>
+        </result.Result>
+      )
+    }
     case 'not-enabled': {
       return (
         <result.Result

app/gui/src/dashboard/layouts/Settings/Settings.tsx

@@ -21,7 +21,6 @@ import { includesPredicate } from '$/utils/data/array'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import * as React from 'react'
 import {
-  ALL_SETTINGS_TABS,
   SETTINGS_DATA,
   SETTINGS_NO_RESULTS_SECTION_DATA,
   SETTINGS_TAB_DATA,
@@ -42,14 +41,18 @@ export function Settings() {
     SettingsTabType.account,
     includesPredicate(Object.values(SettingsTabType)),
   )
-  const { user, accessToken } = useFullUserSession()
+  const session = useFullUserSession()
+  const { user, accessToken } = session
+  const isCloudDataUnavailable = session.isCloudDataUnavailable ?? false
   const { changePassword } = useSession()
   const { getText } = useText()
   const toastAndLog = useToastAndLog()
   const [query, setQuery] = React.useState('')
   const root = usePortalContext()
   const { data: organization = null } = useQuery(
-    backendQueryOptions(backend, 'getOrganization', []),
+    backendQueryOptions(backend, 'getOrganization', [], {
+      enabled: !isCloudDataUnavailable,
+    }),
   )
   const isQueryBlank = !/\S/.test(query)
   const [preferredTimeZone, setPreferredTimeZone] = useLocalStorageState('preferredTimeZone')
@@ -85,6 +88,7 @@ export function Settings() {
       changePassword,
       preferredTimeZone,
       setPreferredTimeZone,
+      isCloudDataUnavailable,
     }),
     [
       accessToken,
@@ -103,6 +107,7 @@ export function Settings() {
       changePassword,
       preferredTimeZone,
       setPreferredTimeZone,
+      isCloudDataUnavailable,
     ],
   )
 
@@ -129,11 +134,16 @@ export function Settings() {
   )
 
   const tabsToShow = React.useMemo<readonly SettingsTabType[]>(() => {
+    const matchesVisibility = (tabData: SettingsTabData) =>
+      tabData.visible == null || tabData.visible(context)
     if (isQueryBlank) {
-      return ALL_SETTINGS_TABS
+      return SETTINGS_DATA.flatMap((tabSection) =>
+        tabSection.tabs.filter(matchesVisibility).map((tabData) => tabData.settingsTab),
+      )
     } else {
       return SETTINGS_DATA.flatMap((tabSection) =>
         tabSection.tabs
+          .filter(matchesVisibility)
           .filter((tabData) =>
             isMatch(getText(tabData.nameId)) || isMatch(getText(tabSection.nameId)) ?
               true
@@ -144,7 +154,7 @@ export function Settings() {
           .map((tabData) => tabData.settingsTab),
       )
     }
-  }, [isQueryBlank, doesEntryMatchQuery, getText, isMatch])
+  }, [isQueryBlank, doesEntryMatchQuery, getText, isMatch, context])
   const effectiveTab = tabsToShow.includes(tab) ? tab : (tabsToShow[0] ?? SettingsTabType.account)
 
   const data = React.useMemo<SettingsTabData>(() => {

app/gui/src/dashboard/layouts/Settings/data.tsx

@@ -70,6 +70,7 @@ export const SETTINGS_TAB_DATA: Readonly<Record<SettingsTabType, SettingsTabData
     nameId: 'accountSettingsTab',
     settingsTab: SettingsTabType.account,
     icon: 'settings',
+    visible: ({ isCloudDataUnavailable }) => !isCloudDataUnavailable,
     sections: [
       {
         nameId: 'userAccountSettingsSection',
@@ -558,6 +559,7 @@ export const SETTINGS_TAB_DATA: Readonly<Record<SettingsTabType, SettingsTabData
     nameId: 'apiKeysSettingsTab',
     settingsTab: SettingsTabType.apiKeys,
     icon: 'key',
+    visible: ({ isCloudDataUnavailable }) => !isCloudDataUnavailable,
     sections: [
       {
         nameId: 'apiKeysSettingsSection',
@@ -651,6 +653,12 @@ export interface SettingsContext {
   readonly changePassword: (oldPassword: string, newPassword: string) => Promise<boolean>
   readonly preferredTimeZone: string | undefined
   readonly setPreferredTimeZone: (preferredTimeZone: string | undefined) => void
+  /**
+   * `true` when running in degraded-auth mode — the `user`/`organization` data is a
+   * placeholder because the Enso Cloud `users/me` call failed. Tabs that depend on the
+   * real cloud profile should hide themselves.
+   */
+  readonly isCloudDataUnavailable: boolean
 }
 
 /**

app/gui/src/dashboard/pages/dashboard/Dashboard.tsx

@@ -52,10 +52,15 @@ export function Dashboard() {
   const { remoteBackend, localBackend } = useBackends()
   const inputBindings = inputBindingsProvider.useInputBindings()
   const { router } = useRouter()
+  const session = useFullUserSession()
+  const { user } = session
   const { data: organization = null } = useQuery(
-    backendQueryOptions(remoteBackend, 'getOrganization', []),
+    backendQueryOptions(remoteBackend, 'getOrganization', [], {
+      // In degraded-auth mode the remote `getOrganization` would error; keep the query
+      // idle and let the existing `organization === null` fallback render the dashboard.
+      enabled: !session.isCloudDataUnavailable,
+    }),
   )
-  const { user } = useFullUserSession()
   const openedProjects = useOpenedProjects()
   const closingOnAppExit = useVueValue(
     React.useCallback(() => openedProjects.closingOnAppExit.value, [openedProjects]),

app/gui/src/providers/__tests__/auth.test.ts

@@ -1,6 +1,26 @@
+import type { UserSession as CognitoUserSession } from '$/authentication/cognito'
+import {
+  isDirectoryId,
+  isOrganizationId,
+  isUserId,
+  Plan,
+} from 'enso-common/src/services/Backend'
+import { Rfc3339DateTime } from 'enso-common/src/utilities/data/dateTime'
 import { describe, expect, it } from 'vitest'
 import { computed } from 'vue'
-import { isUsersMeQueryKey } from '../auth'
+import { isUsersMeQueryKey, makeSyntheticUser } from '../auth'
+
+function fakeCognitoSession(overrides: Partial<CognitoUserSession> = {}): CognitoUserSession {
+  return {
+    email: 'user@example.com',
+    accessToken: 'access',
+    refreshToken: 'refresh',
+    refreshUrl: 'https://example.com',
+    expireAt: Rfc3339DateTime(new Date(Date.now() + 60_000).toJSON()),
+    clientId: 'cognito-client-id',
+    ...overrides,
+  }
+}
 
 describe('isUsersMeQueryKey', () => {
   it('matches reactive usersMe query keys', () => {
@@ -11,3 +31,34 @@ describe('isUsersMeQueryKey', () => {
     expect(isUsersMeQueryKey(['remote', 'otherQuery', computed(() => 'client-id')])).toBe(false)
   })
 })
+
+describe('makeSyntheticUser', () => {
+  it('returns a placeholder user without any features enabled', () => {
+    const user = makeSyntheticUser(fakeCognitoSession())
+    expect(user.isEnabled).toBe(false)
+    expect(user.isOrganizationAdmin).toBe(false)
+    expect(user.isEnsoTeamMember).toBe(false)
+    expect(user.plan).toBe(Plan.free)
+    expect(user.userGroups).toBeNull()
+    expect(user.groups).toEqual([])
+  })
+
+  it('derives identifiers in the expected newtype shape', () => {
+    const user = makeSyntheticUser(fakeCognitoSession({ clientId: 'abc' }))
+    expect(isUserId(user.userId)).toBe(true)
+    expect(user.userId).toContain('abc')
+    expect(isOrganizationId(user.organizationId)).toBe(true)
+    expect(isDirectoryId(user.rootDirectoryId)).toBe(true)
+  })
+
+  it('propagates the Cognito email into name and email fields', () => {
+    const user = makeSyntheticUser(fakeCognitoSession({ email: 'someone@enso.org' }))
+    expect(user.email).toBe('someone@enso.org')
+    expect(user.name).toBe('someone@enso.org')
+  })
+
+  it('handles a missing clientId without producing an empty identifier', () => {
+    const user = makeSyntheticUser(fakeCognitoSession({ clientId: '' }))
+    expect(user.userId).toBe('user-cloud-unavailable-unknown')
+  })
+})