Refactor: separate authMachine from React (#5110)

* Create a global appMachine

* Strip authMachine of side-effects

* Replace react-bound authMachine use with XState actor use

* Fix import goof

* Register auth commands directly!

* @lf94 feedback: conver `AuthNavigationHandler` to `useAuthNavigation`

* Uh, fix signing out thank you @lf94

* Fix tsc

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)"

This reverts commit 8dc50b6a26.

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/AppHeader.tsx

@@ -2,11 +2,11 @@ import { Toolbar } from '../Toolbar'
 import UserSidebarMenu from 'components/UserSidebarMenu'
 import { type IndexLoaderData } from 'lib/types'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import styles from './AppHeader.module.css'
 import { RefreshButton } from 'components/RefreshButton'
 import { CommandBarOpenButton } from './CommandBarOpenButton'
 import { isDesktop } from 'lib/isDesktop'
+import { useUser } from 'machines/appMachine'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
@@ -24,8 +24,7 @@ export const AppHeader = ({
   style,
   enableMenu = false,
 }: AppHeaderProps) => {
-  const { auth } = useSettingsAuthContext()
-  const user = auth?.context?.user
+  const user = useUser()
 
   return (
     <header

src/components/FileMachineProvider.tsx

@@ -30,6 +30,7 @@ import {
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { markOnce } from 'lib/performance'
 import { commandBarActor } from 'machines/commandBarMachine'
+import { useToken } from 'machines/appMachine'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -47,7 +48,8 @@ export const FileMachineProvider = ({
   children: React.ReactNode
 }) => {
   const navigate = useNavigate()
-  const { settings, auth } = useSettingsAuthContext()
+  const { settings } = useSettingsAuthContext()
+  const token = useToken()
   const projectData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
   const { project, file } = projectData
   const [kclSamples, setKclSamples] = React.useState<KclSamplesManifestItem[]>(
@@ -297,7 +299,7 @@ export const FileMachineProvider = ({
   const kclCommandMemo = useMemo(
     () =>
       kclCommands({
-        authToken: auth?.context?.token ?? '',
+        authToken: token ?? '',
         projectData,
         settings: {
           defaultUnit: settings?.context?.modeling.defaultUnit.current ?? 'mm',

src/components/LspProvider.tsx

@@ -27,6 +27,7 @@ import { PROJECT_ENTRYPOINT } from 'lib/constants'
 import { err } from 'lib/trap'
 import { isDesktop } from 'lib/isDesktop'
 import { codeManager } from 'lib/singletons'
+import { useToken } from 'machines/appMachine'
 
 function getWorkspaceFolders(): LSP.WorkspaceFolder[] {
   return []
@@ -69,8 +70,7 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
   const [isKclLspReady, setIsKclLspReady] = useState(false)
   const [isCopilotLspReady, setIsCopilotLspReady] = useState(false)
 
-  const { auth } = useSettingsAuthContext()
-  const token = auth?.context.token
+  const token = useToken()
   const navigate = useNavigate()
 
   // So this is a bit weird, we need to initialize the lsp server and client.

src/components/ModelingMachineProvider.tsx

@@ -89,6 +89,7 @@ import { Node } from 'wasm-lib/kcl/bindings/Node'
 import { promptToEditFlow } from 'lib/promptToEdit'
 import { kclEditorActor } from 'machines/kclEditorMachine'
 import { commandBarActor } from 'machines/commandBarMachine'
+import { useToken } from 'machines/appMachine'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -110,7 +111,6 @@ export const ModelingMachineProvider = ({
   children: React.ReactNode
 }) => {
   const {
-    auth,
     settings: {
       context: {
         app: { theme, enableSSAO, allowOrbitInSketchMode },
@@ -127,7 +127,7 @@ export const ModelingMachineProvider = ({
   const navigate = useNavigate()
   const { context, send: fileMachineSend } = useFileContext()
   const { file } = useLoaderData() as IndexLoaderData
-  const token = auth?.context?.token
+  const token = useToken()
   const streamRef = useRef<HTMLDivElement>(null)
   const persistedContext = useMemo(() => getPersistedContext(), [])
 

src/components/ProjectSidebarMenu.tsx

@@ -20,6 +20,7 @@ import { useSelector } from '@xstate/react'
 import { copyFileShareLink } from 'lib/links'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { DEV } from 'env'
+import { useToken } from 'machines/appMachine'
 
 const ProjectSidebarMenu = ({
   project,
@@ -103,7 +104,8 @@ function ProjectMenuPopover({
   const location = useLocation()
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()
-  const { settings, auth } = useSettingsAuthContext()
+  const { settings } = useSettingsAuthContext()
+  const token = useToken()
   const machineManager = useContext(MachineManagerContext)
   const commands = useSelector(commandBarActor, commandsSelector)
 
@@ -194,7 +196,7 @@ function ProjectMenuPopover({
           disabled: !DEV,
           onClick: async () => {
             await copyFileShareLink({
-              token: auth?.context.token || '',
+              token: token ?? '',
               code: codeManager.code,
               name: project?.name || '',
               units: settings.context.modeling.defaultUnit.current,

src/components/RefreshButton.tsx

@@ -8,10 +8,10 @@ import Tooltip from './Tooltip'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { reportRejection } from 'lib/trap'
 import { toSync } from 'lib/utils'
+import { useToken } from 'machines/appMachine'
 
 export const RefreshButton = ({ children }: React.PropsWithChildren) => {
-  const { auth } = useSettingsAuthContext()
-  const token = auth?.context?.token
+  const token = useToken()
   const coreDumpManager = useMemo(
     () => new CoreDumpManager(engineCommandManager, codeManager, token),
     []

src/components/RouteProvider.tsx

@@ -2,10 +2,12 @@ import { useEffect, useState, createContext, ReactNode } from 'react'
 import { useNavigation, useLocation } from 'react-router-dom'
 import { PATHS } from 'lib/paths'
 import { markOnce } from 'lib/performance'
+import { useAuthNavigation } from 'hooks/useAuthNavigation'
 
 export const RouteProviderContext = createContext({})
 
 export function RouteProvider({ children }: { children: ReactNode }) {
+  useAuthNavigation()
   const [first, setFirstState] = useState(true)
   const navigation = useNavigation()
   const location = useLocation()

src/components/SettingsAuthProvider.tsx

@@ -2,10 +2,7 @@ import { trap } from 'lib/trap'
 import { useMachine, useSelector } from '@xstate/react'
 import { useNavigate, useRouteLoaderData, useLocation } from 'react-router-dom'
 import { PATHS, BROWSER_PATH } from 'lib/paths'
-import { authMachine, TOKEN_PERSIST_KEY } from '../machines/authMachine'
-import withBaseUrl from '../lib/withBaseURL'
 import React, { createContext, useEffect, useState } from 'react'
-import useStateMachineCommands from '../hooks/useStateMachineCommands'
 import { settingsMachine } from 'machines/settingsMachine'
 import { toast } from 'react-hot-toast'
 import {
@@ -16,7 +13,6 @@ import {
 } from 'lib/theme'
 import decamelize from 'decamelize'
 import { Actor, AnyStateMachine, ContextFrom, Prop, StateFrom } from 'xstate'
-import { authCommandBarConfig } from 'lib/commandBarConfigs/authCommandConfig'
 import {
   kclManager,
   sceneInfra,
@@ -50,7 +46,6 @@ type MachineContext<T extends AnyStateMachine> = {
 }
 
 type SettingsAuthContextType = {
-  auth: MachineContext<typeof authMachine>
   settings: MachineContext<typeof settingsMachine>
 }
 
@@ -370,40 +365,9 @@ export const SettingsAuthProviderBase = ({
     )
   }, [settingsState.context.textEditor.blinkingCursor.current])
 
-  // Auth machine setup
-  const [authState, authSend, authActor] = useMachine(
-    authMachine.provide({
-      actions: {
-        goToSignInPage: () => {
-          navigate(PATHS.SIGN_IN)
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          logout()
-        },
-        goToIndexPage: () => {
-          if (location.pathname.includes(PATHS.SIGN_IN)) {
-            navigate(PATHS.INDEX)
-          }
-        },
-      },
-    })
-  )
-
-  useStateMachineCommands({
-    machineId: 'auth',
-    state: authState,
-    send: authSend,
-    commandBarConfig: authCommandBarConfig,
-    actor: authActor,
-  })
-
   return (
     <SettingsAuthContext.Provider
       value={{
-        auth: {
-          state: authState,
-          context: authState.context,
-          send: authSend,
-        },
         settings: {
           state: settingsState,
           context: settingsState.context,
@@ -417,12 +381,3 @@ export const SettingsAuthProviderBase = ({
 }
 
 export default SettingsAuthProvider
-
-export async function logout() {
-  localStorage.removeItem(TOKEN_PERSIST_KEY)
-  if (isDesktop()) return Promise.resolve(null)
-  return fetch(withBaseUrl('/logout'), {
-    method: 'POST',
-    credentials: 'include',
-  })
-}

src/components/UserSidebarMenu.tsx

@@ -4,12 +4,12 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { Fragment, useMemo, useState } from 'react'
 import { PATHS } from 'lib/paths'
 import { Models } from '@kittycad/lib'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import Tooltip from './Tooltip'
 import usePlatform from 'hooks/usePlatform'
 import { isDesktop } from 'lib/isDesktop'
 import { CustomIcon } from './CustomIcon'
+import { authActor } from 'machines/appMachine'
 
 type User = Models['User_type']
 
@@ -20,7 +20,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
   const displayedName = getDisplayName(user)
   const [imageLoadFailed, setImageLoadFailed] = useState(false)
   const navigate = useNavigate()
-  const send = useSettingsAuthContext()?.auth?.send
+  const send = authActor.send
 
   // We filter this memoized list so that no orphan "break" elements are rendered.
   const userMenuItems = useMemo<(ActionButtonProps | 'break')[]>(