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/index.css

@@ -159,6 +159,10 @@ code {
   @apply relative rounded bg-muted px-[0.2rem] py-[0.1rem] font-mono text-sm font-semibold break-all;
 }
 
+pre {
+  @apply bg-accent border border-border rounded-md p-2;
+}
+
 .lead {
   @apply text-xl text-muted-foreground;
 }

frontend/src/lib/hooks/oidc.ts

@@ -0,0 +1,53 @@
+export type OIDCValues = {
+  scope: string;
+  response_type: string;
+  client_id: string;
+  redirect_uri: string;
+  state: string;
+};
+
+interface IuseOIDCParams {
+  values: OIDCValues;
+  compiled: string;
+  isOidc: boolean;
+  missingParams: string[];
+}
+
+const optionalParams: string[] = ["state"];
+
+export function useOIDCParams(params: URLSearchParams): IuseOIDCParams {
+  let compiled: string = "";
+  let isOidc = false;
+  const missingParams: string[] = [];
+
+  const values: OIDCValues = {
+    scope: params.get("scope") ?? "",
+    response_type: params.get("response_type") ?? "",
+    client_id: params.get("client_id") ?? "",
+    redirect_uri: params.get("redirect_uri") ?? "",
+    state: params.get("state") ?? "",
+  };
+
+  for (const key of Object.keys(values)) {
+    if (!values[key as keyof OIDCValues]) {
+      if (!optionalParams.includes(key)) {
+        missingParams.push(key);
+      }
+    }
+  }
+
+  if (missingParams.length === 0) {
+    isOidc = true;
+  }
+
+  if (isOidc) {
+    compiled = new URLSearchParams(values).toString();
+  }
+
+  return {
+    values,
+    compiled,
+    isOidc,
+    missingParams,
+  };
+}

frontend/src/lib/i18n/locales/en-US.json

@@ -51,12 +51,31 @@
     "forgotPasswordTitle": "Forgot your password?",
     "failedToFetchProvidersTitle": "Failed to load authentication providers. Please check your configuration.",
     "errorTitle": "An error occurred",
-    "errorSubtitle": "An error occurred while trying to perform this action. Please check the console for more information.",
+    "errorSubtitleInfo": "The following error occurred while processing your request:",
+    "errorSubtitle": "An error occurred while trying to perform this action. Please check your browser console or the app logs for more information.",
     "forgotPasswordMessage": "You can reset your password by changing the `USERS` environment variable.",
     "fieldRequired": "This field is required",
     "invalidInput": "Invalid input",
     "domainWarningTitle": "Invalid Domain",
     "domainWarningSubtitle": "This instance is configured to be accessed from <code>{{appUrl}}</code>, but <code>{{currentUrl}}</code> is being used. If you proceed, you may encounter issues with authentication.",
     "ignoreTitle": "Ignore",
-    "goToCorrectDomainTitle": "Go to correct domain"
-}
+    "goToCorrectDomainTitle": "Go to correct domain",
+    "authorizeTitle": "Authorize",
+    "authorizeCardTitle": "Continue to {{app}}?",
+    "authorizeSubtitle": "Would you like to continue to this app? Please carefully review the permissions requested by the app.",
+    "authorizeSubtitleOAuth": "Would you like to continue to this app?",
+    "authorizeLoadingTitle": "Loading...",
+    "authorizeLoadingSubtitle": "Please wait while we load the client information.",
+    "authorizeSuccessTitle": "Authorized",
+    "authorizeSuccessSubtitle": "You will be redirected to the app in a few seconds.",
+    "authorizeErrorClientInfo": "An error occurred while loading the client information. Please try again later.",
+    "authorizeErrorMissingParams": "The following parameters are missing: {{missingParams}}",
+    "openidScopeName": "OpenID Connect",
+    "openidScopeDescription": "Allows the app to access your OpenID Connect information.",
+    "emailScopeName": "Email",
+    "emailScopeDescription": "Allows the app to access your email address.",
+    "profileScopeName": "Profile",
+    "profileScopeDescription": "Allows the app to access your profile information.",
+    "groupsScopeName": "Groups",
+    "groupsScopeDescription": "Allows the app to access your group information."
+}

