@checkstack/auth-frontend 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @checkstack/auth-frontend
 
+## 0.4.0
+
+### Minor Changes
+
+- df6ac7b: Added onboarding flow and user profile
+
+### Patch Changes
+
+- Updated dependencies [df6ac7b]
+  - @checkstack/auth-common@0.4.0
+
 ## 0.3.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/auth-frontend",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "main": "src/index.tsx",
   "exports": {

package/src/components/OnboardingCheck.tsx

@@ -0,0 +1,33 @@
+import { AuthApi } from "@checkstack/auth-common";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+/**
+ * Onboarding guard that redirects to onboarding page if no users exist.
+ * Skips check if already on onboarding page.
+ */
+export function OnboardingCheck() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const authApi = usePluginClient(AuthApi);
+
+  const { data, isLoading } = authApi.getOnboardingStatus.useQuery();
+
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    // Skip check if already on onboarding page
+    if (location.pathname === "/auth/onboarding") {
+      return;
+    }
+
+    if (data?.needsOnboarding) {
+      navigate("/auth/onboarding", { replace: true });
+    }
+  }, [isLoading, data, location.pathname, navigate]);
+
+  return <></>;
+}

package/src/components/OnboardingPage.tsx

@@ -0,0 +1,291 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { User, Lock, Mail, CheckCircle, AlertCircle } from "lucide-react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { AuthApi, authRoutes, passwordSchema } from "@checkstack/auth-common";
+import { resolveRoute } from "@checkstack/common";
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+} from "@checkstack/ui";
+import { useAuthClient } from "../lib/auth-client";
+
+export const OnboardingPage = () => {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const [success, setSuccess] = useState(false);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+
+  const authClient = usePluginClient(AuthApi);
+  const completeOnboardingMutation =
+    authClient.completeOnboarding.useMutation();
+  const betterAuthClient = useAuthClient();
+
+  // Check if onboarding is needed
+  const { data: onboardingStatus, isLoading: checkingStatus } =
+    authClient.getOnboardingStatus.useQuery({});
+
+  // Redirect if onboarding not needed
+  useEffect(() => {
+    if (
+      !checkingStatus &&
+      onboardingStatus &&
+      !onboardingStatus.needsOnboarding
+    ) {
+      navigate(resolveRoute(authRoutes.routes.login));
+    }
+  }, [checkingStatus, onboardingStatus, navigate]);
+
+  // Validate password on change
+  useEffect(() => {
+    if (password) {
+      const result = passwordSchema.safeParse(password);
+      if (result.success) {
+        setValidationErrors([]);
+      } else {
+        setValidationErrors(result.error.issues.map((issue) => issue.message));
+      }
+    } else {
+      setValidationErrors([]);
+    }
+  }, [password]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(undefined);
+
+    // Validate password match
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    // Validate password strength
+    const result = passwordSchema.safeParse(password);
+    if (!result.success) {
+      setError(result.error.issues[0].message);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await completeOnboardingMutation.mutateAsync({
+        name,
+        email,
+        password,
+      });
+
+      if (response.success) {
+        // Auto-login the user
+        const loginRes = await betterAuthClient.signIn.email({
+          email,
+          password,
+        });
+
+        if (loginRes.error) {
+          setError("Account created but login failed. Please login manually.");
+        } else {
+          setSuccess(true);
+          // Redirect to dashboard
+          setTimeout(() => {
+            globalThis.location.href = "/";
+          }, 1500);
+        }
+      }
+    } catch (error_) {
+      const message =
+        error_ instanceof Error ? error_.message : "Failed to complete setup";
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Loading state
+  if (checkingStatus) {
+    return (
+      <div className="min-h-[80vh] flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardContent className="pt-6">
+            <div className="space-y-4">
+              <div className="h-4 bg-muted animate-pulse rounded" />
+              <div className="h-10 bg-muted animate-pulse rounded" />
+              <div className="h-10 bg-muted animate-pulse rounded" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Success state
+  if (success) {
+    return (
+      <div className="min-h-[80vh] flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardHeader className="space-y-1 text-center">
+            <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
+              <CheckCircle className="h-6 w-6 text-primary" />
+            </div>
+            <CardTitle className="text-2xl font-bold">
+              Setup Complete!
+            </CardTitle>
+            <CardDescription>
+              Your admin account has been created. Redirecting to dashboard...
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <CardTitle className="text-2xl font-bold">
+            Welcome to Checkstack
+          </CardTitle>
+          <CardDescription>
+            Create your administrator account to get started
+          </CardDescription>
+        </CardHeader>
+        <form onSubmit={handleSubmit}>
+          <CardContent className="space-y-4">
+            {error && (
+              <Alert variant="error">
+                <AlertIcon>
+                  <AlertCircle className="h-4 w-4" />
+                </AlertIcon>
+                <AlertContent>
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </AlertContent>
+              </Alert>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <div className="relative">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="name"
+                  type="text"
+                  placeholder="Your name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="pl-10"
+                  required
+                  autoFocus
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="admin@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="pl-10"
+                  required
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="Create a strong password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                />
+              </div>
+              {validationErrors.length > 0 && (
+                <ul className="text-sm text-muted-foreground list-disc pl-5 space-y-1">
+                  {validationErrors.map((validationError, i) => (
+                    <li key={i} className="text-destructive">
+                      {validationError}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">Confirm Password</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  placeholder="Confirm your password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                />
+              </div>
+              {confirmPassword && password !== confirmPassword && (
+                <p className="text-sm text-destructive">
+                  Passwords do not match
+                </p>
+              )}
+            </div>
+
+            <div className="text-xs text-muted-foreground">
+              Password must be at least 8 characters and contain:
+              <ul className="list-disc pl-5 mt-1">
+                <li>At least one uppercase letter</li>
+                <li>At least one lowercase letter</li>
+                <li>At least one number</li>
+              </ul>
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={
+                loading ||
+                validationErrors.length > 0 ||
+                password !== confirmPassword ||
+                !name ||
+                !email
+              }
+            >
+              {loading ? "Creating Account..." : "Complete Setup"}
+            </Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+};

package/src/components/ProfilePage.tsx

@@ -0,0 +1,223 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import {
+  User,
+  Mail,
+  Key,
+  ArrowLeft,
+  CheckCircle,
+  AlertCircle,
+} from "lucide-react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { AuthApi, authRoutes } from "@checkstack/auth-common";
+import { resolveRoute } from "@checkstack/common";
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+} from "@checkstack/ui";
+
+export const ProfilePage = () => {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [originalName, setOriginalName] = useState("");
+  const [originalEmail, setOriginalEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const [success, setSuccess] = useState(false);
+  const [hasCredentialAccount, setHasCredentialAccount] = useState(false);
+
+  const authClient = usePluginClient(AuthApi);
+
+  // Fetch current user profile
+  const { data: profile, isLoading: loadingProfile } =
+    authClient.getCurrentUserProfile.useQuery({});
+
+  // Update mutation
+  const updateMutation = authClient.updateCurrentUser.useMutation({
+    onSuccess: () => {
+      setSuccess(true);
+      setOriginalName(name);
+      setOriginalEmail(email);
+      setTimeout(() => setSuccess(false), 3000);
+    },
+    onError: (err) => {
+      setError(err.message);
+    },
+  });
+
+  // Populate form when profile loads
+  useEffect(() => {
+    if (profile) {
+      setName(profile.name);
+      setEmail(profile.email);
+      setOriginalName(profile.name);
+      setOriginalEmail(profile.email);
+      setHasCredentialAccount(profile.hasCredentialAccount);
+    }
+  }, [profile]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(undefined);
+    setLoading(true);
+
+    try {
+      const updates: { name?: string; email?: string } = {};
+      if (name !== originalName) updates.name = name;
+      if (email !== originalEmail && hasCredentialAccount)
+        updates.email = email;
+
+      // Only call if there are changes
+      if (Object.keys(updates).length > 0) {
+        await updateMutation.mutateAsync(updates);
+      } else {
+        setSuccess(true);
+        setTimeout(() => setSuccess(false), 3000);
+      }
+    } catch {
+      // Error handled by mutation
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const hasChanges =
+    name !== originalName || (hasCredentialAccount && email !== originalEmail);
+
+  // Loading state
+  if (loadingProfile) {
+    return (
+      <div className="min-h-[80vh] flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardContent className="pt-6">
+            <div className="space-y-4">
+              <div className="h-4 bg-muted animate-pulse rounded" />
+              <div className="h-10 bg-muted animate-pulse rounded" />
+              <div className="h-10 bg-muted animate-pulse rounded" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold">Profile</CardTitle>
+          <CardDescription>Manage your account settings</CardDescription>
+        </CardHeader>
+        <form onSubmit={handleSubmit}>
+          <CardContent className="space-y-4">
+            {error && (
+              <Alert variant="error">
+                <AlertIcon>
+                  <AlertCircle className="h-4 w-4" />
+                </AlertIcon>
+                <AlertContent>
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </AlertContent>
+              </Alert>
+            )}
+
+            {success && (
+              <Alert variant="success">
+                <AlertIcon>
+                  <CheckCircle className="h-4 w-4" />
+                </AlertIcon>
+                <AlertContent>
+                  <AlertTitle>Success</AlertTitle>
+                  <AlertDescription>
+                    Profile updated successfully
+                  </AlertDescription>
+                </AlertContent>
+              </Alert>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <div className="relative">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="name"
+                  type="text"
+                  placeholder="Your name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="pl-10"
+                  required
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="your@email.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="pl-10"
+                  disabled={!hasCredentialAccount}
+                  required
+                />
+              </div>
+              {!hasCredentialAccount && (
+                <p className="text-xs text-muted-foreground">
+                  Email is managed by your social login provider
+                </p>
+              )}
+            </div>
+
+            {hasCredentialAccount && (
+              <div className="pt-2">
+                <Link
+                  to={resolveRoute(authRoutes.routes.changePassword)}
+                  className="inline-flex items-center gap-2 text-sm text-primary hover:underline"
+                >
+                  <Key className="h-4 w-4" />
+                  Change Password
+                </Link>
+              </div>
+            )}
+          </CardContent>
+          <CardFooter className="flex flex-col gap-4">
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={loading || !hasChanges}
+            >
+              {loading ? "Saving..." : "Save Changes"}
+            </Button>
+            <button
+              type="button"
+              onClick={() => navigate(-1)}
+              className="text-sm text-primary hover:underline flex items-center justify-center gap-1"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Go Back
+            </button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+};

package/src/index.tsx

@@ -8,6 +8,7 @@ import {
   NavbarRightSlot,
   UserMenuItemsSlot,
   UserMenuItemsBottomSlot,
+  NavbarLeftSlot,
 } from "@checkstack/frontend-api";
 import {
   LoginPage,
@@ -19,6 +20,8 @@ import { AuthErrorPage } from "./components/AuthErrorPage";
 import { ForgotPasswordPage } from "./components/ForgotPasswordPage";
 import { ResetPasswordPage } from "./components/ResetPasswordPage";
 import { ChangePasswordPage } from "./components/ChangePasswordPage";
+import { OnboardingPage } from "./components/OnboardingPage";
+import { ProfilePage } from "./components/ProfilePage";
 import { authApiRef, AuthApi, AuthSession } from "./api";
 import { getAuthClientLazy } from "./lib/auth-client";
 
@@ -26,7 +29,7 @@ import { useAccessRules } from "./hooks/useAccessRules";
 
 import type { AccessRule } from "@checkstack/common";
 import { useNavigate } from "react-router-dom";
-import { Settings2, Key } from "lucide-react";
+import { Settings2, User } from "lucide-react";
 import { DropdownMenuItem } from "@checkstack/ui";
 import { UserMenuItemsContext } from "@checkstack/frontend-api";
 import { AuthSettingsPage } from "./components/AuthSettingsPage";
@@ -36,6 +39,7 @@ import {
   pluginMetadata,
 } from "@checkstack/auth-common";
 import { resolveRoute } from "@checkstack/common";
+import { OnboardingCheck } from "./components/OnboardingCheck";
 
 /**
  * Unified access API implementation.
@@ -108,7 +112,7 @@ class BetterAuthApi implements AuthApi {
       provider,
       callbackURL: frontendUrl,
       errorCallbackURL: `${frontendUrl}${resolveRoute(
-        authRoutes.routes.error
+        authRoutes.routes.error,
       )}`,
     });
   }
@@ -194,6 +198,14 @@ export const authPlugin = createFrontendPlugin({
       route: authRoutes.routes.changePassword,
       element: <ChangePasswordPage />,
     },
+    {
+      route: authRoutes.routes.profile,
+      element: <ProfilePage />,
+    },
+    {
+      route: authRoutes.routes.onboarding,
+      element: <OnboardingPage />,
+    },
   ],
   extensions: [
     {
@@ -222,22 +234,16 @@ export const authPlugin = createFrontendPlugin({
       },
     }),
     createSlotExtension(UserMenuItemsSlot, {
-      id: "auth.user-menu.change-password",
-      component: ({ hasCredentialAccount }: UserMenuItemsContext) => {
+      id: "auth.user-menu.profile",
+      component: () => {
         const navigate = useNavigate();
 
-        // Only show for credential-authenticated users
-        // The changePassword API requires current password, so only credential users can use it
-        if (!hasCredentialAccount) return <React.Fragment />;
-
         return (
           <DropdownMenuItem
-            onClick={() =>
-              navigate(resolveRoute(authRoutes.routes.changePassword))
-            }
-            icon={<Key className="h-4 w-4" />}
+            onClick={() => navigate(resolveRoute(authRoutes.routes.profile))}
+            icon={<User className="h-4 w-4" />}
           >
-            Change Password
+            Profile
           </DropdownMenuItem>
         );
       },
@@ -246,5 +252,9 @@ export const authPlugin = createFrontendPlugin({
       id: "auth.user-menu.logout",
       component: LogoutMenuItem,
     }),
+    createSlotExtension(NavbarLeftSlot, {
+      id: "auth.onboarding-guard",
+      component: OnboardingCheck,
+    }),
   ],
 });