{"record":{"id":"fb038225155b1837","repo":"microsoft/autogen","slug":"useauth-must-be-used-within-an-authprovider","errorCode":null,"errorMessage":"useAuth must be used within an AuthProvider","messagePattern":"useAuth must be used within an AuthProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"python/packages/autogen-studio/frontend/src/auth/context.tsx","lineNumber":214,"sourceCode":"};\n\n// Hook to use auth context\nexport const useAuth = (): AuthContextType => {\n  if (typeof window === \"undefined\") {\n    // Return default values or empty implementation\n    return {\n      user: null,\n      isAuthenticated: false,\n      isLoading: true,\n      authType: \"none\",\n      login: async () => \"\",\n      logout: () => {},\n      handleAuthCallback: async () => {},\n    } as AuthContextType;\n  }\n  const context = useContext(AuthContext);\n  if (context === undefined) {\n    throw new Error(\"useAuth must be used within an AuthProvider\");\n  }\n  return context;\n};\n","sourceCodeStart":196,"sourceCodeEnd":218,"githubUrl":"https://github.com/microsoft/autogen/blob/027ecf0a379bcc1d09956d46d12d44a3ad9cee14/python/packages/autogen-studio/frontend/src/auth/context.tsx#L196-L218","documentation":"React error thrown by the useAuth hook in autogen-studio's frontend when it is called outside an <AuthProvider>. useContext(AuthContext) returns undefined only when no provider is mounted above the component, which the hook treats as a programming error and converts to an explicit throw.","triggerScenarios":"Rendering a component that calls useAuth() at the root of the app without wrapping the tree in <AuthProvider>; rendering a second React root (modal portal, micro-frontend) outside the provider tree; tests that render the component with createRoot instead of within the provider test wrapper.","commonSituations":"Refactors that moved <AuthProvider> deeper into the tree (e.g. inside a route layout) while some component renders above it; storybook/test setups missing the decorator; copy-pasting an auth-dependent widget into a page that is not part of the main app tree.","solutions":["Wrap the app (or at least every tree containing auth-consuming components) with <AuthProvider> high in the component hierarchy, typically around the router in main.tsx/index.tsx.","In tests, use a helper that renders inside a custom wrapper: render(<Comp />, { wrapper: AuthProvider }).","Ensure portals/modals pass through the same React tree or re-mount their own provider."],"exampleFix":"// before\nroot.render(<App />); // App calls useAuth() -> throws\n\n// after\nroot.render(\n  <AuthProvider>\n    <App />\n  </AuthProvider>\n);","handlingStrategy":"type-guard","validationCode":null,"typeGuard":"function useAuthSafe(): AuthContextType | null {\n  const ctx = useContext(AuthContext);\n  return ctx ?? null; // null instead of throw when no provider\n}\n\n// or assert the provider is mounted in dev only:\nif (process.env.NODE_ENV !== \"production\" && context === undefined) {\n  console.error(\"useAuth called outside <AuthProvider>\");\n}","tryCatchPattern":null,"preventionTips":["Mount <AuthProvider> once near the React root, above the router and any auth-consuming views.","Use a shared test wrapper (render(ui, { wrapper: AuthProvider })) for components that call useAuth.","Type the context default as undefined and keep the throw — it makes missing providers obvious in dev."],"tags":["react","typescript","context","frontend"],"backgroundTag":null,"analyzedSha":"027ecf0a379bcc1d09956d46d12d44a3ad9cee14","analyzedAt":"2026-08-15T03:38:00.719Z","schemaVersion":2},"datasetVersion":"2026-08-15T17:31:12.345Z"}