@lastbrain/module-auth 2.0.27 → 2.0.31

package/src/web/public/ResetPassword.tsx

@@ -1,3 +1,303 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Alert, Button, Card, CardBody, Input, addToast } from "@lastbrain/ui";
+import { Mail, ArrowRight, Lock } from "lucide-react";
+import {
+  useModuleTranslation,
+  useLocalizedRouter,
+  useLanguage,
+  logger,
+  supabaseBrowserClient,
+} from "@lastbrain/core";
+
 export function ResetPassword() {
-  return <div>Reset Password Page</div>;
+  const t = useModuleTranslation("auth");
+  const router = useLocalizedRouter();
+  const { lang } = useLanguage();
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [hasToken, setHasToken] = useState(false);
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [expiredMessage, setExpiredMessage] = useState<string | null>(null);
+
+  // Detect access_token in hash (Supabase recovery link) and set session
+  useEffect(() => {
+    logger.debug("[ResetPassword] checking for tokens in URL hash");
+    const hash = window.location.hash.replace(/^#/, "");
+    if (!hash) return;
+    const hasLangPrefix = /^\/[a-z]{2}(?:\/|$)/.test(window.location.pathname);
+    if (!hasLangPrefix) {
+      const preferredLang = lang || "fr";
+      const pathWithLang = window.location.pathname.startsWith("/")
+        ? window.location.pathname
+        : `/${window.location.pathname}`;
+      const target = `/${preferredLang}${pathWithLang}${
+        window.location.search || ""
+      }${window.location.hash || ""}`;
+      window.location.replace(target);
+      return;
+    }
+
+    const params = new URLSearchParams(hash);
+    const error = params.get("error");
+    const errorDescription = params.get("error_description");
+    if (error) {
+      const message =
+        errorDescription ||
+        t("reset_password.link_expired") ||
+        "Lien invalide ou expiré, demandez un nouveau lien.";
+      setExpiredMessage(message);
+      logger.warn("Reset password link error", {
+        error,
+        description: errorDescription,
+      });
+      console.warn("Reset password magic link error", {
+        error,
+        errorDescription,
+      });
+      addToast({
+        title: t("reset_password.error") || "Erreur",
+        description: message,
+        color: "warning",
+      });
+      window.history.replaceState(
+        {},
+        document.title,
+        window.location.pathname + window.location.search
+      );
+      return;
+    }
+
+    const access_token = params.get("access_token");
+    const refresh_token = params.get("refresh_token");
+
+    if (access_token && refresh_token) {
+      supabaseBrowserClient.auth
+        .setSession({ access_token, refresh_token })
+        .then(async ({ error }) => {
+          if (error) {
+            addToast({
+              title: t("reset_password.error") || "Erreur",
+              description: error.message,
+              color: "danger",
+            });
+            return;
+          }
+
+          try {
+            const setSessionRes = await fetch("/api/public/set-session", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ access_token, refresh_token }),
+            });
+            if (!setSessionRes.ok) {
+              const setSessionBody = await setSessionRes
+                .json()
+                .catch(() => null);
+              logger.info("Failed to persist session cookies", setSessionBody);
+            }
+          } catch (err) {
+            logger.info("set-session call failed", err);
+          }
+
+          setHasToken(true);
+          // Clear hash to avoid leaking tokens
+          window.history.replaceState(
+            {},
+            document.title,
+            window.location.pathname + window.location.search
+          );
+        });
+    }
+  }, [t, lang]);
+
+  const handleRequestLink = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSuccess(null);
+    setLoading(true);
+
+    try {
+      const response = await fetch("/api/public/reset-password", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || "Erreur lors de l'envoi du lien");
+      }
+
+      setSuccess(
+        t("reset_password.success") ||
+          "Vérifiez votre email pour le lien de réinitialisation"
+      );
+    } catch (error: any) {
+      addToast({
+        title: t("reset_password.error") || "Erreur",
+        description:
+          error?.message ||
+          t("reset_password.error") ||
+          "Impossible d'envoyer le lien de réinitialisation",
+        color: "danger",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUpdatePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newPassword.length < 6) {
+      addToast({
+        title: t("reset_password.error") || "Erreur",
+        description:
+          t("signup.password_too_short") || "Mot de passe trop court",
+        color: "warning",
+      });
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      addToast({
+        title: t("reset_password.error") || "Erreur",
+        description:
+          t("signup.password_mismatch") ||
+          "Les mots de passe ne correspondent pas.",
+        color: "warning",
+      });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const { error } = await supabaseBrowserClient.auth.updateUser({
+        password: newPassword,
+      });
+
+      if (error) throw error;
+
+      addToast({
+        title: t("reset_password.success") || "Succès",
+        description:
+          t("profile.security_reset_desc") || "Mot de passe mis à jour",
+        color: "success",
+      });
+
+      setTimeout(() => router.push("/auth/dashboard"), 1200);
+    } catch (err: any) {
+      addToast({
+        title: t("reset_password.error") || "Erreur",
+        description:
+          err?.message || "Impossible de mettre à jour le mot de passe",
+        color: "danger",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-[40vh] flex items-center justify-center px-4 py-16 mt-16 ">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold mb-2">
+            {t("reset_password.title") || "Réinitialiser le mot de passe"}
+          </h1>
+          <p className="text-default-600 dark:text-default-500">
+            {t("reset_password.subtitle") ||
+              "Entrez votre email pour recevoir un lien"}
+          </p>
+        </div>
+
+        <Card className="">
+          <CardBody className="p-6 space-y-6">
+            {expiredMessage && (
+              <Alert
+                color="warning"
+                title={t("reset_password.link_expired_title") || "Lien expiré"}
+                className="text-sm font-semibold"
+              >
+                {expiredMessage}
+              </Alert>
+            )}
+            {hasToken ? (
+              <form onSubmit={handleUpdatePassword} className="space-y-4">
+                <Input
+                  label={t("signup.password") || "Nouveau mot de passe"}
+                  type="password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  startContent={<Lock className="w-4 h-4 text-default-400" />}
+                  isRequired
+                />
+                <Input
+                  label={t("signup.confirm_password") || "Confirmer"}
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  startContent={<Lock className="w-4 h-4 text-default-400" />}
+                  isRequired
+                />
+                <Button
+                  type="submit"
+                  color="primary"
+                  isLoading={loading}
+                  endContent={!loading && <ArrowRight className="w-4 h-4" />}
+                  className="w-full"
+                >
+                  {t("reset_password.submit") ||
+                    "Mettre à jour le mot de passe"}
+                </Button>
+              </form>
+            ) : success ? (
+              <div className="text-center text-success font-semibold">
+                {success}
+              </div>
+            ) : (
+              <form onSubmit={handleRequestLink} className="space-y-6">
+                <Input
+                  label={
+                    t("reset_password.title") || "Réinitialiser le mot de passe"
+                  }
+                  placeholder={
+                    t("reset_password.email_placeholder") || "votre@email.com"
+                  }
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  startContent={<Mail className="w-4 h-4 text-default-400" />}
+                  isRequired
+                />
+
+                <Button
+                  type="submit"
+                  color="primary"
+                  isLoading={loading}
+                  endContent={!loading && <ArrowRight className="w-4 h-4" />}
+                  className="w-full"
+                >
+                  {t("reset_password.submit") || "Envoyer le lien"}
+                </Button>
+
+                <Button
+                  type="button"
+                  variant="flat"
+                  onPress={() => router.push("/signin")}
+                  className="w-full"
+                >
+                  {t("reset_password.back_to_signin") ||
+                    "Retour à la connexion"}
+                </Button>
+              </form>
+            )}
+          </CardBody>
+        </Card>
+      </div>
+    </div>
+  );
 }

package/src/web/public/SignInPage.tsx

@@ -52,6 +52,46 @@ function SignInForm() {
 
       setIsLoading(false);
 
+      // Si le compte est suspendu, afficher un toast et déconnecter l'utilisateur
+      const isSuspended =
+        data?.user?.app_metadata?.suspended ??
+        (data?.user as any)?.raw_app_meta_data?.suspended ??
+        false;
+
+      if (isSuspended) {
+        addToast({
+          color: "danger",
+          title: t("signin.suspended_title") || "Compte suspendu",
+          description:
+            t("signin.suspended_message") ||
+            "Votre compte a été suspendu. Contactez l'administrateur.",
+        });
+        try {
+          await supabaseBrowserClient.auth.signOut();
+        } catch (e) {
+          // ignore
+        }
+        return;
+      }
+
+      // Appeler l'endpoint serveur pour synchroniser le cookie `NEXT_LOCALE`.
+      // L'endpoint mettra à jour le cookie seulement s'il existe côté client
+      // (ex: cookie HttpOnly envoyé avec la requête).
+      // try {
+      //   const res = await fetch("/api/auth/sync-locale", {
+      //     method: "POST",
+      //     credentials: "include",
+      //     headers: { "Content-Type": "application/json" },
+      //     body: JSON.stringify({ userId: data.user?.id }),
+      //   });
+      //   // Wait for body to be consumed so the Set-Cookie is processed by the browser
+      //   if (res && res.body) {
+      //     await res.text().catch(() => null);
+      //   }
+      // } catch (e) {
+      //   console.debug("signin: sync-locale request failed", e);
+      // }
+
       addToast({
         color: "success",
         title: t("signin.success_title") || "Connecté avec succès !",
@@ -69,7 +109,7 @@ function SignInForm() {
   };
 
   return (
-    <div className="relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-primary-50/30 to-secondary-50/30 dark:from-primary-950/50 dark:to-secondary-950/50">
+    <div className="pt-16 relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-primary-50/30 to-secondary-50/30 dark:from-primary-950/50 dark:to-secondary-950/50">
       {/* Background decoration */}
       <div className="absolute inset-0 bg-grid-slate-100 dark:bg-grid-slate-800/20 mask-[linear-gradient(0deg,white,rgba(255,255,255,0.6))] dark:mask-[linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05))]" />
 
@@ -97,7 +137,7 @@ function SignInForm() {
           </div>
 
           {/* Form Card */}
-          <Card className="border border-default-200/60 bg-background/60 backdrop-blur-md backdrop-saturate-150 shadow-xl">
+          <Card className="border border-default-200/60  backdrop-blur-md backdrop-saturate-150 shadow-xl">
             <CardBody className="gap-6 p-8">
               <form onSubmit={handleSubmit} className="flex flex-col gap-6">
                 <Input
@@ -134,7 +174,7 @@ function SignInForm() {
                     }}
                   />
                   <Link
-                    href="/forgot-password"
+                    href="/reset-password"
                     className="text-xs text-default-500 hover:text-primary-500 self-end"
                   >
                     {t("signin.forgot_password") || "Mot de passe oublié ?"}

package/src/web/public/SignUpPage.tsx

@@ -10,7 +10,7 @@ import {
   addToast,
 } from "@lastbrain/ui";
 import { useSearchParams } from "next/navigation";
-import { Suspense, useState } from "react";
+import { SetStateAction, Suspense, useState } from "react";
 import {
   Mail,
   Lock,
@@ -87,6 +87,11 @@ function SignUpForm() {
         setSuccess(
           "Compte créé avec succès ! Veuillez vérifier votre email pour confirmer votre compte."
         );
+        // Reset le formulaire après succès
+        setFullName("");
+        setEmail("");
+        setPassword("");
+        setConfirmPassword("");
         return;
       }
 
@@ -110,7 +115,7 @@ function SignUpForm() {
   };
 
   return (
-    <div className=" relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-secondary-50/30 to-primary-50/30 dark:from-secondary-950/50 dark:to-primary-950/50">
+    <div className="pt-16  relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-secondary-50/30 to-primary-50/30 dark:from-secondary-950/50 dark:to-primary-950/50">
       {/* Background decoration */}
       <div className="absolute inset-0 bg-grid-slate-100 dark:bg-grid-slate-800/20 mask-[linear-gradient(0deg,white,rgba(255,255,255,0.6))] dark:mask-[linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05))]" />
 
@@ -138,7 +143,7 @@ function SignUpForm() {
           </div>
 
           {/* Form Card */}
-          <Card className="border border-default-200/60 bg-background/60 backdrop-blur-md backdrop-saturate-150 shadow-xl">
+          <Card className="border border-default-200/60  backdrop-blur-md backdrop-saturate-150 shadow-xl">
             <CardBody className="gap-6 p-8">
               <form onSubmit={handleSubmit} className="flex flex-col gap-6">
                 <Input
@@ -164,7 +169,9 @@ function SignUpForm() {
                     t("signin.email_placeholder") || "votre@email.com"
                   }
                   value={email}
-                  onChange={(e) => setEmail(e.target.value)}
+                  onChange={(e: {
+                    target: { value: SetStateAction<string> };
+                  }) => setEmail(e.target.value)}
                   required
                   startContent={<Mail className="h-4 w-4 text-default-400" />}
                   classNames={{
@@ -200,7 +207,9 @@ function SignUpForm() {
                   type="password"
                   placeholder="••••••••"
                   value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  onChange={(e: {
+                    target: { value: SetStateAction<string> };
+                  }) => setConfirmPassword(e.target.value)}
                   required
                   minLength={6}
                   startContent={<Lock className="h-4 w-4 text-default-400" />}

package/src/web/public/auth-code-error.tsx

@@ -0,0 +1,49 @@
+/**
+ * Auth error page - shown when email confirmation fails
+ */
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+
+export default function AuthCodeErrorPage() {
+  const searchParams = useSearchParams();
+  const error = searchParams.get("error");
+  const description = searchParams.get("description");
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <div className="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
+        <div className="text-center">
+          <div className="text-red-500 text-4xl mb-4">❌</div>
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            Confirmation Failed
+          </h1>
+          <p className="text-gray-600 mb-4">
+            {description ||
+              "We couldn't confirm your email. The link may have expired."}
+          </p>
+          {error && (
+            <p className="text-sm text-gray-500 bg-gray-100 p-2 rounded mb-6">
+              Error: {error}
+            </p>
+          )}
+          <div className="space-y-3">
+            <Link
+              href="/auth/signin"
+              className="block w-full px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition"
+            >
+              Try signing in
+            </Link>
+            <Link
+              href="/auth/signup"
+              className="block w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
+            >
+              Create new account
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/web/public/confirm.tsx

@@ -0,0 +1,195 @@
+/**
+ * Email confirmation handler
+ * Handles hash-based tokens (direct from email with #access_token=XXX)
+ *
+ * Note: Code-based flow is now handled server-side in /api/auth/callback
+ * This page is only reached for hash-based tokens or as a fallback loading screen
+ */
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { addToast, Card, Spinner } from "@lastbrain/ui";
+import { logger, useLocalizedRouter } from "@lastbrain/core";
+
+export default function ConfirmPage() {
+  const router = useLocalizedRouter();
+  const searchParams = useSearchParams();
+  const [message, setMessage] = useState("Confirming your email...");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [debug, setDebug] = useState<{
+    href?: string | null;
+    hash?: string | null;
+    access_token?: string | null;
+    refresh_token?: string | null;
+    responseStatus?: number | null;
+    responseBody?: any;
+  } | null>(null);
+
+  useEffect(() => {
+    // Éviter les appels multiples
+    if (isProcessing) return;
+
+    const confirmEmail = async () => {
+      setIsProcessing(true);
+      const next = searchParams.get("next") || "/";
+
+      // Check for token in hash (direct from email links that use #access_token)
+      // This handles the legacy hash-based flow from Supabase
+      if (typeof window !== "undefined") {
+        const hash = window.location.hash;
+
+        if (hash && hash.length > 1) {
+          const params = new URLSearchParams(hash.substring(1));
+          const accessToken = params.get("access_token");
+          const refreshToken = params.get("refresh_token");
+
+          if (accessToken && refreshToken) {
+            try {
+              setMessage("Setting up your session...");
+
+              // Debug: capture full href & hash and tokens for troubleshooting
+              setDebug({
+                href: window.location.href,
+                hash,
+                access_token: accessToken,
+                refresh_token: refreshToken,
+              });
+
+              // Sync tokens to server-side cookies
+              console.debug(
+                "[ConfirmPage] Posting tokens to /api/public/set-session",
+                {
+                  accessToken: String(accessToken).slice(0, 8) + "...",
+                  refreshToken: String(refreshToken).slice(0, 8) + "...",
+                }
+              );
+              const response = await fetch("/api/public/set-session", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                  access_token: accessToken,
+                  refresh_token: refreshToken,
+                }),
+              });
+              const respBody = await response.json().catch(() => null);
+              console.debug("[ConfirmPage] /api/public/set-session response", {
+                ok: response.ok,
+                status: response.status,
+                body: respBody,
+              });
+
+              // Update debug panel with response
+              setDebug((d) => ({
+                ...(d || {}),
+                responseStatus: response.status,
+                responseBody: respBody,
+              }));
+
+              logger.debug("[ConfirmPage] start", {
+                url:
+                  typeof window !== "undefined" ? window.location.href : null,
+                searchParams: String(searchParams),
+                next,
+              });
+              if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || "Failed to set session");
+              }
+
+              // Add welcome bonus asynchronously (don't block redirect)
+              try {
+                const res = await fetch("/api/public/add-welcome-bonus", {
+                  method: "POST",
+                  headers: { "Content-Type": "application/json" },
+                });
+                if (!res.ok) {
+                  const err = await res.json().catch(() => ({}));
+                  logger.warn("add-welcome-bonus failed:", err);
+                } else {
+                  logger.debug("add-welcome-bonus succeeded for user");
+                }
+              } catch (bonusError) {
+                logger.warn("Failed to add welcome bonus:", bonusError);
+                // Don't block the redirect if bonus fails
+              }
+
+              addToast({
+                title: "Email confirmed!",
+                description: "Your email has been verified successfully.",
+                color: "success",
+              });
+
+              // Redirect to destination
+              // Use hard reload to ensure cookies are applied
+              setMessage("Redirecting...");
+              setTimeout(() => {
+                window.location.href = next;
+              }, 500);
+              return;
+            } catch (err) {
+              logger.error("❌ Error setting session:", err);
+              addToast({
+                title: "Email confirmation failed",
+                description:
+                  err instanceof Error
+                    ? err.message
+                    : "Could not create session",
+                color: "danger",
+              });
+              router.push("/auth-code-error");
+              return;
+            }
+          }
+        }
+      }
+
+      // If we reach here, either:
+      // 1. Code was already handled by callback (just show loading and redirect)
+      // 2. No valid token/code found (redirect to error)
+
+      const code = searchParams.get("code");
+
+      if (code) {
+        // Code should have been handled by callback, but we're here
+        // This means callback already set cookies and redirected us here as fallback
+        // Just redirect to next
+        setMessage("Completing sign-in...");
+        setTimeout(() => {
+          window.location.href = next;
+        }, 500);
+        return;
+      }
+
+      // No code or token found - assume the user was redirected here after
+      // a verification step (Supabase verify) which does not provide a code.
+      // Consider this a successful confirmation and redirect to `next`.
+      logger.debug(
+        "No confirmation code or token found - assuming success and redirecting"
+      );
+      addToast({
+        title: "Email confirmé",
+        description: "Votre email a été vérifié.",
+        color: "success",
+      });
+      setMessage("Redirecting...");
+      setTimeout(() => {
+        window.location.href = next;
+      }, 500);
+    };
+
+    confirmEmail();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  // On ne met pas searchParams/router dans les deps pour éviter les boucles
+
+  return (
+    <div className="flex items-center justify-center min-h-screen ">
+      <Card className="w-full max-w-md">
+        <div className="text-center py-8">
+          <Spinner size="lg" className="mx-auto" />
+          <p className="mt-4 text-gray-600">{message}</p>
+        </div>
+      </Card>
+    </div>
+  );
+}