Auto launch OIDC (#1285)

* refactor(frontend): simplify OIDC redirect URL retrieval in auth route

- Extract OIDC redirect URL fetching into a separate function
- Streamline the getOidcRedirectUrl action handler

* feat(frontend): add auto OIDC launch option for authentication route

- Introduce `autoOidcLaunch` search parameter with default value of true
- Automatically redirect to OIDC login when local auth is disabled and OIDC is enabled
- Enhance authentication route to support seamless OIDC authentication flow

* docs: update OIDC authentication guide with auto launch option

- Add documentation for `autoOidcLaunch` parameter
- Clarify how to access authentication page when local auth is disabled
- Improve explanation of OIDC authentication flow

Author: IgnisDa

apps/frontend/app/routes/auth.tsx

@@ -23,6 +23,7 @@ import {
 	parseSearchQuery,
 	processSubmission,
 	startCase,
+	zodBoolAsString,
 	zodNumAsString,
 } from "@ryot/ts-utils";
 import { IconAt } from "@tabler/icons-react";
@@ -51,12 +52,18 @@ import {
 import type { Route } from "./+types/auth";
 
 const searchParamsSchema = z.object({
+	autoOidcLaunch: zodBoolAsString.default("true"),
 	intent: z.enum(["login", "register"]).optional(),
 });
 
 export type SearchParams = z.infer<typeof searchParamsSchema> &
 	Record<string, string>;
 
+const getOidcRedirectUrl = () =>
+	serverGqlService
+		.request(GetOidcRedirectUrlDocument)
+		.then(({ getOidcRedirectUrl }) => getOidcRedirectUrl);
+
 export const loader = async ({ request }: Route.LoaderArgs) => {
 	const query = parseSearchQuery(request, searchParamsSchema);
 	const isAuthenticated = !!getAuthorizationCookie(request);
@@ -75,6 +82,14 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
 		);
 	}
 	const [coreDetails] = await Promise.all([getCoreDetails()]);
+	if (
+		coreDetails.oidcEnabled &&
+		coreDetails.localAuthDisabled &&
+		query.autoOidcLaunch === true
+	) {
+		const url = await getOidcRedirectUrl();
+		return redirect(url);
+	}
 	return {
 		intent: query.intent || "login",
 		oidcEnabled: coreDetails.oidcEnabled,
@@ -173,10 +188,8 @@ export const action = async ({ request }: Route.ActionArgs) => {
 			});
 		})
 		.with("getOidcRedirectUrl", async () => {
-			const { getOidcRedirectUrl } = await serverGqlService.request(
-				GetOidcRedirectUrlDocument,
-			);
-			return redirect(getOidcRedirectUrl);
+			const url = await getOidcRedirectUrl();
+			return redirect(url);
 		})
 		.run();
 };

docs/content/guides/authentication.md

@@ -25,14 +25,17 @@ Once these are set, restart your Ryot instance and you should be able to see the
 "Continue with OpenID Connect" on the authentication pages. New users will have their
 username set to their email address. This can be changed later in the profile settings.
 
+You can set `USERS_DISABLE_LOCAL_AUTH=true` to disable local authentication and only allow
+users to authenticate using OIDC. When OIDC is enabled and local authentication is
+disabled, users will be redirected to the OIDC provider when they visit the auth page. To
+see the authentication page anyway, you can visit
+`<FRONTEND_URL>/auth?autoOidcLaunch=false`.
+
 !!! warning
 
       A user can either have a username/password or it can use your OIDC provider to
       authenticate but not both.
 
-You can set `USERS_DISABLE_LOCAL_AUTH=true` to disable local authentication and only allow
-users to authenticate using OIDC.
-
 ### Converting a local user to an OIDC user
 
 - Setup OpenID on your instance using the the above guide.