feat: oidc (#605)

* chore: add oidc base config

* wip: authorize page

* feat: implement basic oidc functionality

* refactor: implement oidc following tinyauth patterns

* feat: adapt frontend to oidc flow

* fix: review comments

* fix: oidc review comments

* feat: refresh token grant type support

* feat: cleanup expired oidc sessions

* feat: frontend i18n

* fix: fix typo in error screen

* tests: add basic testing

* fix: more review comments

* refactor: rework oidc error messages

* feat: openid discovery endpoint

* feat: jwk endpoint

* i18n: fix typo

* fix: more rabbit nitpicks

* fix: final review comments

* i18n: authorize page error messages

frontend/src/pages/login-page.tsx

@@ -18,6 +18,7 @@ import { OAuthButton } from "@/components/ui/oauth-button";
 import { SeperatorWithChildren } from "@/components/ui/separator";
 import { useAppContext } from "@/context/app-context";
 import { useUserContext } from "@/context/user-context";
+import { useOIDCParams } from "@/lib/hooks/oidc";
 import { LoginSchema } from "@/schemas/login-schema";
 import { useMutation } from "@tanstack/react-query";
 import axios, { AxiosError } from "axios";
@@ -47,7 +48,11 @@ export const LoginPage = () => {
   const redirectButtonTimer = useRef<number | null>(null);
 
   const searchParams = new URLSearchParams(search);
-  const redirectUri = searchParams.get("redirect_uri");
+  const {
+    values: props,
+    isOidc,
+    compiled: compiledOIDCParams,
+  } = useOIDCParams(searchParams);
 
   const oauthProviders = providers.filter(
     (provider) => provider.id !== "local" && provider.id !== "ldap",
@@ -60,7 +65,7 @@ export const LoginPage = () => {
   const oauthMutation = useMutation({
     mutationFn: (provider: string) =>
       axios.get(
-        `/api/oauth/url/${provider}?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
+        `/api/oauth/url/${provider}?redirect_uri=${encodeURIComponent(props.redirect_uri)}`,
       ),
     mutationKey: ["oauth"],
     onSuccess: (data) => {
@@ -86,7 +91,7 @@ export const LoginPage = () => {
     onSuccess: (data) => {
       if (data.data.totpPending) {
         window.location.replace(
-          `/totp?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
+          `/totp?redirect_uri=${encodeURIComponent(props.redirect_uri)}`,
         );
         return;
       }
@@ -96,8 +101,12 @@ export const LoginPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
+        if (isOidc) {
+          window.location.replace(`/authorize?${compiledOIDCParams}`);
+          return;
+        }
         window.location.replace(
-          `/continue?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
+          `/continue?redirect_uri=${encodeURIComponent(props.redirect_uri)}`,
         );
       }, 500);
     },
@@ -115,7 +124,7 @@ export const LoginPage = () => {
     if (
       providers.find((provider) => provider.id === oauthAutoRedirect) &&
       !isLoggedIn &&
-      redirectUri
+      props.redirect_uri !== ""
     ) {
       // Not sure of a better way to do this
       // eslint-disable-next-line react-hooks/set-state-in-effect
@@ -125,7 +134,13 @@ export const LoginPage = () => {
         setShowRedirectButton(true);
       }, 5000);
     }
-  }, []);
+  }, [
+    providers,
+    isLoggedIn,
+    props.redirect_uri,
+    oauthAutoRedirect,
+    oauthMutation,
+  ]);
 
   useEffect(
     () => () => {
@@ -136,10 +151,14 @@ export const LoginPage = () => {
     [],
   );
 
-  if (isLoggedIn && redirectUri) {
+  if (isLoggedIn && isOidc) {
+    return <Navigate to={`/authorize?${compiledOIDCParams}`} replace />;
+  }
+
+  if (isLoggedIn && props.redirect_uri !== "") {
     return (
       <Navigate
-        to={`/continue?redirect_uri=${encodeURIComponent(redirectUri)}`}
+        to={`/continue?redirect_uri=${encodeURIComponent(props.redirect_uri)}`}
         replace
       />
     );