📧 feat: email verification (#2344)

* feat: verification email * chore: email verification invalid; localize: update * fix: redirect to login when signup: fix: save emailVerified correctly * docs: update ALLOW_UNVERIFIED_EMAIL_LOGIN; fix: don't accept login only when ALLOW_UNVERIFIED_EMAIL_LOGIN = true * fix: user needs to be authenticated * style: update * fix: registration success message and redirect logic * refactor: use `isEnabled` in ALLOW_UNVERIFIED_EMAIL_LOGIN * refactor: move checkEmailConfig to server/utils * refactor: use req as param for verifyEmail function * chore: jsdoc * chore: remove console log * refactor: rename `createNewUser` to `createSocialUser` * refactor: update typing and add expiresAt field to userSchema * refactor: begin use of user methods over direct model access for User * refactor: initial email verification rewrite * chore: typing * refactor: registration flow rewrite * chore: remove help center text * refactor: update getUser to getUserById and add findUser methods. general fixes from recent changes * refactor: Update updateUser method to remove expiresAt field and use $set and $unset operations, createUser now returns Id only * refactor: Update openidStrategy to use optional chaining for avatar check, move saveBuffer init to buffer condition * refactor: logout on deleteUser mutatation * refactor: Update openidStrategy login success message format * refactor: Add emailVerified field to Discord and Facebook profile details * refactor: move limiters to separate middleware dir * refactor: Add limiters for email verification and password reset * refactor: Remove getUserController and update routes and controllers accordingly * refactor: Update getUserById method to exclude password and version fields * refactor: move verification to user route, add resend verification option * refactor: Improve email verification process and resend option * refactor: remove more direct model access of User and remove unused code * refactor: replace user authentication methods and token generation * fix: add user.id to jwt user * refactor: Update AuthContext to include setError function, add resend link to Login Form, make registration redirect shorter * fix(updateUserPluginsService): ensure userPlugins variable is defined * refactor: Delete all shared links for a specific user * fix: remove use of direct User.save() in handleExistingUser * fix(importLibreChatConvo): handle missing createdAt field in messages --------- Co-authored-by: Danny Avila <danny@librechat.ai>
2026-01-06 18:48:50 +01:00 · 2024-06-07 21:06:47 +02:00 · 2024-06-07 21:06:47 +02:00 · ee673d682e
commit ee673d682e
parent b7fef6958b
67 changed files with 1863 additions and 1117 deletions
--- a/client/src/components/Auth/VerifyEmail.tsx
+++ b/client/src/components/Auth/VerifyEmail.tsx
@ -0,0 +1,134 @@
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useVerifyEmailMutation, useResendVerificationEmail } from '~/data-provider';
+import { ThemeSelector } from '~/components/ui';
+import { Spinner } from '~/components/svg';
+import { useLocalize } from '~/hooks';
+
+function RequestPasswordReset() {
+  const navigate = useNavigate();
+  const localize = useLocalize();
+  const [params] = useSearchParams();
+
+  const [countdown, setCountdown] = useState<number>(3);
+  const [headerText, setHeaderText] = useState<string>('');
+  const [showResendLink, setShowResendLink] = useState<boolean>(false);
+  const [verificationStatus, setVerificationStatus] = useState<boolean>(false);
+
+  const token = useMemo(() => params.get('token') || '', [params]);
+  const email = useMemo(() => params.get('email') || '', [params]);
+
+  const countdownRedirect = useCallback(() => {
+    setCountdown(3);
+    const timer = setInterval(() => {
+      setCountdown((prevCountdown) => {
+        if (prevCountdown <= 1) {
+          clearInterval(timer);
+          navigate('/c/new', { replace: true });
+          return 0;
+        } else {
+          return prevCountdown - 1;
+        }
+      });
+    }, 1000);
+  }, [navigate]);
+
+  const verifyEmailMutation = useVerifyEmailMutation({
+    onSuccess: () => {
+      setHeaderText(localize('com_auth_email_verification_success') + ' 🎉');
+      setVerificationStatus(true);
+      countdownRedirect();
+    },
+    onError: () => {
+      setShowResendLink(true);
+      setVerificationStatus(true);
+      setHeaderText(localize('com_auth_email_verification_failed') + ' 😢');
+      setCountdown(0);
+    },
+  });
+
+  const resendEmailMutation = useResendVerificationEmail({
+    onSuccess: () => {
+      setHeaderText(localize('com_auth_email_resent_success') + ' 📧');
+      countdownRedirect();
+    },
+    onError: () => {
+      setHeaderText(localize('com_auth_email_resent_failed') + ' 😢');
+      countdownRedirect();
+    },
+    onMutate: () => setShowResendLink(false),
+  });
+
+  const handleResendEmail = () => {
+    resendEmailMutation.mutate({ email });
+  };
+
+  useEffect(() => {
+    if (verifyEmailMutation.isLoading || verificationStatus) {
+      return;
+    }
+
+    if (token && email) {
+      verifyEmailMutation.mutate({
+        email,
+        token,
+      });
+      return;
+    } else if (email) {
+      setHeaderText(localize('com_auth_email_verification_failed_token_missing') + ' 😢');
+    } else {
+      setHeaderText(localize('com_auth_email_verification_invalid') + ' 🤨');
+    }
+
+    setShowResendLink(true);
+    setVerificationStatus(true);
+    setCountdown(0);
+  }, [localize, token, email, verificationStatus, verifyEmailMutation]);
+
+  const VerificationSuccess = () => (
+    <div className="flex flex-col items-center justify-center">
+      <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
+        {headerText}
+      </h1>
+      {countdown > 0 && (
+        <p className="text-center text-lg text-gray-600 dark:text-gray-400">
+          {localize('com_auth_email_verification_redirecting', countdown.toString())}
+        </p>
+      )}
+      {showResendLink && countdown === 0 && (
+        <p className="text-center text-lg text-gray-600 dark:text-gray-400">
+          {localize('com_auth_email_verification_resend_prompt')}
+          <button
+            className="ml-2 text-blue-600 hover:underline"
+            onClick={handleResendEmail}
+            disabled={resendEmailMutation.isLoading}
+          >
+            {localize('com_auth_email_resend_link')}
+          </button>
+        </p>
+      )}
+    </div>
+  );
+
+  const VerificationInProgress = () => (
+    <div className="flex flex-col items-center justify-center">
+      <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
+        {localize('com_auth_email_verification_in_progress')}
+      </h1>
+      <div className="mt-4 flex justify-center">
+        <Spinner className="h-8 w-8 text-green-500" />
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+      <div className="absolute bottom-0 left-0 m-4">
+        <ThemeSelector />
+      </div>
+      {verificationStatus ? <VerificationSuccess /> : <VerificationInProgress />}
+    </div>
+  );
+}
+
+export default RequestPasswordReset;