Cannot avoid a undefined initial app context

web/apps/auth/src/pages/_app.tsx

@@ -47,7 +47,7 @@ type AppContextType = {
     logout: () => void;
 };
 
-export const AppContext = createContext<AppContextType>(null);
+export const AppContext = createContext<AppContextType | undefined>(undefined);
 
 export default function App({ Component, pageProps }: AppProps) {
     const router = useRouter();

web/apps/auth/src/pages/auth.tsx

@@ -1,3 +1,4 @@
+import { ensure } from "@/utils/ensure";
 import {
     HorizontalFlex,
     VerticallyCentered,
@@ -20,8 +21,8 @@ import React, { useContext, useEffect, useState } from "react";
 import { generateOTPs, type Code } from "services/code";
 import { getAuthCodes } from "services/remote";
 
-const AuthenticatorCodesPage = () => {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     const router = useRouter();
     const [codes, setCodes] = useState<Code[]>([]);
     const [hasFetched, setHasFetched] = useState(false);
@@ -122,10 +123,10 @@ const AuthenticatorCodesPage = () => {
     );
 };
 
-export default AuthenticatorCodesPage;
+export default Page;
 
 const AuthNavbar: React.FC = () => {
-    const { isMobile, logout } = useContext(AppContext);
+    const { isMobile, logout } = ensure(useContext(AppContext));
 
     return (
         <NavbarBase isMobile={isMobile}>

web/apps/auth/src/pages/change-email.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import ChangeEmailPage from "@ente/accounts/pages/change-email";
 import { APPS } from "@ente/shared/apps/constants";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import React, { useContext } from "react";
 
-export default function ChangeEmail() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <ChangeEmailPage appContext={appContext} appName={APPS.AUTH} />;
-}
+};
+
+export default Page;

web/apps/auth/src/pages/change-password.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import ChangePasswordPage from "@ente/accounts/pages/change-password";
 import { APPS } from "@ente/shared/apps/constants";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import React, { useContext } from "react";
 
-export default function ChangePassword() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <ChangePasswordPage appContext={appContext} appName={APPS.AUTH} />;
 }
+
+export default Page;

web/apps/auth/src/pages/credentials.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import CredentialPage from "@ente/accounts/pages/credentials";
 import { APPS } from "@ente/shared/apps/constants";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import React, { useContext } from "react";
 
-export default function Credential() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <CredentialPage appContext={appContext} appName={APPS.AUTH} />;
-}
+};
+
+export default Page;

web/apps/auth/src/pages/generate.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import GeneratePage from "@ente/accounts/pages/generate";
 import { APPS } from "@ente/shared/apps/constants";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import React, { useContext } from "react";
 
-export default function Generate() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <GeneratePage appContext={appContext} appName={APPS.AUTH} />;
-}
+};
+
+export default Page;

web/apps/auth/src/pages/index.tsx

@@ -1,8 +1,8 @@
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 
-const IndexPage = () => {
+const Page: React.FC = () => {
     const router = useRouter();
     useEffect(() => {
         router.push(PAGES.LOGIN);
@@ -11,4 +11,4 @@ const IndexPage = () => {
     return <></>;
 };
 
-export default IndexPage;
+export default Page;

web/apps/auth/src/pages/login.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import LoginPage from "@ente/accounts/pages/login";
 import { APPS } from "@ente/shared/apps/constants";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import React, { useContext } from "react";
 
-export default function Login() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <LoginPage appContext={appContext} appName={APPS.AUTH} />;
-}
+};
+
+export default Page;

web/apps/auth/src/pages/passkeys/finish.tsx

@@ -1,11 +1,3 @@
-import PasskeysFinishPage from "@ente/accounts/pages/passkeys/finish";
+import Page from "@ente/accounts/pages/passkeys/finish";
 
-const PasskeysFinish = () => {
-    return (
-        <>
-            <PasskeysFinishPage />
-        </>
-    );
-};
-
-export default PasskeysFinish;
+export default Page;

web/apps/auth/src/pages/recover.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import RecoverPage from "@ente/accounts/pages/recover";
 import { APPS } from "@ente/shared/apps/constants";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import React, { useContext } from "react";
 
-export default function Recover() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <RecoverPage appContext={appContext} appName={APPS.AUTH} />;
-}
+};
+
+export default Page;

web/apps/auth/src/pages/signup.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import SignupPage from "@ente/accounts/pages/signup";
 import { APPS } from "@ente/shared/apps/constants";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import React, { useContext } from "react";
 
-export default function Sigup() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <SignupPage appContext={appContext} appName={APPS.AUTH} />;
-}
+};
+
+export default Page;

web/apps/auth/src/pages/two-factor/recover.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import TwoFactorRecoverPage from "@ente/accounts/pages/two-factor/recover";
 import { APPS } from "@ente/shared/apps/constants";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import React, { useContext } from "react";
 
-export default function TwoFactorRecover() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <TwoFactorRecoverPage appContext={appContext} appName={APPS.AUTH} />;
-}
+};
+
+export default Page;

web/apps/auth/src/pages/two-factor/setup.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import TwoFactorSetupPage from "@ente/accounts/pages/two-factor/setup";
 import { APPS } from "@ente/shared/apps/constants";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import React, { useContext } from "react";
 
-export default function TwoFactorSetup() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <TwoFactorSetupPage appContext={appContext} appName={APPS.AUTH} />;
 }
+
+export default Page;

web/apps/auth/src/pages/two-factor/verify.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import TwoFactorVerifyPage from "@ente/accounts/pages/two-factor/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { AppContext } from "../_app";
 
-export default function TwoFactorVerify() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <TwoFactorVerifyPage appContext={appContext} appName={APPS.AUTH} />;
-}
+};
+
+export default Page;

web/apps/auth/src/pages/verify.tsx

@@ -1,9 +1,12 @@
+import { ensure } from "@/utils/ensure";
 import VerifyPage from "@ente/accounts/pages/verify";
 import { APPS } from "@ente/shared/apps/constants";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import React, { useContext } from "react";
 
-export default function Verify() {
-    const appContext = useContext(AppContext);
+const Page: React.FC = () => {
+    const appContext = ensure(useContext(AppContext));
     return <VerifyPage appContext={appContext} appName={APPS.AUTH} />;
-}
+};
+
+export default Page;