@baseplate-dev/plugin-auth 1.0.7 → 1.0.8

package/dist/better-auth/generators/react/better-auth-pages/generated/typed-templates.js

@@ -2,6 +2,20 @@ import { createTsTemplateFile } from '@baseplate-dev/core-generators';
 import { reactComponentsImportsProvider, reactErrorImportsProvider, } from '@baseplate-dev/react-generators';
 import path from 'node:path';
 import { betterAuthImportsProvider } from '#src/better-auth/generators/react/react-better-auth/generated/ts-import-providers.js';
+const forgotPassword = createTsTemplateFile({
+    fileOptions: { kind: 'singleton' },
+    group: 'pages',
+    importMapProviders: {
+        betterAuthImports: betterAuthImportsProvider,
+        reactComponentsImports: reactComponentsImportsProvider,
+        reactErrorImports: reactErrorImportsProvider,
+    },
+    name: 'forgot-password',
+    source: {
+        path: path.join(import.meta.dirname, '../templates/routes/forgot-password.tsx'),
+    },
+    variables: {},
+});
 const login = createTsTemplateFile({
     fileOptions: { kind: 'singleton' },
     group: 'pages',
@@ -30,6 +44,40 @@ const register = createTsTemplateFile({
     },
     variables: {},
 });
-export const pagesGroup = { login, register };
+const resetPassword = createTsTemplateFile({
+    fileOptions: { kind: 'singleton' },
+    group: 'pages',
+    importMapProviders: {
+        betterAuthImports: betterAuthImportsProvider,
+        reactComponentsImports: reactComponentsImportsProvider,
+        reactErrorImports: reactErrorImportsProvider,
+    },
+    name: 'reset-password',
+    source: {
+        path: path.join(import.meta.dirname, '../templates/routes/reset-password.tsx'),
+    },
+    variables: {},
+});
+const verifyEmail = createTsTemplateFile({
+    fileOptions: { kind: 'singleton' },
+    group: 'pages',
+    importMapProviders: {
+        betterAuthImports: betterAuthImportsProvider,
+        reactComponentsImports: reactComponentsImportsProvider,
+        reactErrorImports: reactErrorImportsProvider,
+    },
+    name: 'verify-email',
+    source: {
+        path: path.join(import.meta.dirname, '../templates/routes/verify-email.tsx'),
+    },
+    variables: {},
+});
+export const pagesGroup = {
+    forgotPassword,
+    login,
+    register,
+    resetPassword,
+    verifyEmail,
+};
 export const BETTER_AUTH_BETTER_AUTH_PAGES_TEMPLATES = { pagesGroup };
 //# sourceMappingURL=typed-templates.js.map

package/dist/better-auth/generators/react/better-auth-pages/templates/routes/forgot-password.tsx

@@ -0,0 +1,133 @@
+// @ts-nocheck
+
+import { authClient } from '%betterAuthImports';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  InputFieldController,
+} from '%reactComponentsImports';
+import { logError } from '%reactErrorImports';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { createFileRoute, Link, redirect } from '@tanstack/react-router';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+export const Route = createFileRoute('/auth/forgot-password')({
+  beforeLoad: ({ context: { userId } }) => {
+    if (userId) {
+      throw redirect({ to: '/', replace: true });
+    }
+  },
+  component: ForgotPasswordPage,
+});
+
+const formSchema = z.object({
+  email: z.email().transform((value) => value.toLowerCase()),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+function ForgotPasswordPage(): React.JSX.Element {
+  const {
+    control,
+    handleSubmit,
+    setError: setFormError,
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    reValidateMode: 'onBlur',
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const onSubmit = (data: FormData): void => {
+    setIsSubmitting(true);
+    authClient
+      .requestPasswordReset({
+        email: data.email,
+        redirectTo: '/auth/reset-password',
+      })
+      .then(({ error }) => {
+        if (error) {
+          setFormError('email', {
+            message: error.message ?? 'Failed to send reset email',
+          });
+          return;
+        }
+        setIsSuccess(true);
+      })
+      .catch((err: unknown) => {
+        logError(err);
+        setFormError('email', {
+          message: 'Sorry, something went wrong. Please try again.',
+        });
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+      });
+  };
+
+  if (isSuccess) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Card className="w-sm">
+          <CardHeader>
+            <CardTitle>Check your email</CardTitle>
+            <CardDescription>
+              If an account exists with that email, we&apos;ve sent a password
+              reset link. Please check your inbox and spam folder.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Link
+              to="/auth/login"
+              className="text-sm underline underline-offset-4"
+            >
+              Back to login
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <Card className="w-sm">
+        <CardHeader>
+          <CardTitle>Forgot your password?</CardTitle>
+          <CardDescription>
+            Enter your email address and we&apos;ll send you a link to reset
+            your password.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="flex flex-col gap-4">
+              <InputFieldController
+                control={control}
+                name="email"
+                label="Email"
+                type="email"
+                autoComplete="email"
+                placeholder="user@example.com"
+              />
+              <Button type="submit" className="w-full" disabled={isSubmitting}>
+                Send Reset Link
+              </Button>
+            </div>
+            <div className="mt-4 text-center text-sm">
+              <Link to="/auth/login" className="underline underline-offset-4">
+                Back to login
+              </Link>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/dist/better-auth/generators/react/better-auth-pages/templates/routes/login.tsx

@@ -105,10 +105,11 @@ function LoginPage(): React.JSX.Element {
         </CardHeader>
         <CardContent>
           <form onSubmit={handleSubmit(onSubmit)}>
-            <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-4">
               <InputFieldController
                 control={control}
                 name="email"
+                label="Email"
                 type="email"
                 autoComplete="email"
                 placeholder="user@example.com"
@@ -116,6 +117,7 @@ function LoginPage(): React.JSX.Element {
               <InputFieldController
                 control={control}
                 name="password"
+                label="Password"
                 type="password"
                 autoComplete="current-password"
                 placeholder="Password"
@@ -125,6 +127,12 @@ function LoginPage(): React.JSX.Element {
               </Button>
             </div>
             <div className="mt-4 flex flex-col gap-4 text-center text-sm">
+              <Link
+                to="/auth/forgot-password"
+                className="underline underline-offset-4"
+              >
+                Forgot your password?
+              </Link>
               <div>
                 Don&apos;t have an account?{' '}
                 <Link

package/dist/better-auth/generators/react/better-auth-pages/templates/routes/register.tsx

@@ -109,10 +109,11 @@ function RegisterPage(): React.JSX.Element {
         </CardHeader>
         <CardContent>
           <form onSubmit={handleSubmit(onSubmit)}>
-            <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-4">
               <InputFieldController
                 control={control}
                 name="name"
+                label="Name"
                 type="text"
                 autoComplete="name"
                 placeholder="Your name"
@@ -120,6 +121,7 @@ function RegisterPage(): React.JSX.Element {
               <InputFieldController
                 control={control}
                 name="email"
+                label="Email"
                 type="email"
                 autoComplete="email"
                 placeholder="user@example.com"
@@ -127,6 +129,7 @@ function RegisterPage(): React.JSX.Element {
               <InputFieldController
                 control={control}
                 name="password"
+                label="Password"
                 type="password"
                 autoComplete="new-password"
                 placeholder="Password"
@@ -134,6 +137,7 @@ function RegisterPage(): React.JSX.Element {
               <InputFieldController
                 control={control}
                 name="confirmPassword"
+                label="Confirm Password"
                 type="password"
                 autoComplete="new-password"
                 placeholder="Confirm password"

package/dist/better-auth/generators/react/better-auth-pages/templates/routes/reset-password.tsx

@@ -0,0 +1,177 @@
+// @ts-nocheck
+
+import { authClient } from '%betterAuthImports';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  InputFieldController,
+} from '%reactComponentsImports';
+import { logError } from '%reactErrorImports';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { createFileRoute, Link, redirect } from '@tanstack/react-router';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+export const Route = createFileRoute('/auth/reset-password')({
+  validateSearch: z.object({
+    token: z.string().optional(),
+  }),
+  beforeLoad: ({ context: { userId } }) => {
+    if (userId) {
+      throw redirect({ to: '/', replace: true });
+    }
+  },
+  component: ResetPasswordPage,
+});
+
+const formSchema = z
+  .object({
+    newPassword: z
+      .string()
+      .min(8, 'Password must be at least 8 characters')
+      .max(128),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword'],
+  });
+
+type FormData = z.infer<typeof formSchema>;
+
+function ResetPasswordPage(): React.JSX.Element {
+  const { token } = Route.useSearch();
+  const {
+    control,
+    handleSubmit,
+    setError: setFormError,
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    reValidateMode: 'onBlur',
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const onSubmit = (data: FormData): void => {
+    setIsSubmitting(true);
+    authClient
+      .resetPassword({
+        newPassword: data.newPassword,
+        token,
+      })
+      .then(({ error }) => {
+        if (error) {
+          setFormError('newPassword', {
+            message:
+              error.message ??
+              'Failed to reset password. The link may have expired.',
+          });
+          return;
+        }
+        setIsSuccess(true);
+      })
+      .catch((err: unknown) => {
+        logError(err);
+        setFormError('newPassword', {
+          message: 'Sorry, something went wrong. Please try again.',
+        });
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+      });
+  };
+
+  if (!token) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Card className="w-sm">
+          <CardHeader>
+            <CardTitle>Invalid reset link</CardTitle>
+            <CardDescription>
+              This password reset link is invalid or has expired. Please request
+              a new one.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Link
+              to="/auth/forgot-password"
+              className="text-sm underline underline-offset-4"
+            >
+              Request a new reset link
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (isSuccess) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Card className="w-sm">
+          <CardHeader>
+            <CardTitle>Password reset successful</CardTitle>
+            <CardDescription>
+              Your password has been reset successfully. You can now log in with
+              your new password.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Link
+              to="/auth/login"
+              className="text-sm underline underline-offset-4"
+            >
+              Go to login
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <Card className="w-sm">
+        <CardHeader>
+          <CardTitle>Reset your password</CardTitle>
+          <CardDescription>Enter your new password below.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="flex flex-col gap-4">
+              <InputFieldController
+                control={control}
+                name="newPassword"
+                label="New Password"
+                type="password"
+                autoComplete="new-password"
+                placeholder="New password"
+              />
+              <InputFieldController
+                control={control}
+                name="confirmPassword"
+                label="Confirm Password"
+                type="password"
+                autoComplete="new-password"
+                placeholder="Confirm new password"
+              />
+              <Button type="submit" className="w-full" disabled={isSubmitting}>
+                Reset Password
+              </Button>
+            </div>
+            <div className="mt-4 text-center text-sm">
+              <Link to="/auth/login" className="underline underline-offset-4">
+                Back to login
+              </Link>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/dist/better-auth/generators/react/better-auth-pages/templates/routes/verify-email.tsx

@@ -0,0 +1,109 @@
+// @ts-nocheck
+
+import { authClient } from '%betterAuthImports';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '%reactComponentsImports';
+import { logError } from '%reactErrorImports';
+import { createFileRoute, Link, useRouter } from '@tanstack/react-router';
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+
+export const Route = createFileRoute('/auth/verify-email')({
+  validateSearch: z.object({
+    token: z.string().optional(),
+  }),
+  component: VerifyEmailPage,
+});
+
+function VerifyEmailPage(): React.JSX.Element {
+  const { token } = Route.useSearch();
+  const router = useRouter();
+  const [status, setStatus] = useState<'loading' | 'success' | 'error'>(
+    token ? 'loading' : 'error',
+  );
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    token ? undefined : 'No verification token provided.',
+  );
+
+  useEffect(() => {
+    if (!token) return;
+
+    authClient
+      .verifyEmail({
+        query: { token },
+      })
+      .then(({ error }) => {
+        if (error) {
+          setStatus('error');
+          setErrorMessage(
+            error.message ?? 'Verification failed. The link may have expired.',
+          );
+          return;
+        }
+        setStatus('success');
+        // Refresh session to reflect verified email
+        router.invalidate().catch(logError);
+      })
+      .catch((err: unknown) => {
+        logError(err);
+        setStatus('error');
+        setErrorMessage('Sorry, something went wrong. Please try again.');
+      });
+  }, [token, router]);
+
+  if (status === 'loading') {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Card className="w-sm">
+          <CardHeader>
+            <CardTitle>Verifying your email...</CardTitle>
+            <CardDescription>
+              Please wait while we verify your email address.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      </div>
+    );
+  }
+
+  if (status === 'error') {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Card className="w-sm">
+          <CardHeader>
+            <CardTitle>Verification failed</CardTitle>
+            <CardDescription>{errorMessage}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Link to="/" className="text-sm underline underline-offset-4">
+              Go to homepage
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <Card className="w-sm">
+        <CardHeader>
+          <CardTitle>Email verified!</CardTitle>
+          <CardDescription>
+            Your email address has been verified successfully.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Link to="/" className="text-sm underline underline-offset-4">
+            Go to homepage
+          </Link>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}