Rework account system

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

@@ -24,13 +24,13 @@ import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
 import { HiddenIfNoJs, SkeletonCss, ThemeSelector } from "@kyoo/primitives";
 import { WebTooltip } from "@kyoo/primitives/src/tooltip.web";
 import {
+	AccountProvider,
 	createQueryClient,
 	fetchQuery,
 	getTokenWJ,
 	QueryIdentifier,
 	QueryPage,
 } from "@kyoo/models";
-import { setSecureItem } from "@kyoo/models/src/secure-store.web";
 import { useState } from "react";
 import NextApp, { AppContext, type AppProps } from "next/app";
 import { Poppins } from "next/font/google";
@@ -40,6 +40,11 @@ import Head from "next/head";
 import { withTranslations } from "../i18n";
 import arrayShuffle from "array-shuffle";
 import { Tooltip } from "react-tooltip";
+import {
+	getCurrentAccount,
+	readAccountCookie,
+	updateAccount,
+} from "@kyoo/models/src/account-internal";
 
 const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" });
 
@@ -114,7 +119,10 @@ const App = ({ Component, pageProps }: AppProps) => {
 	useMobileHover();
 
 	// Set the auth from the server (if the token was refreshed during SSR).
-	if (typeof window !== "undefined" && token) setSecureItem("auth", JSON.stringify(token));
+	if (typeof window !== "undefined" && token) {
+		const account = getCurrentAccount();
+		if (account) updateAccount(account.id, { ...account, token });
+	}
 
 	return (
 		<YoshikiDebug>
@@ -124,25 +132,27 @@ const App = ({ Component, pageProps }: AppProps) => {
 					<meta name="description" content="A portable and vast media library solution." />
 				</Head>
 				<QueryClientProvider client={queryClient}>
-					<HydrationBoundary state={queryState}>
-						<ThemeSelector theme="auto" font={{ normal: "inherit" }}>
-							<GlobalCssTheme />
-							<Layout
-								page={
-									<Component
-										randomItems={
-											randomItems[Component.displayName!] ??
-											arrayShuffle((Component as QueryPage).randomItems ?? [])
-										}
-										{...props}
-									/>
-								}
-								randomItems={[]}
-								{...layoutProps}
-							/>
-							<Tooltip id="tooltip" positionStrategy={"fixed"} />
-						</ThemeSelector>
-					</HydrationBoundary>
+					<AccountProvider>
+						<HydrationBoundary state={queryState}>
+							<ThemeSelector theme="auto" font={{ normal: "inherit" }}>
+								<GlobalCssTheme />
+								<Layout
+									page={
+										<Component
+											randomItems={
+												randomItems[Component.displayName!] ??
+												arrayShuffle((Component as QueryPage).randomItems ?? [])
+											}
+											{...props}
+										/>
+									}
+									randomItems={[]}
+									{...layoutProps}
+								/>
+								<Tooltip id="tooltip" positionStrategy={"fixed"} />
+							</ThemeSelector>
+						</HydrationBoundary>
+					</AccountProvider>
 				</QueryClientProvider>
 			</>
 		</YoshikiDebug>
@@ -150,6 +160,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 };
 
 App.getInitialProps = async (ctx: AppContext) => {
+	const account = readAccountCookie(ctx.ctx.req?.headers.cookie);
 	const appProps = await NextApp.getInitialProps(ctx);
 	const Component = ctx.Component as QueryPage;
 
@@ -167,7 +178,7 @@ App.getInitialProps = async (ctx: AppContext) => {
 		...(getUrl ? getUrl(ctx.router.query as any, items) : []),
 		...(getLayoutUrl ? getLayoutUrl(ctx.router.query as any, items) : []),
 	];
-	const [authToken, token] = await getTokenWJ(ctx.ctx.req?.headers.cookie);
+	const [authToken, token] = await getTokenWJ(account ?? null);
 	appProps.pageProps.queryState = await fetchQuery(urls, authToken);
 	appProps.pageProps.token = token;