@lobehub/lobehub 2.0.0-next.124 → 2.0.0-next.126

package/src/app/[variants]/(auth)/signup/[[...signup]]/BetterAuthSignUpForm.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { Button } from '@lobehub/ui';
+import { LobeHub } from '@lobehub/ui/brand';
+import { Form, Input } from 'antd';
+import { createStyles } from 'antd-style';
+import { ChevronRight, Lock, Mail } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { message } from '@/components/AntdStaticMethods';
+import { authEnv } from '@/envs/auth';
+import { signUp } from '@/libs/better-auth/auth-client';
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    padding-block: 2.5rem;
+    padding-inline: 2rem;
+  `,
+  container: css`
+    width: 360px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  footer: css`
+    padding: 1rem;
+    border-block-start: 1px solid ${token.colorBorder};
+
+    font-size: 14px;
+    color: ${token.colorTextDescription};
+    text-align: center;
+
+    background: ${token.colorBgElevated};
+  `,
+  subtitle: css`
+    margin-block-start: 0.5rem;
+    font-size: 14px;
+    color: ${token.colorTextSecondary};
+    text-align: center;
+  `,
+  title: css`
+    margin-block-start: 1rem;
+
+    font-size: 24px;
+    font-weight: 600;
+    color: ${token.colorTextHeading};
+    text-align: center;
+  `,
+}));
+
+interface SignUpFormValues {
+  email: string;
+  password: string;
+}
+
+export default function BetterAuthSignUpForm() {
+  const { styles } = useStyles();
+  const { t } = useTranslation('auth');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  // Pre-fill email from query params (from signin page redirect)
+  useEffect(() => {
+    const email = searchParams.get('email');
+    if (email) {
+      form.setFieldsValue({ email });
+    }
+  }, [searchParams, form]);
+
+  const handleSignUp = async (values: SignUpFormValues) => {
+    setLoading(true);
+    try {
+      const callbackUrl = searchParams.get('callbackUrl') || '/';
+
+      // Generate username from email (use the part before @)
+      const username = values.email.split('@')[0];
+
+      const { error } = await signUp.email({
+        callbackURL: callbackUrl,
+        email: values.email,
+        name: username,
+        password: values.password,
+      });
+
+      if (error) {
+        message.error(error.message || t('betterAuth.signup.error'));
+        return;
+      }
+
+      // Redirect based on email verification requirement
+      if (authEnv.NEXT_PUBLIC_AUTH_EMAIL_VERIFICATION) {
+        // Email verification required, redirect to verification notice page
+        // callbackURL is already passed to signUp.email for verification link
+        router.push(
+          `/verify-email?email=${encodeURIComponent(values.email)}&callbackUrl=${encodeURIComponent(callbackUrl)}`,
+        );
+      } else {
+        // Email verification not required, user is already logged in (autoSignIn: true)
+        // Redirect to callback URL or home
+        router.push(callbackUrl);
+      }
+    } catch {
+      message.error(t('betterAuth.signup.error'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Flexbox align="center" justify="center" style={{ minHeight: '100vh' }}>
+      <div className={styles.container}>
+        <div className={styles.card}>
+          <Flexbox align="center" gap={8} justify="center">
+            <LobeHub size={48} />
+          </Flexbox>
+
+          <h1 className={styles.title}>{t('betterAuth.signup.title')}</h1>
+          <p className={styles.subtitle}>{t('betterAuth.signup.subtitle')}</p>
+
+          <Form form={form} layout="vertical" onFinish={handleSignUp} style={{ marginTop: '2rem' }}>
+            <Form.Item
+              name="email"
+              rules={[
+                { message: t('betterAuth.errors.emailRequired'), required: true },
+                { message: t('betterAuth.errors.emailInvalid'), type: 'email' },
+              ]}
+            >
+              <Input
+                placeholder={t('betterAuth.signup.emailPlaceholder')}
+                prefix={<Mail size={16} />}
+                size="large"
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="password"
+              rules={[
+                { message: t('betterAuth.errors.passwordRequired'), required: true },
+                { message: t('betterAuth.errors.passwordMinLength'), min: 8 },
+                { max: 64, message: t('betterAuth.errors.passwordMaxLength') },
+                {
+                  message: t('betterAuth.errors.passwordFormat'),
+                  validator: (_, value) => {
+                    if (!value) return Promise.resolve();
+                    const hasLetter = /[A-Za-z]/.test(value);
+                    const hasNumber = /\d/.test(value);
+                    if (hasLetter && hasNumber) {
+                      return Promise.resolve();
+                    }
+                    return Promise.reject();
+                  },
+                },
+              ]}
+            >
+              <Input.Password
+                placeholder={t('betterAuth.signup.passwordPlaceholder')}
+                prefix={<Lock size={16} />}
+                size="large"
+              />
+            </Form.Item>
+
+            <Form.Item>
+              <Button
+                block
+                htmlType="submit"
+                icon={<ChevronRight size={16} />}
+                iconPosition="end"
+                loading={loading}
+                size="large"
+                type="primary"
+              >
+                {t('betterAuth.signup.submit')}
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
+
+        <div className={styles.footer}>
+          {t('betterAuth.signup.hasAccount')}{' '}
+          <Link href={`/signin?${searchParams.toString()}`}>
+            {t('betterAuth.signup.signinLink')}
+          </Link>
+        </div>
+      </div>
+    </Flexbox>
+  );
+}

package/src/app/[variants]/(auth)/signup/[[...signup]]/page.tsx

@@ -1,26 +1,51 @@
 import { SignUp } from '@clerk/nextjs';
 import { notFound } from 'next/navigation';
 
-import { enableClerk } from '@/const/auth';
+import { enableBetterAuth, enableClerk } from '@/const/auth';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 import { DynamicLayoutProps } from '@/types/next';
 import { RouteVariants } from '@/utils/server/routeVariants';
 
+import BetterAuthSignUpForm from './BetterAuthSignUpForm';
+
 export const generateMetadata = async (props: DynamicLayoutProps) => {
   const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('clerk', locale);
+
+  if (enableClerk) {
+    const { t } = await translation('clerk', locale);
+    return metadataModule.generate({
+      description: t('signUp.start.subtitle'),
+      title: t('signUp.start.title'),
+      url: '/signup',
+    });
+  }
+
+  if (enableBetterAuth) {
+    const { t } = await translation('auth', locale);
+    return metadataModule.generate({
+      description: t('betterAuth.signup.subtitle'),
+      title: t('betterAuth.signup.title'),
+      url: '/signup',
+    });
+  }
+
   return metadataModule.generate({
-    description: t('signUp.start.subtitle'),
-    title: t('signUp.start.title'),
+    title: 'Sign Up',
     url: '/signup',
   });
 };
 
 const Page = () => {
-  if (!enableClerk) return notFound();
+  if (enableClerk) {
+    return <SignUp path="/signup" />;
+  }
+
+  if (enableBetterAuth) {
+    return <BetterAuthSignUpForm />;
+  }
 
-  return <SignUp path="/signup" />;
+  return notFound();
 };
 
 Page.displayName = 'SignUp';

package/src/app/[variants]/(auth)/verify-email/layout.tsx

@@ -0,0 +1,12 @@
+import { notFound } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import { enableBetterAuth } from '@/const/auth';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  if (!enableBetterAuth) return notFound();
+
+  return children;
+};
+
+export default Layout;

package/src/app/[variants]/(auth)/verify-email/page.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { Button } from '@lobehub/ui';
+import { LobeHub } from '@lobehub/ui/brand';
+import { createStyles, useTheme } from 'antd-style';
+import { ArrowLeft, Mail, RefreshCw } from 'lucide-react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { message } from '@/components/AntdStaticMethods';
+import { sendVerificationEmail } from '@/libs/better-auth/auth-client';
+
+const useStyles = createStyles(({ css, token }) => ({
+  backLink: css`
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+
+    font-size: 14px;
+    color: ${token.colorTextSecondary};
+    text-decoration: none;
+
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: ${token.colorText};
+    }
+  `,
+  container: css`
+    max-width: 480px;
+    padding: 2rem;
+    text-align: center;
+  `,
+  description: css`
+    font-size: 16px;
+    line-height: 1.6;
+    color: ${token.colorText};
+  `,
+  hint: css`
+    margin-block-start: 0.5rem;
+    font-size: 14px;
+    color: ${token.colorTextTertiary};
+  `,
+  iconWrapper: css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+
+    background: linear-gradient(
+      135deg,
+      ${token.colorPrimaryBg} 0%,
+      ${token.colorPrimaryBgHover} 100%
+    );
+  `,
+  mailLink: css`
+    font-weight: 500;
+    color: ${token.colorPrimary};
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+  resendButton: css`
+    margin-block-start: 0.5rem;
+  `,
+  textGroup: css`
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  `,
+  title: css`
+    margin-block: 0;
+    font-size: 28px;
+    font-weight: 600;
+    color: ${token.colorTextHeading};
+  `,
+}));
+
+export default function VerifyEmailPage() {
+  const { styles } = useStyles();
+  const theme = useTheme();
+  const { t } = useTranslation('auth');
+  const searchParams = useSearchParams();
+  const email = searchParams.get('email');
+  const [resending, setResending] = useState(false);
+
+  const handleResendEmail = async () => {
+    if (!email) {
+      message.error(t('betterAuth.verifyEmail.resend.noEmail'));
+      return;
+    }
+
+    setResending(true);
+    try {
+      const callbackUrl = searchParams.get('callbackUrl') || '/';
+
+      const result = await sendVerificationEmail({
+        callbackURL: callbackUrl,
+        email,
+      });
+
+      if (result.error) {
+        message.error(result.error.message || t('betterAuth.verifyEmail.resend.error'));
+        return;
+      }
+
+      message.success(t('betterAuth.verifyEmail.resend.success'));
+    } catch (error) {
+      console.error('Error resending verification email:', error);
+      message.error(t('betterAuth.verifyEmail.resend.error'));
+    } finally {
+      setResending(false);
+    }
+  };
+
+  return (
+    <Center style={{ minHeight: '100vh' }}>
+      <Flexbox align="center" className={styles.container} gap={24}>
+        <LobeHub size={56} />
+
+        <h1 className={styles.title}>{t('betterAuth.verifyEmail.title')}</h1>
+
+        <div className={styles.iconWrapper}>
+          <Mail color={theme.colorPrimary} size={40} strokeWidth={1.5} />
+        </div>
+
+        <div className={styles.textGroup}>
+          <p className={styles.description}>
+            {t('betterAuth.verifyEmail.descriptionPrefix')}{' '}
+            <a className={styles.mailLink} href={`mailto:${email}`}>
+              {email}
+            </a>{' '}
+            {t('betterAuth.verifyEmail.descriptionSuffix')}
+          </p>
+          <p className={styles.hint}>{t('betterAuth.verifyEmail.checkSpam')}</p>
+        </div>
+
+        <Button
+          className={styles.resendButton}
+          icon={<RefreshCw size={16} />}
+          loading={resending}
+          onClick={handleResendEmail}
+          size="middle"
+          type="default"
+        >
+          {t('betterAuth.verifyEmail.resend.button')}
+        </Button>
+
+        <Link className={styles.backLink} href="/signin">
+          <ArrowLeft size={16} />
+          {t('betterAuth.verifyEmail.backToSignIn')}
+        </Link>
+      </Flexbox>
+    </Center>
+  );
+}

package/src/app/[variants]/(main)/(mobile)/me/(home)/__tests__/UserBanner.test.tsx

@@ -31,22 +31,24 @@ vi.mock('@/const/version', () => ({
   isDesktop: false,
 }));
 
-// 定义一个变量来存储 enableAuth 的值
-let enableAuth = true;
-let enableClerk = false;
+// Use vi.hoisted to ensure variables exist before vi.mock factory executes
+const { enableAuth, enableClerk } = vi.hoisted(() => ({
+  enableAuth: { value: true },
+  enableClerk: { value: false },
+}));
 
-// 模拟 @/const/auth 模块
 vi.mock('@/const/auth', () => ({
   get enableAuth() {
-    return enableAuth;
+    return enableAuth.value;
   },
   get enableClerk() {
-    return enableClerk;
+    return enableClerk.value;
   },
 }));
 
 afterEach(() => {
-  enableAuth = true;
+  enableAuth.value = true;
+  enableClerk.value = false;
   mockNavigate.mockReset();
 });
 
@@ -55,7 +57,7 @@ describe('UserBanner', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: false });
     });