frontend/src/lib/i18n/locales/en.json

@@ -51,12 +51,31 @@
     "forgotPasswordTitle": "Forgot your password?",
     "failedToFetchProvidersTitle": "Failed to load authentication providers. Please check your configuration.",
     "errorTitle": "An error occurred",
-    "errorSubtitle": "An error occurred while trying to perform this action. Please check the console for more information.",
+    "errorSubtitleInfo": "The following error occurred while processing your request:",
+    "errorSubtitle": "An error occurred while trying to perform this action. Please check your browser console or the app logs for more information.",
     "forgotPasswordMessage": "You can reset your password by changing the `USERS` environment variable.",
     "fieldRequired": "This field is required",
     "invalidInput": "Invalid input",
     "domainWarningTitle": "Invalid Domain",
     "domainWarningSubtitle": "This instance is configured to be accessed from <code>{{appUrl}}</code>, but <code>{{currentUrl}}</code> is being used. If you proceed, you may encounter issues with authentication.",
     "ignoreTitle": "Ignore",
-    "goToCorrectDomainTitle": "Go to correct domain"
-}
+    "goToCorrectDomainTitle": "Go to correct domain",
+    "authorizeTitle": "Authorize",
+    "authorizeCardTitle": "Continue to {{app}}?",
+    "authorizeSubtitle": "Would you like to continue to this app? Please carefully review the permissions requested by the app.",
+    "authorizeSubtitleOAuth": "Would you like to continue to this app?",
+    "authorizeLoadingTitle": "Loading...",
+    "authorizeLoadingSubtitle": "Please wait while we load the client information.",
+    "authorizeSuccessTitle": "Authorized",
+    "authorizeSuccessSubtitle": "You will be redirected to the app in a few seconds.",
+    "authorizeErrorClientInfo": "An error occurred while loading the client information. Please try again later.",
+    "authorizeErrorMissingParams": "The following parameters are missing: {{missingParams}}",
+    "openidScopeName": "OpenID Connect",
+    "openidScopeDescription": "Allows the app to access your OpenID Connect information.",
+    "emailScopeName": "Email",
+    "emailScopeDescription": "Allows the app to access your email address.",
+    "profileScopeName": "Profile",
+    "profileScopeDescription": "Allows the app to access your profile information.",
+    "groupsScopeName": "Groups",
+    "groupsScopeDescription": "Allows the app to access your group information."
+}

frontend/src/main.tsx

@@ -17,6 +17,7 @@ import { AppContextProvider } from "./context/app-context.tsx";
 import { UserContextProvider } from "./context/user-context.tsx";
 import { Toaster } from "@/components/ui/sonner";
 import { ThemeProvider } from "./components/providers/theme-provider.tsx";
+import { AuthorizePage } from "./pages/authorize-page.tsx";
 
 const queryClient = new QueryClient();
 
