oidc integration

Reviewed-on: #11

k-notes-frontend/src/pages/login.tsx

@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Settings } from "lucide-react";
+import { Settings, ExternalLink } from "lucide-react";
 import { SettingsDialog } from "@/components/settings-dialog";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { Link } from "react-router-dom";
-import { useLogin } from "@/hooks/use-auth";
+import { useLogin, useOidcLogin } from "@/hooks/use-auth";
 import { useConfig } from "@/hooks/useConfig";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -26,6 +26,7 @@ export default function LoginPage() {
   const { mutate: login, isPending } = useLogin();
   const { data: config } = useConfig();
   const { t } = useTranslation();
+  const startOidcLogin = useOidcLogin();
 
   const form = useForm<LoginFormValues>({
     resolver: zodResolver(loginSchema),
@@ -63,40 +64,71 @@ export default function LoginPage() {
             {t("Enter your email to sign in to your account")}
           </CardDescription>
         </CardHeader>
-        <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("Email")}</FormLabel>
-                    <FormControl>
-                      <Input placeholder="name@example.com" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("Password")}</FormLabel>
-                    <FormControl>
-                      <Input type="password" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <Button type="submit" className="w-full" disabled={isPending}>
-                {isPending ? t("Signing in...") : t("Sign in")}
+        <CardContent className="space-y-4">
+          {/* OIDC/SSO Login Button */}
+          {config?.oidc_enabled && (
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full"
+                onClick={startOidcLogin}
+              >
+                <ExternalLink className="mr-2 h-4 w-4" />
+                {t("Sign in with SSO")}
               </Button>
-            </form>
-          </Form>
+              {/* Divider only if both OIDC and password login are enabled */}
+              {config?.password_login_enabled && (
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t" />
+                  </div>
+                  <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-background px-2 text-muted-foreground">
+                      {t("Or continue with")}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* Email/Password Form - only show if password login is enabled */}
+          {config?.password_login_enabled !== false && (
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("Email")}</FormLabel>
+                      <FormControl>
+                        <Input placeholder="name@example.com" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("Password")}</FormLabel>
+                      <FormControl>
+                        <Input type="password" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <Button type="submit" className="w-full" disabled={isPending}>
+                  {isPending ? t("Signing in...") : t("Sign in")}
+                </Button>
+              </form>
+            </Form>
+          )}
         </CardContent>
         <CardFooter className="flex justify-center">
           {config?.allow_registration !== false && (
@@ -113,3 +145,4 @@ export default function LoginPage() {
     </div>
   );
 }
+

k-notes-frontend/src/pages/oidc-callback.tsx

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
+import { setAuthToken } from "@/lib/api";
+import { useTranslation } from "react-i18next";
+
+/**
+ * OIDC Callback Handler
+ *
+ * This page handles redirects from the OIDC provider after authentication.
+ *
+ * In Session mode: The backend sets a session cookie during the callback,
+ * so we just need to redirect to the dashboard.
+ *
+ * In JWT mode: The backend redirects here with a token in the URL fragment
+ * or query params, which we need to extract and store.
+ */
+export default function OidcCallbackPage() {
+    const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const queryClient = useQueryClient();
+    const { t } = useTranslation();
+
+    useEffect(() => {
+        // Check for token in URL hash (implicit flow) or query params
+        const hashParams = new URLSearchParams(window.location.hash.slice(1));
+        const accessToken =
+            hashParams.get("access_token") || searchParams.get("access_token");
+
+        if (accessToken) {
+            // JWT mode: store the token
+            setAuthToken(accessToken);
+        }
+
+        // Invalidate user query to refetch with new auth state
+        queryClient.invalidateQueries({ queryKey: ["user"] });
+
+        // Redirect to dashboard
+        navigate("/", { replace: true });
+    }, [navigate, searchParams, queryClient]);
+
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950">
+            <div className="text-center">
+                <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4" />
+                <p className="text-gray-500 dark:text-gray-400">
+                    {t("Completing sign in...")}
+                </p>
+            </div>
+        </div>
+    );
+}

k-notes-frontend/src/pages/register.tsx

@@ -36,10 +36,14 @@ export default function RegisterPage() {
     if (!isConfigLoading && config?.allow_registration === false) {
       toast.error(t("Registration is currently disabled"));
       navigate("/login");
+    } else if (!isConfigLoading && config?.password_login_enabled === false) {
+      // Registration requires password login to be enabled
+      toast.error(t("Registration is not available"));
+      navigate("/login");
     }
   }, [config, isConfigLoading, navigate, t]);
 
-  if (isConfigLoading || config?.allow_registration === false) {
+  if (isConfigLoading || config?.allow_registration === false || config?.password_login_enabled === false) {
     return null; // Or a loading spinner
   }