feat: oidc

Makefile

@@ -18,6 +18,10 @@ deps:
 	bun install --cwd frontend
 	go mod download
 
+# Clean data
+clean-data:
+	rm -rf data/
+
 # Clean web UI build
 clean-webui:
 	rm -rf internal/assets/dist
@@ -57,11 +61,11 @@ test:
 
 # Development
 develop:
-	docker compose -f $(DEV_COMPOSE) up --force-recreate --pull=always --remove-orphans
+	docker compose -f $(DEV_COMPOSE) up --force-recreate --pull=always --remove-orphans --build
 
 # Development - Infisical
 develop-infisical:
-	infisical run --env=dev -- docker compose -f $(DEV_COMPOSE) up --force-recreate --pull=always --remove-orphans
+	infisical run --env=dev -- docker compose -f $(DEV_COMPOSE) up --force-recreate --pull=always --remove-orphans --build
 
 # Production
 prod:

cmd/tinyauth/tinyauth.go

@@ -54,6 +54,10 @@ func NewTinyauthCmdConfiguration() *config.Config {
 				},
 			},
 		},
+		OIDC: config.OIDCConfig{
+			PrivateKeyPath: "./tinyauth_oidc_key",
+			PublicKeyPath:  "./tinyauth_oidc_key.pub",
+		},
 		Experimental: config.ExperimentalConfig{
 			ConfigFile: "",
 		},

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 (