-    enableAuth = false;
+    enableAuth.value = false;
 
     render(<UserBanner />);
 
@@ -69,7 +71,7 @@ describe('UserBanner', () => {
       useUserStore.setState({ isSignedIn: true });
     });
 
-    enableClerk = true;
+    enableClerk.value = true;
 
     render(<UserBanner />);
 
@@ -82,7 +84,7 @@ describe('UserBanner', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: false });
     });
-    enableClerk = true;
+    enableClerk.value = true;
 
     render(<UserBanner />);
 

package/src/app/[variants]/(main)/(mobile)/me/(home)/__tests__/useCategory.test.tsx

@@ -22,16 +22,18 @@ vi.mock('react-i18next', () => ({
   })),
 }));
 
-// 定义一个变量来存储 enableAuth 的值
-let enableAuth = true;
-let enableClerk = true;
-// 模拟 @/const/auth 模块
+// Use vi.hoisted to ensure variables exist before vi.mock factory executes
+const { enableAuth, enableClerk } = vi.hoisted(() => ({
+  enableAuth: { value: true },
+  enableClerk: { value: true },
+}));
+
 vi.mock('@/const/auth', () => ({
   get enableAuth() {
-    return enableAuth;
+    return enableAuth.value;
   },
   get enableClerk() {
-    return enableClerk;
+    return enableClerk.value;
   },
 }));
 
@@ -45,8 +47,8 @@ vi.mock('@/const/version', async (importOriginal) => {
 });
 
 afterEach(() => {
-  enableAuth = true;
-  enableClerk = true;
+  enableAuth.value = true;
+  enableClerk.value = true;
   mockNavigate.mockReset();
 });
 
@@ -55,8 +57,8 @@ describe('useCategory', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: true });
     });
-    enableAuth = true;
-    enableClerk = false;
+    enableAuth.value = true;
+    enableClerk.value = false;
 
     const { result } = renderHook(() => useCategory(), { wrapper });
 
@@ -74,7 +76,7 @@ describe('useCategory', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: false });
     });
-    enableAuth = true;
+    enableAuth.value = true;
 
     const { result } = renderHook(() => useCategory(), { wrapper });