Add auth guard and connection check on mobile

front/apps/mobile/app/_layout.tsx

@@ -21,7 +21,7 @@
 import { PortalProvider } from "@gorhom/portal";
 import { ThemeSelector } from "@kyoo/primitives";
 import { NavbarRight, NavbarTitle } from "@kyoo/ui";
-import { AccountProvider, createQueryClient, useAccounts } from "@kyoo/models";
+import { AccountProvider, createQueryClient, useAccount, useAccounts } from "@kyoo/models";
 import { QueryClientProvider } from "@tanstack/react-query";
 import i18next from "i18next";
 import { Stack } from "expo-router";
@@ -92,53 +92,53 @@ const ThemedStack = ({ onLayout }: { onLayout?: () => void }) => {
 	);
 };
 
-const AuthGuard = ({ selected }: { selected: number | null }) => {
+const AuthGuard = () => {
 	const router = useRouter();
+	// TODO: support guest accounts on mobile too.
+	const account = useAccount();
 
 	useEffect(() => {
-		if (selected === null)
+		if (account === null)
 			router.replace("/login", undefined, {
 				experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },
 			});
-	}, [selected, router]);
+	}, [account, router]);
 	return null;
 };
 
-let rendered: boolean = false;
 SplashScreen.preventAutoHideAsync();
 
 export default function Root() {
 	const [queryClient] = useState(() => createQueryClient());
 	const theme = useColorScheme();
 	const [fontsLoaded] = useFonts({ Poppins_300Light, Poppins_400Regular, Poppins_900Black });
-	const info = useAccounts();
-	const isReady = fontsLoaded && (rendered || info.type !== "loading");
 
 	useEffect(() => {
-		if (isReady) SplashScreen.hideAsync();
-	}, [isReady]);
+		if (fontsLoaded) SplashScreen.hideAsync();
+	}, [fontsLoaded]);
 
-	if (!isReady) return null;
-	rendered = true;
+	if (!fontsLoaded) return null;
 	return (
 		<QueryClientProvider client={queryClient}>
-			<AccountProvider>
-				<ThemeSelector
-					theme={theme ?? "light"}
-					font={{
-						normal: "Poppins_400Regular",
-						"300": "Poppins_300Light",
-						"400": "Poppins_400Regular",
-						"900": "Poppins_900Black",
-					}}
-				>
-					<PortalProvider>
-						{info.type === "loading" ? <CircularProgress /> : <ThemedStack />}
-						{info.type === "error" && <ConnectionError />}
-						{info.type === "ok" && <AuthGuard selected={info.selected} />}
-					</PortalProvider>
-				</ThemeSelector>
-			</AccountProvider>
+			<ThemeSelector
+				theme={theme ?? "light"}
+				font={{
+					normal: "Poppins_400Regular",
+					"300": "Poppins_300Light",
+					"400": "Poppins_400Regular",
+					"900": "Poppins_900Black",
+				}}
+			>
+				<PortalProvider>
+					<AccountProvider>
+						<>
+							<ThemedStack />
+							<ConnectionError />
+							<AuthGuard />
+						</>
+					</AccountProvider>
+				</PortalProvider>
+			</ThemeSelector>
 		</QueryClientProvider>
 	);
 }

front/apps/mobile/app/connection-error.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { AccountContext } from "@kyoo/models";
+import { ConnectionErrorContext } from "@kyoo/models";
 import { Button, H1, P, ts } from "@kyoo/primitives";
 import { useRouter } from "expo-router";
 import { useContext } from "react";
@@ -30,12 +30,12 @@ const ConnectionError = () => {
 	const { css } = useYoshiki();
 	const { t } = useTranslation();
 	const router = useRouter();
-	const { error, retry } = useContext(AccountContext);
+	const { error, retry } = useContext(ConnectionErrorContext);
 
 	return (
 		<View {...css({ padding: ts(2) })}>
 			<H1 {...css({ textAlign: "center" })}>{t("errors.connection")}</H1>
-			<P>{error ?? t("error.unknown")}</P>
+			<P>{error?.errors[0] ?? t("error.unknown")}</P>
 			<P>{t("errors.connection-tips")}</P>
 			<Button onPress={retry} text={t("errors.try-again")} {...css({ m: ts(1) })} />
 			<Button

front/packages/models/src/accounts.tsx

@@ -27,6 +27,7 @@ import { useMMKVString } from "react-native-mmkv";
 import { Platform } from "react-native";
 import { queryFn, useFetch } from "./query";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { KyooErrors } from "./kyoo-errors";
 
 export const TokenP = z.object({
 	token_type: z.literal("Bearer"),
@@ -47,6 +48,10 @@ export const AccountP = UserP.and(
 export type Account = z.infer<typeof AccountP>;
 
 const AccountContext = createContext<(Account & { select: () => void; remove: () => void })[]>([]);
+export const ConnectionErrorContext = createContext<{
+	error: KyooErrors | null;
+	retry?: () => void;
+}>({ error: null });
 
 export const AccountProvider = ({ children }: { children: ReactNode }) => {
 	const [accStr] = useMMKVString("accounts");
@@ -80,15 +85,27 @@ export const AccountProvider = ({ children }: { children: ReactNode }) => {
 	const oldSelectedId = useRef<string | undefined>(selected?.id);
 	useEffect(() => {
 		// if the user change account (or connect/disconnect), reset query cache.
-		if (selected?.id !== oldSelectedId.current)
-			queryClient.invalidateQueries();
+		if (selected?.id !== oldSelectedId.current) queryClient.invalidateQueries();
 		oldSelectedId.current = selected?.id;
 
 		// update cookies for ssr (needs to contains token, theme, language...)
 		if (Platform.OS === "web") setAccountCookie(selected);
 	}, [selected, queryClient]);
 
-	return <AccountContext.Provider value={accounts}>{children}</AccountContext.Provider>;
+	return (
+		<AccountContext.Provider value={accounts}>
+			<ConnectionErrorContext.Provider
+				value={{
+					error: user.error,
+					retry: () => {
+						queryClient.invalidateQueries({ queryKey: ["auth", "me"] });
+					},
+				}}
+			>
+				{children}
+			</ConnectionErrorContext.Provider>
+		</AccountContext.Provider>
+	);
 };
 
 export const useAccount = () => {