@@ -31,6 +32,7 @@ createRoot(document.getElementById("root")!).render(
                 <Route element={<Layout />} errorElement={<ErrorPage />}>
                   <Route path="/" element={<App />} />
                   <Route path="/login" element={<LoginPage />} />
+                  <Route path="/authorize" element={<AuthorizePage />} />
                   <Route path="/logout" element={<LogoutPage />} />
                   <Route path="/continue" element={<ContinuePage />} />
                   <Route path="/totp" element={<TotpPage />} />

frontend/src/pages/authorize-page.tsx

@@ -0,0 +1,199 @@
+import { useUserContext } from "@/context/user-context";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Navigate, useNavigate } from "react-router";
+import { useLocation } from "react-router";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardFooter,
+  CardContent,
+} from "@/components/ui/card";
+import { getOidcClientInfoSchema } from "@/schemas/oidc-schemas";
+import { Button } from "@/components/ui/button";
+import axios from "axios";
+import { toast } from "sonner";
+import { useOIDCParams } from "@/lib/hooks/oidc";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
+import { Mail, Shield, User, Users } from "lucide-react";
+
+type Scope = {
+  id: string;
+  name: string;
+  description: string;
+  icon: React.ReactNode;
+};
+
+const scopeMapIconProps = {
+  className: "stroke-card stroke-2.5",
+};
+
+const createScopeMap = (t: TFunction<"translation", undefined>): Scope[] => {
+  return [
+    {
+      id: "openid",
+      name: t("openidScopeName"),
+      description: t("openidScopeDescription"),
+      icon: <Shield {...scopeMapIconProps} />,
+    },
+    {
+      id: "email",
+      name: t("emailScopeName"),
+      description: t("emailScopeDescription"),
+      icon: <Mail {...scopeMapIconProps} />,
+    },
+    {
+      id: "profile",
+      name: t("profileScopeName"),
+      description: t("profileScopeDescription"),
+      icon: <User {...scopeMapIconProps} />,
+    },
+    {
+      id: "groups",
+      name: t("groupsScopeName"),
+      description: t("groupsScopeDescription"),
+      icon: <Users {...scopeMapIconProps} />,
+    },
+  ];
+};
+
+export const AuthorizePage = () => {
+  const { isLoggedIn } = useUserContext();
+  const { search } = useLocation();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const scopeMap = createScopeMap(t);
+
+  const searchParams = new URLSearchParams(search);
+  const {
+    values: props,
+    missingParams,
+    isOidc,
+    compiled: compiledOIDCParams,
+  } = useOIDCParams(searchParams);
+  const scopes = props.scope ? props.scope.split(" ").filter(Boolean) : [];
+
+  const getClientInfo = useQuery({
+    queryKey: ["client", props.client_id],
+    queryFn: async () => {
+      const res = await fetch(`/api/oidc/clients/${props.client_id}`);
+      const data = await getOidcClientInfoSchema.parseAsync(await res.json());
+      return data;
+    },
+    enabled: isOidc,
+  });
+
+  const authorizeMutation = useMutation({
+    mutationFn: () => {
+      return axios.post("/api/oidc/authorize", {
+        scope: props.scope,
+        response_type: props.response_type,
+        client_id: props.client_id,
+        redirect_uri: props.redirect_uri,
+        state: props.state,
+      });
+    },
+    mutationKey: ["authorize", props.client_id],
+    onSuccess: (data) => {
+      toast.info(t("authorizeSuccessTitle"), {
+        description: t("authorizeSuccessSubtitle"),
+      });
+      window.location.replace(data.data.redirect_uri);
+    },
+    onError: (error) => {
+      window.location.replace(
+        `/error?error=${encodeURIComponent(error.message)}`,
+      );
+    },
+  });
+
+  if (missingParams.length > 0) {
+    return (
+      <Navigate
+        to={`/error?error=${encodeURIComponent(t("authorizeErrorMissingParams", { missingParams: missingParams.join(", ") }))}`}
+        replace
+      />
+    );
+  }
+
+  if (!isLoggedIn) {
+    return <Navigate to={`/login?${compiledOIDCParams}`} replace />;
+  }
+
+  if (getClientInfo.isLoading) {
+    return (
+      <Card className="min-w-xs sm:min-w-sm">
+        <CardHeader>
+          <CardTitle className="text-3xl">
+            {t("authorizeLoadingTitle")}
+          </CardTitle>
+          <CardDescription>{t("authorizeLoadingSubtitle")}</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (getClientInfo.isError) {
+    return (
+      <Navigate
+        to={`/error?error=${encodeURIComponent(t("authorizeErrorClientInfo"))}`}
+        replace
+      />
+    );
+  }
+
+  return (
+    <Card className="min-w-xs sm:min-w-sm mx-4">
+      <CardHeader>
+        <CardTitle className="text-3xl">
+          {t("authorizeCardTitle", {
+            app: getClientInfo.data?.name || "Unknown",
+          })}
+        </CardTitle>
+        <CardDescription>
+          {scopes.includes("openid")
+            ? t("authorizeSubtitle")
+            : t("authorizeSubtitleOAuth")}
+        </CardDescription>
+      </CardHeader>
+      {scopes.includes("openid") && (
+        <CardContent className="flex flex-col gap-4">
+          {scopes.map((id) => {
+            const scope = scopeMap.find((s) => s.id === id);
+            if (!scope) return null;
+            return (
+              <div key={scope.id} className="flex flex-row items-center gap-3">
+                <div className="p-2 flex flex-col items-center justify-center bg-card-foreground rounded-md">
+                  {scope.icon}
+                </div>
+                <div className="flex flex-col gap-0.5">
+                  <div className="text-md">{scope.name}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {scope.description}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </CardContent>
+      )}
+      <CardFooter className="flex flex-col items-stretch gap-2">
+        <Button
+          onClick={() => authorizeMutation.mutate()}
+          loading={authorizeMutation.isPending}
+        >
+          {t("authorizeTitle")}
+        </Button>
+        <Button
+          onClick={() => navigate("/")}
+          disabled={authorizeMutation.isPending}
+          variant="outline"
+        >
+          {t("cancelTitle")}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};

frontend/src/pages/continue-page.tsx

@@ -80,7 +80,7 @@ export const ContinuePage = () => {
       clearTimeout(auto);
       clearTimeout(reveal);
     };
-  }, []);
+  });
 
   if (!isLoggedIn) {
     return (

frontend/src/pages/error-page.tsx

@@ -5,15 +5,30 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router";
 
 export const ErrorPage = () => {
   const { t } = useTranslation();
+  const { search } = useLocation();
+  const searchParams = new URLSearchParams(search);
+  const error = searchParams.get("error") ?? "";
 
   return (
     <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
         <CardTitle className="text-3xl">{t("errorTitle")}</CardTitle>
-        <CardDescription>{t("errorSubtitle")}</CardDescription>
+        <CardDescription className="flex flex-col gap-1.5">
+          {error ? (
+            <>
+              <p>{t("errorSubtitleInfo")}</p>
+              <pre>{error}</pre>
+            </>
+          ) : (
+            <>
+              <p>{t("errorSubtitle")}</p>
+            </>
+          )}
+        </CardDescription>
       </CardHeader>
     </Card>
   );

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
       />
     );

frontend/src/pages/logout-page.tsx

@@ -55,7 +55,7 @@ export const LogoutPage = () => {
       <CardHeader>
         <CardTitle className="text-3xl">{t("logoutTitle")}</CardTitle>
         <CardDescription>
-          {provider !== "username" ? (
+          {provider !== "local" && provider !== "ldap" ? (
             <Trans
               i18nKey="logoutOauthSubtitle"
               t={t}

frontend/src/pages/totp-page.tsx

@@ -16,6 +16,7 @@ import { useEffect, useId, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Navigate, useLocation } from "react-router";
 import { toast } from "sonner";
+import { useOIDCParams } from "@/lib/hooks/oidc";
 
 export const TotpPage = () => {
   const { totpPending } = useUserContext();
@@ -26,7 +27,11 @@ export const TotpPage = () => {
   const redirectTimer = useRef<number | null>(null);
 
   const searchParams = new URLSearchParams(search);
-  const redirectUri = searchParams.get("redirect_uri");
+  const {
+    values: props,
+    isOidc,
+    compiled: compiledOIDCParams,
+  } = useOIDCParams(searchParams);
 
   const totpMutation = useMutation({
     mutationFn: (values: TotpSchema) => axios.post("/api/user/totp", values),
@@ -37,9 +42,14 @@ export const TotpPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
-        window.location.replace(
-          `/continue?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
-        );
+        if (isOidc) {
+          window.location.replace(`/authorize?${compiledOIDCParams}`);
+          return;
+        } else {
+          window.location.replace(
+            `/continue?redirect_uri=${encodeURIComponent(props.redirect_uri)}`,
+          );
+        }
       }, 500);
     },
     onError: () => {

frontend/src/schemas/oidc-schemas.ts

@@ -0,0 +1,5 @@
+import { z } from "zod";
+
+export const getOidcClientInfoSchema = z.object({
+  name: z.string(),
+});

frontend/vite.config.ts

@@ -24,6 +24,11 @@ export default defineConfig({
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/resources/, ""),
       },
+      "/.well-known": {
+        target: "http://tinyauth-backend:3000/.well-known",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/\.well-known/, ""),
+      },
     },
     allowedHosts: true,
   },