diff --git a/auth/shell.nix b/auth/shell.nix
index cde66962..0ee7c158 100644
--- a/auth/shell.nix
+++ b/auth/shell.nix
@@ -3,7 +3,9 @@ pkgs.mkShell {
   packages = with pkgs; [
     go
     wgo
-    go-migrate
+    (go-migrate.overrideAttrs (_: {
+      tags = ["postgres" "file"];
+    }))
     sqlc
     go-swag
     # for psql in cli (+ pgformatter for sql files)
diff --git a/auth/sql/migrations/000004_oidc_flow.down.sql b/auth/sql/migrations/000004_oidc.down.sql
similarity index 100%
rename from auth/sql/migrations/000004_oidc_flow.down.sql
rename to auth/sql/migrations/000004_oidc.down.sql
diff --git a/auth/sql/migrations/000004_oidc_flow.up.sql b/auth/sql/migrations/000004_oidc.up.sql
similarity index 100%
rename from auth/sql/migrations/000004_oidc_flow.up.sql
rename to auth/sql/migrations/000004_oidc.up.sql
diff --git a/front/src/app/(public)/oidc-callback.tsx b/front/src/app/(public)/oidc-callback.tsx
new file mode 100644
index 00000000..c9d64d01
--- /dev/null
+++ b/front/src/app/(public)/oidc-callback.tsx
@@ -0,0 +1,5 @@
+import { OidcCallbackPage } from "~/ui/login";
+
+export { ErrorBoundary } from "~/ui/error-boundary";
+
+export default OidcCallbackPage;
diff --git a/front/src/primitives/button.tsx b/front/src/primitives/button.tsx
index c90c6bf2..5d5b3251 100644
--- a/front/src/primitives/button.tsx
+++ b/front/src/primitives/button.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, ComponentType, Ref } from "react";
+import type { ComponentProps, ComponentType, ReactElement, Ref } from "react";
 import { type Falsy, type PressableProps, View } from "react-native";
 import { cn } from "~/utils";
 import { Icon } from "./icons";
@@ -9,6 +9,8 @@ export const Button = <AsProps = PressableProps>({
 	text,
 	icon,
 	ricon,
+	left,
+	right,
 	disabled,
 	as,
 	ref,
@@ -18,7 +20,9 @@ export const Button = <AsProps = PressableProps>({
 	disabled?: boolean | null;
 	text?: string;
 	icon?: ComponentProps<typeof Icon>["icon"] | Falsy;
+	left?: ReactElement | Falsy;
 	ricon?: ComponentProps<typeof Icon>["icon"] | Falsy;
+	right?: ReactElement | Falsy;
 	ref?: Ref<View>;
 	className?: string;
 	as?: ComponentType<AsProps>;
@@ -44,11 +48,13 @@ export const Button = <AsProps = PressableProps>({
 						className="mx-2 group-focus-within:fill-slate-200 group-hover:fill-slate-200"
 					/>
 				)}
+				{left}
 				{text && (
 					<P className="text-center group-focus-within:text-slate-200 group-hover:text-slate-200">
 						{text}
 					</P>
 				)}
+				{right}
 				{ricon && (
 					<Icon
 						icon={ricon}
diff --git a/front/src/primitives/input.tsx b/front/src/primitives/input.tsx
index b4232d21..c0557923 100644
--- a/front/src/primitives/input.tsx
+++ b/front/src/primitives/input.tsx
@@ -18,8 +18,8 @@ export const Input = ({
 	return (
 		<View
 			className={cn(
-				"shrink flex-row content-center items-center rounded-xl border border-accent p-1",
-				"focus-within:border-2",
+				"shrink flex-row content-center items-center rounded-xl border border-accent p-2",
+				"ring-accent focus-within:ring-2",
 				containerClassName,
 			)}
 		>
@@ -28,7 +28,7 @@ export const Input = ({
 				ref={ref}
 				textAlignVertical="center"
 				className={cn(
-					"h-full flex-1 font-sans text-base text-slate-600 outline-0 dark:text-slate-400",
+					"h-6 flex-1 font-sans text-base text-slate-600 outline-0 dark:text-slate-400",
 					className,
 				)}
 				{...props}
diff --git a/front/src/ui/login/index.ts b/front/src/ui/login/index.ts
index 27a86940..76c892f0 100644
--- a/front/src/ui/login/index.ts
+++ b/front/src/ui/login/index.ts
@@ -1,3 +1,4 @@
 export { LoginPage } from "./login";
+export { OidcCallbackPage } from "./oidc-callback";
 export { RegisterPage } from "./register";
 export { ServerUrlPage } from "./server-url";
diff --git a/front/src/ui/login/logic.tsx b/front/src/ui/login/logic.tsx
index d73f990f..b5bb8a39 100644
--- a/front/src/ui/login/logic.tsx
+++ b/front/src/ui/login/logic.tsx
@@ -52,35 +52,33 @@ export const login = async (
 	}
 };
 
-// export const oidcLogin = async (
-// 	provider: string,
-// 	code: string,
-// 	apiUrl?: string,
-// ) => {
-// 	if (!apiUrl || apiUrl.length === 0) apiUrl = getCurrentApiUrl()!;
-// 	try {
-// 		const token = await queryFn(
-// 			{
-// 				path: ["auth", "callback", provider, `?code=${code}`],
-// 				method: "POST",
-// 				authenticated: false,
-// 				apiUrl,
-// 			},
-// 			TokenP,
-// 		);
-// 		const user = await queryFn(
-// 			{ path: ["auth", "me"], method: "GET", apiUrl },
-// 			UserP,
-// 			`Bearer ${token.access_token}`,
-// 		);
-// 		const account: Account = { ...user, apiUrl: apiUrl, token, selected: true };
-// 		addAccount(account);
-// 		return { ok: true, value: account };
-// 	} catch (e) {
-// 		console.error("oidcLogin", e);
-// 		return { ok: false, error: (e as KyooErrors).errors[0] };
-// 	}
-// };
+export const oidcLogin = async (
+	provider: string,
+	code: string,
+	apiUrl?: string,
+) => {
+	apiUrl ??= defaultApiUrl;
+	try {
+		const { token } = await queryFn({
+			method: "POST",
+			url: `${apiUrl}/auth/oidc/callback/${provider}?token=${code}`,
+			authToken: null,
+			parser: z.object({ token: z.string() }),
+		});
+		const user = await queryFn({
+			method: "GET",
+			url: `${apiUrl}/auth/users/me`,
+			authToken: token,
+			parser: User,
+		});
+		const account: Account = { ...user, apiUrl, token, selected: true };
+		addAccount(account);
+		return { ok: true, value: account };
+	} catch (e) {
+		console.error("oidcLogin", e);
+		return { ok: false, error: (e as KyooError).message };
+	}
+};
 
 export const logout = async () => {
 	const accounts = readAccounts();
diff --git a/front/src/ui/login/login.tsx b/front/src/ui/login/login.tsx
index 5ba11cda..eb0ad04e 100644
--- a/front/src/ui/login/login.tsx
+++ b/front/src/ui/login/login.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "expo-router";
+import { useLocalSearchParams, useRouter } from "expo-router";
 import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Platform } from "react-native";
@@ -7,6 +7,7 @@ import { defaultApiUrl } from "~/providers/account-provider";
 import { useQueryState } from "~/utils";
 import { FormPage } from "./form";
 import { login } from "./logic";
+import { OidcLogin } from "./oidc";
 import { PasswordInput } from "./password-input";
 import { ServerUrlPage } from "./server-url";
 
@@ -14,7 +15,8 @@ export const LoginPage = () => {
 	const [apiUrl] = useQueryState("apiUrl", defaultApiUrl);
 	const [username, setUsername] = useState("");
 	const [password, setPassword] = useState("");
-	const [error, setError] = useState<string | undefined>();
+	const params = useLocalSearchParams();
+	const [error, setError] = useState(params.error as string | null);
 
 	const { t } = useTranslation();
 	const router = useRouter();
@@ -24,38 +26,40 @@ export const LoginPage = () => {
 	return (
 		<FormPage apiUrl={apiUrl!}>
 			<H1 className="pb-4">{t("login.login")}</H1>
-			<P className="pl-2">{t("login.username")}</P>
-			<Input
-				autoComplete="username"
-				onChangeText={(value) => setUsername(value)}
-				autoCapitalize="none"
-			/>
-			<P className="pt-2 pl-2">{t("login.password")}</P>
-			<PasswordInput
-				autoComplete="password"
-				onChangeText={(value) => setPassword(value)}
-			/>
-			{error && <P className="text-red-500 dark:text-red-500">{error}</P>}
-			<Button
-				text={t("login.login")}
-				onPress={async () => {
-					const { error } = await login("login", {
-						login: username,
-						password,
-						apiUrl,
-					});
-					setError(error);
-					if (error) return;
-					router.replace("/");
-				}}
-				className="m-2 my-6 w-60 self-center"
-			/>
-			<P>
-				<Trans i18nKey="login.or-register">
-					Don’t have an account?
-					<A href={`/register?apiUrl=${apiUrl}`}>Register</A>.
-				</Trans>
-			</P>
+			<OidcLogin apiUrl={apiUrl}>
+				<P className="pl-2">{t("login.username")}</P>
+				<Input
+					autoComplete="username"
+					onChangeText={(value) => setUsername(value)}
+					autoCapitalize="none"
+				/>
+				<P className="pt-2 pl-2">{t("login.password")}</P>
+				<PasswordInput
+					autoComplete="password"
+					onChangeText={(value) => setPassword(value)}
+				/>
+				{error && <P className="text-red-500 dark:text-red-500">{error}</P>}
+				<Button
+					text={t("login.login")}
+					onPress={async () => {
+						const { error } = await login("login", {
+							login: username,
+							password,
+							apiUrl,
+						});
+						setError(error);
+						if (error) return;
+						router.replace("/");
+					}}
+					className="m-2 my-6 w-60 self-center"
+				/>
+				<P>
+					<Trans i18nKey="login.or-register">
+						Don’t have an account?
+						<A href={`/register?apiUrl=${apiUrl}`}>Register</A>.
+					</Trans>
+				</P>
+			</OidcLogin>
 		</FormPage>
 	);
 };
diff --git a/front/src/ui/login/oidc-callback.tsx b/front/src/ui/login/oidc-callback.tsx
new file mode 100644
index 00000000..6043128f
--- /dev/null
+++ b/front/src/ui/login/oidc-callback.tsx
@@ -0,0 +1,32 @@
+import { useRouter } from "expo-router";
+import { useEffect, useRef } from "react";
+import { P } from "~/primitives";
+import { useQueryState } from "~/utils";
+
+export const OidcCallbackPage = () => {
+	const [apiUrl] = useQueryState("apiUrl", undefined!);
+	const [provider] = useQueryState("provider", undefined!);
+	const [code] = useQueryState("token", undefined!);
+	const [error] = useQueryState("error", undefined!);
+
+	const hasRun = useRef(false);
+	const router = useRouter();
+
+	useEffect(() => {
+		if (hasRun.current) return;
+		hasRun.current = true;
+
+		function onError(error: string) {
+			router.replace({ pathname: "/login", params: { error, apiUrl } });
+		}
+		async function run() {
+			const { error: loginError } = await oidcLogin(provider, code, apiUrl);
+			if (loginError) onError(loginError);
+			else router.replace("/");
+		}
+
+		if (error) onError(error);
+		else run();
+	}, [provider, code, apiUrl, router, error]);
+	return <P>{"Loading"}</P>;
+};
diff --git a/front/src/ui/login/oidc.tsx b/front/src/ui/login/oidc.tsx
index bcda57e9..cd5f8675 100644
--- a/front/src/ui/login/oidc.tsx
+++ b/front/src/ui/login/oidc.tsx
@@ -1,126 +1,108 @@
-// import {
-// 	oidcLogin,
-// 	type QueryIdentifier,
-// 	type QueryPage,
-// 	type ServerInfo,
-// 	ServerInfoP,
-// 	useFetch,
-// } from "@kyoo/models";
-// import { Button, HR, Link, P, Skeleton, ts } from "@kyoo/primitives";
-// import { useEffect, useRef } from "react";
-// import { useTranslation } from "react-i18next";
-// import { ImageBackground, View } from "react-native";
-// import { useRouter } from "solito/router";
-//
-// export const OidcLogin = ({
-// 	apiUrl,
-// 	hideOr,
-// }: {
-// 	apiUrl?: string;
-// 	hideOr?: boolean;
-// }) => {
-// 	const { t } = useTranslation();
-// 	const { data } = useFetch({
-// 		options: { apiUrl },
-// 		...OidcLogin.query(),
-// 	});
-//
-// 	const btn = css({
-// 		width: { xs: percent(100), sm: percent(75) },
-// 		marginY: ts(1),
-// 	});
-//
-// 	return (
-// 		<View {...css({ alignItems: "center", marginY: ts(1) })}>
-// 			{data
-// 				? Object.values(data.oidc).map((x) => (
-// 						<Button
-// 							as={Link}
-// 							href={{ pathname: x.link, query: { apiUrl } }}
-// 							key={x.displayName}
-// 							licon={
-// 								x.logoUrl != null && (
-// 									<ImageBackground
-// 										source={{ uri: x.logoUrl }}
-// 										{...css({
-// 											width: ts(3),
-// 											height: ts(3),
-// 											marginRight: ts(2),
-// 										})}
-// 									/>
-// 								)
-// 							}
-// 							text={t("login.via", { provider: x.displayName })}
-// 							{...btn}
-// 						/>
-// 					))
-// 				: [...Array(3)].map((_, i) => (
-// 						<Button key={i} {...btn}>
-// 							<Skeleton {...css({ width: percent(66), marginY: rem(0.5) })} />
-// 						</Button>
-// 					))}
-// 			<View
-// 				{...css({
-// 					marginY: ts(1),
-// 					flexDirection: "row",
-// 					width: percent(100),
-// 					alignItems: "center",
-// 					display: hideOr ? "none" : undefined,
-// 				})}
-// 			>
-// 				<HR {...css({ flexGrow: 1 })} />
-// 				<P>{t("misc.or")}</P>
-// 				<HR {...css({ flexGrow: 1 })} />
-// 			</View>
-// 		</View>
-// 	);
-// };
-//
-// OidcLogin.query = (): QueryIdentifier<ServerInfo> => ({
-// 	path: ["info"],
-// 	parser: ServerInfoP,
-// });
-//
-// export const OidcCallbackPage: QueryPage<{
-// 	apiUrl?: string;
-// 	provider: string;
-// 	code: string;
-// 	error?: string;
-// }> = ({ apiUrl, provider, code, error }) => {
-// 	const hasRun = useRef(false);
-// 	const router = useRouter();
-//
-// 	useEffect(() => {
-// 		if (hasRun.current) return;
-// 		hasRun.current = true;
-//
-// 		function onError(error: string) {
-// 			router.replace(
-// 				{ pathname: "/login", query: { error, apiUrl } },
-// 				undefined,
-// 				{
-// 					experimental: {
-// 						nativeBehavior: "stack-replace",
-// 						isNestedNavigator: false,
-// 					},
-// 				},
-// 			);
-// 		}
-// 		async function run() {
-// 			const { error: loginError } = await oidcLogin(provider, code, apiUrl);
-// 			if (loginError) onError(loginError);
-// 			else {
-// 				router.replace("/", undefined, {
-// 					experimental: {
-// 						nativeBehavior: "stack-replace",
-// 						isNestedNavigator: false,
-// 					},
-// 				});
-// 			}
-// 		}
-//
-// 		if (error) onError(error);
-// 		else run();
-// 	}, [provider, code, apiUrl, router, error]);
-// 	return <P>{"Loading"}</P>;
-// };
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Image, Platform, View } from "react-native";
+import { z } from "zod/v4";
+import { Button, HR, Link, P, Skeleton } from "~/primitives";
+import { Fetch, type QueryIdentifier } from "~/query";
+
+export const OidcLogin = ({
+	apiUrl,
+	children,
+}: {
+	apiUrl: string;
+	children: ReactNode;
+}) => {
+	const { t } = useTranslation();
+
+	const or = (
+		<>
+			<View className="my-2 w-full flex-row items-center">
+				<HR className="grow" />
+				<P>{t("misc.or")}</P>
+				<HR className="grow" />
+			</View>
+			{children}
+		</>
+	);
+
+	return (
+		<Fetch
+			query={OidcLogin.query(apiUrl)}
+			Render={(info) => (
+				<>
+					<View className="my-2 items-center">
+						{Object.entries(info.oidc).map(([id, provider]) => (
+							<Button
+								as={Link}
+								key={id}
+								href={provider.link}
+								className="w-full sm:w-3/4"
+								left={
+									provider.logo ? (
+										<Image
+											source={{ uri: provider.logo }}
+											className="mx-2 h-6 w-6"
+											resizeMode="contain"
+										/>
+									) : null
+								}
+								text={t("login.via", { provider: provider.name })}
+							/>
+						))}
+					</View>
+					{info.allowRegister && or}
+				</>
+			)}
+			Loader={() => (
+				<>
+					<View className="my-2 items-center">
+						{[...Array(3)].map((_, i) => (
+							<View
+								key={i}
+								className="my-1.5 w-full rounded-4xl border-3 border-accent px-4 py-3 sm:w-3/4"
+							>
+								<Skeleton className="mx-auto my-1 h-5 w-2/3" />
+							</View>
+						))}
+					</View>
+					{or}
+				</>
+			)}
+		/>
+	);
+};
+
+OidcLogin.query = (apiUrl?: string): QueryIdentifier<AuthInfo> => ({
+	path: ["auth", "info"],
+	parser: AuthInfo,
+	options: { apiUrl },
+});
+
+const AuthInfo = z
+	.object({
+		publicUrl: z.string(),
+		allowRegister: z.boolean().optional().default(true),
+		oidc: z.record(
+			z.string(),
+			z.object({
+				name: z.string(),
+				logo: z.string().nullable().optional(),
+			}),
+		),
+	})
+	.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: `${x.publicUrl}/auth/oidc/login/${provider}?redirectUrl=${baseUrl}/login/callback`,
+					},
+				]),
+			),
+		};
+	});
+type AuthInfo = z.infer<typeof AuthInfo>;
diff --git a/front/src/ui/login/password-input.tsx b/front/src/ui/login/password-input.tsx
index 2ca17927..f5d6c2e5 100644
--- a/front/src/ui/login/password-input.tsx
+++ b/front/src/ui/login/password-input.tsx
@@ -13,6 +13,7 @@ export const PasswordInput = (props: ComponentProps<typeof Input>) => {
 				<IconButton
 					icon={show ? VisibilityOff : Visibility}
 					onPress={() => setVisibility(!show)}
+					className="p-0"
 				/>
 			}
 			{...props}
diff --git a/front/src/ui/login/register.tsx b/front/src/ui/login/register.tsx
index b09f2654..00e04c04 100644
--- a/front/src/ui/login/register.tsx
+++ b/front/src/ui/login/register.tsx
@@ -9,6 +9,7 @@ import { FormPage } from "./form";
 import { login } from "./logic";
 import { PasswordInput } from "./password-input";
 import { ServerUrlPage } from "./server-url";
+import { OidcLogin } from "./oidc";
 
 export const RegisterPage = () => {
 	const [apiUrl] = useQueryState("apiUrl", defaultApiUrl);
@@ -26,55 +27,57 @@ export const RegisterPage = () => {
 	return (
 		<FormPage apiUrl={apiUrl!}>
 			<H1 className="pb-4">{t("login.register")}</H1>
-			<P className="pl-2">{t("login.username")}</P>
-			<Input
-				autoComplete="username"
-				onChangeText={(value) => setUsername(value)}
-			/>
+			<OidcLogin apiUrl={apiUrl}>
+				<P className="pl-2">{t("login.username")}</P>
+				<Input
+					autoComplete="username"
+					onChangeText={(value) => setUsername(value)}
+				/>
 
-			<P className="pt-2 pl-2">{t("login.email")}</P>
-			<Input autoComplete="email" onChangeText={(value) => setEmail(value)} />
+				<P className="pt-2 pl-2">{t("login.email")}</P>
+				<Input autoComplete="email" onChangeText={(value) => setEmail(value)} />
 
-			<P className="pt-2 pl-2">{t("login.password")}</P>
-			<PasswordInput
-				autoComplete="new-password"
-				onChangeText={(value) => setPassword(value)}
-			/>
+				<P className="pt-2 pl-2">{t("login.password")}</P>
+				<PasswordInput
+					autoComplete="new-password"
+					onChangeText={(value) => setPassword(value)}
+				/>
 
-			<P className="pt-2 pl-2">{t("login.confirm")}</P>
-			<PasswordInput
-				autoComplete="new-password"
-				onChangeText={(value) => setConfirm(value)}
-			/>
+				<P className="pt-2 pl-2">{t("login.confirm")}</P>
+				<PasswordInput
+					autoComplete="new-password"
+					onChangeText={(value) => setConfirm(value)}
+				/>
 
-			{password !== confirm && (
-				<P className="text-red-500 dark:text-red-500">
-					{t("login.password-no-match")}
+				{password !== confirm && (
+					<P className="text-red-500 dark:text-red-500">
+						{t("login.password-no-match")}
+					</P>
+				)}
+				{error && <P className="text-red-500 dark:text-red-500">{error}</P>}
+				<Button
+					text={t("login.register")}
+					disabled={password !== confirm}
+					onPress={async () => {
+						const { error } = await login("register", {
+							email,
+							username,
+							password,
+							apiUrl,
+						});
+						setError(error);
+						if (error) return;
+						router.replace("/");
+					}}
+					className="m-2 my-6 w-60 self-center"
+				/>
+				<P>
+					<Trans i18nKey="login.or-login">
+						Have an account already?
+						<A href={`/login?apiUrl=${apiUrl}`}>Log in</A>.
+					</Trans>
 				</P>
-			)}
-			{error && <P className="text-red-500 dark:text-red-500">{error}</P>}
-			<Button
-				text={t("login.register")}
-				disabled={password !== confirm}
-				onPress={async () => {
-					const { error } = await login("register", {
-						email,
-						username,
-						password,
-						apiUrl,
-					});
-					setError(error);
-					if (error) return;
-					router.replace("/");
-				}}
-				className="m-2 my-6 w-60 self-center"
-			/>
-			<P>
-				<Trans i18nKey="login.or-login">
-					Have an account already?
-					<A href={`/login?apiUrl=${apiUrl}`}>Log in</A>.
-				</Trans>
-			</P>
+			</OidcLogin>
 		</FormPage>
 	);
 };
diff --git a/front/src/ui/login/server-url.tsx b/front/src/ui/login/server-url.tsx
index f9bff7c5..2da1f913 100644
--- a/front/src/ui/login/server-url.tsx
+++ b/front/src/ui/login/server-url.tsx
@@ -18,12 +18,10 @@ export const ServerUrlPage = () => {
 		queryKey: [apiUrl, "api", "health"],
 		queryFn: async (ctx) => {
 			try {
-				const apiUrl = "http://kyoo.sdg.moe";
 				const resp = await fetch(`${apiUrl}/api/health`, {
 					method: "GET",
 					signal: ctx.signal,
 				});
-				console.log(resp.url);
 				return resp.url.replace("/api/health", "");
 			} catch (e) {
 				console.log("server select fetch error", e);