Fix oidc list ssr

back/src/Kyoo.Authentication/Models/DTO/ServerInfo.cs

@@ -27,6 +27,11 @@ public class ServerInfo
 	/// </summary>
 	public Dictionary<string, OidcInfo> Oidc { get; set; }
 
+	/// <summary>
+	/// The url to reach the homepage of kyoo (add /api for the api).
+	/// </summary>
+	public string PublicUrl { get; set; }
+
 	/// <summary>
 	/// True if guest accounts are allowed on this instance.
 	/// </summary>

back/src/Kyoo.Authentication/Views/InfoApi.cs

@@ -40,6 +40,7 @@ public class InfoApi(PermissionOption options) : ControllerBase
 			{
 				AllowGuests = options.Default.Any(),
 				GuestPermissions = options.Default.ToList(),
+				PublicUrl = options.PublicUrl,
 				Oidc = options
 					.OIDC.Select(x => new KeyValuePair<string, OidcInfo>(
 						x.Key,

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

@@ -222,14 +222,14 @@ App.getInitialProps = async (ctx: AppContext) => {
 	else {
 		const client = (await fetchQuery(urls, authToken))!;
 		appProps.pageProps.queryState = dehydrate(client);
-		appProps.pageProps.token = token;
+		if (account) {
-		appProps.pageProps.account = {
+			appProps.pageProps.token = token;
-			...client.getQueryData(["auth", "me"]),
+			appProps.pageProps.account = {
-			...account,
+				...client.getQueryData(["auth", "me"]),
-		};
+				...account,
+			};
+		}
 	}
-	// TODO: return account from /auth/me and not the one from cookies,
-	// do not forget to leave apiUrl and selected intact
 	appProps.pageProps.theme = readCookie(ctx.ctx.req?.headers.cookie, "theme") ?? "auto";
 
 	return { pageProps: superjson.serialize(appProps.pageProps) };

front/packages/models/src/query.tsx

@@ -20,12 +20,10 @@
 
 import { ComponentType, ReactElement } from "react";
 import {
-	dehydrate,
 	QueryClient,
 	QueryFunctionContext,
 	useInfiniteQuery,
 	useQuery,
-	useQueryClient,
 } from "@tanstack/react-query";
 import { z } from "zod";
 import { KyooErrors } from "./kyoo-errors";

front/packages/models/src/resources/server-info.ts

@@ -19,7 +19,8 @@
  */
 
 import { z } from "zod";
-import { baseAppUrl, imageFn } from "..";
+import { imageFn } from "..";
+import { Platform } from "react-native";
 
 export const OidcInfoP = z.object({
 	/*
@@ -32,30 +33,40 @@ export const OidcInfoP = z.object({
 	logoUrl: z.string().nullable(),
 });
 
-export const ServerInfoP = z.object({
+export const ServerInfoP = z
-	/*
+	.object({
-	 * True if guest accounts are allowed on this instance.
+		/*
-	 */
+		 * True if guest accounts are allowed on this instance.
-	allowGuests: z.boolean(),
+		 */
-	/*
+		allowGuests: z.boolean(),
-	 * The list of permissions available for the guest account.
+		/*
-	 */
+		 * The list of permissions available for the guest account.
-	guestPermissions: z.array(z.string()),
+		 */
-	/*
+		guestPermissions: z.array(z.string()),
-	 * The list of oidc providers configured for this instance of kyoo.
+		/*
-	 */
+		 * The url to reach the homepage of kyoo (add /api for the api).
-	oidc: z.record(z.string(), OidcInfoP).transform((x) =>
+		 */
-		Object.fromEntries(
+		publicUrl: z.string(),
-			Object.entries(x).map(([provider, info]) => [
+		/*
-				provider,
+		 * The list of oidc providers configured for this instance of kyoo.
-				{
+		 */
-					...info,
+		oidc: z.record(z.string(), OidcInfoP),
-					link: imageFn(`/auth/login/${provider}?redirectUrl=${baseAppUrl()}/login/callback`),
+	})
-				},
+	.transform((x) => {
-			]),
+		const baseUrl = Platform.OS === "web" ? x.publicUrl : "kyoo://";
-		),
+		return {
-	),
+			...x,
-});
+			oidc: Object.fromEntries(
+				Object.entries(x.oidc).map(([provider, info]) => [
+					provider,
+					{
+						...info,
+						link: imageFn(`/auth/login/${provider}?redirectUrl=${baseUrl}/login/callback`),
+					},
+				]),
+			),
+		};
+	});
 
 /**
  * A season of a Show.

front/packages/models/src/traits/images.ts

@@ -25,8 +25,6 @@ import { lastUsedUrl } from "..";
 export const imageFn = (url: string) =>
 	Platform.OS === "web" ? `/api${url}` : `${lastUsedUrl}${url}`;
 
-export const baseAppUrl = () => (Platform.OS === "web" ? window.location.origin : "kyoo://");
-
 export const Img = z.object({
 	source: z.string(),
 	blurhash: z.string(),

front/packages/ui/src/settings/oidc.tsx

@@ -19,7 +19,7 @@
  */
 
 import { QueryIdentifier, ServerInfo, ServerInfoP, useAccount, useFetch } from "@kyoo/models";
-import { A, Button, IconButton, Link, Skeleton, tooltip, ts } from "@kyoo/primitives";
+import { Button, IconButton, Link, Skeleton, tooltip, ts } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
 import { ImageBackground } from "react-native";
 import { rem, useYoshiki } from "yoshiki/native";
@@ -82,7 +82,9 @@ export const OidcSettings = () => {
 							) : (
 								<Button
 									text={t("settings.oidc.link")}
-									onPress={() => {}}
+									as={Link}
+									href={x.link}
+									target="_blank"
 									{...css({ minWidth: rem(6) })}
 								/>
 							)}