Automatically load the login page on mobile

front/apps/mobile/app/_layout.tsx

@@ -22,6 +22,7 @@ import { PortalProvider } from "@gorhom/portal";
 import { ThemeSelector } from "@kyoo/primitives";
 import { NavbarRight, NavbarTitle } from "@kyoo/ui";
 import { createQueryClient } from "@kyoo/models";
+import { getSecureItem } from "@kyoo/models/src/secure-store";
 import { QueryClientProvider } from "@tanstack/react-query";
 import i18next from "i18next";
 import { Stack } from "expo-router";
@@ -33,11 +34,12 @@ import {
 	Poppins_400Regular,
 	Poppins_900Black,
 } from "@expo-google-fonts/poppins";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useColorScheme } from "react-native";
 import { initReactI18next } from "react-i18next";
 import { useTheme } from "yoshiki/native";
 import "intl-pluralrules";
+import { ApiUrlContext } from "./index";
 
 // TODO: use a backend to load jsons.
 import en from "../../../translations/en.json";
@@ -75,27 +77,44 @@ const ThemedStack = ({ onLayout }: { onLayout?: () => void }) => {
 	);
 };
 
+const useApiUrl = (): string | null | undefined => {
+	const [apiUrl, setApiUrl] = useState<string | null | undefined>(undefined);
+
+	useEffect(() => {
+		async function run() {
+			const apiUrl = await getSecureItem("apiUrl");
+			setApiUrl(apiUrl);
+		}
+		run();
+	}, []);
+
+	return apiUrl;
+}
+
 export default function Root() {
 	const [queryClient] = useState(() => createQueryClient());
 	const theme = useColorScheme();
 	const [fontsLoaded] = useFonts({ Poppins_300Light, Poppins_400Regular, Poppins_900Black });
+	const apiUrl = useApiUrl();
 
-	if (!fontsLoaded) return <SplashScreen />;
+	if (!fontsLoaded || apiUrl === undefined) return <SplashScreen />;
 	return (
-		<QueryClientProvider client={queryClient}>
+		<ApiUrlContext.Provider value={apiUrl}>
-			<ThemeSelector
+			<QueryClientProvider client={queryClient}>
-				theme={theme ?? "light"}
+				<ThemeSelector
-				font={{
+					theme={theme ?? "light"}
-					normal: "Poppins_400Regular",
+					font={{
-					"300": "Poppins_300Light",
+						normal: "Poppins_400Regular",
-					"400": "Poppins_400Regular",
+						"300": "Poppins_300Light",
-					"900": "Poppins_900Black",
+						"400": "Poppins_400Regular",
-				}}
+						"900": "Poppins_900Black",
-			>
+					}}
-				<PortalProvider>
+				>
-					<ThemedStack />
+					<PortalProvider>
-				</PortalProvider>
+						<ThemedStack />
-			</ThemeSelector>
+					</PortalProvider>
-		</QueryClientProvider>
+				</ThemeSelector>
+			</QueryClientProvider>
+		</ApiUrlContext.Provider>
 	);
 }

front/apps/mobile/app/index.tsx

@@ -18,7 +18,17 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import BrowsePage from "./browse";
+import { Redirect } from "expo-router";
+import { createContext, useContext } from "react";
 
-// While there is no home page, show the browse page.
+export const ApiUrlContext = createContext<string | null>(null);
-export default BrowsePage;
+
+const App = () => {
+	const apiUrl = useContext(ApiUrlContext);
+	if (!apiUrl)
+		return <Redirect href="/login" />;
+	// While there is no home page, show the browse page.
+	return <Redirect href="/browse" />;
+};
+
+export default App;

front/apps/mobile/metro.config.js

@@ -57,4 +57,15 @@ function addSvgTransformer(config) {
 	};
 }
 
-module.exports = addMonorepoSupport(addSvgTransformer(defaultConfig));
+module.exports = addMonorepoSupport(
+	addSvgTransformer({
+		...defaultConfig,
+		resolver: {
+			...defaultConfig.resolver,
+			requireCycleIgnorePatterns: [
+				...defaultConfig.resolver.requireCycleIgnorePatterns,
+				/login.ts/,
+			],
+		},
+	}),
+);

front/packages/models/src/login.ts

@@ -23,6 +23,8 @@ import { deleteSecureItem, getSecureItem, setSecureItem } from "./secure-store";
 import { zdate } from "./utils";
 import { queryFn } from "./query";
 import { KyooErrors } from "./kyoo-errors";
+import { createContext, useContext } from "react";
+import { User } from "./resources/user";
 
 const TokenP = z.object({
 	token_type: z.literal("Bearer"),
@@ -52,8 +54,7 @@ export const loginFunc = async (
 			TokenP,
 		);
 
-		if (typeof window !== "undefined")
+		if (typeof window !== "undefined") await setSecureItem("auth", JSON.stringify(token));
-			await setSecureItem("auth", JSON.stringify(token));
 		return { ok: true, value: token };
 	} catch (e) {
 		console.error(action, e);

front/packages/primitives/src/icons.tsx

@@ -53,8 +53,8 @@ export const Icon = ({ icon: Icon, color, size = 24, ...props }: IconProps) => {
 				default: {
 					height: computed.style?.height,
 					width: computed.style?.width,
-					// @ts-ignore
+					// // @ts-ignore
-					fill: computed.style?.fill,
+					// fill: computed.style?.fill,
 					...computed,
 				},
 			})}