@wasp.sh/wasp-cli-darwin-x64-unknown 0.25.0-rc.1 → 0.26.0-rc.1

package/data/Cli/starters/README.md

@@ -20,3 +20,5 @@ The recommended approach for developing starter templates:
 2. **Implement changes**: Make your required changes in the Wasp project
 3. **Copy changes back**: Once satisfied with the implementation, copy the files from your project back to the starter templates
 4. **Test the starter**: Create a new project with `wasp-cli` to verify it matches your previously created project
+
+When copying changes back, don't include the `migrations/` directory. Starters intentionally ship without migrations so users aren't locked into a specific database provider. They'll get a single clean initial migration when they run `wasp db migrate-dev` for the first time.

package/data/Cli/starters/basic/README.md

@@ -22,14 +22,14 @@ wasp new <project-name> -t basic
 
 ## Development
 
+After cloning the project, run `wasp install`.
+
 To start the application locally for development or preview purposes:
 
 1. Run `wasp db migrate-dev` to migrate the database to the latest migration
-2. Run `wasp start` to start the Wasp application. If running for the first time, this will also install the client and the server dependencies for you.
+2. Run `wasp start` to start the Wasp application.
 3. The application should be running on `localhost:3000`. Open in it your browser to access the client.
 
-To improve your Wasp development experience, we recommend installing the [Wasp extension for VSCode](https://marketplace.visualstudio.com/items?itemName=wasp-lang.wasp).
-
 ## Learn more
 
 To find out more about Wasp, visit out [docs](https://wasp.sh/docs).

package/data/Cli/starters/basic/src/tags/components/CreateTagForm.tsx

@@ -1,4 +1,3 @@
-import { FormEvent } from "react";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { createTag } from "wasp/client/operations";
 import { Input } from "../../shared/components/Input";
@@ -90,8 +89,8 @@ export function CreateTagForm({ id, onTagCreated }: CreateTagFormProps) {
  *
  * @see https://github.com/react-hook-form/documentation/issues/916
  */
-function stopPropagate(callback: (event: FormEvent<HTMLFormElement>) => void) {
-  return (e: FormEvent<HTMLFormElement>) => {
+function stopPropagate(callback: (event: React.SubmitEvent<HTMLFormElement>) => void) {
+  return (e: React.SubmitEvent<HTMLFormElement>) => {
     e.stopPropagation();
     callback(e);
   };

package/data/Cli/starters/basic/vite.config.ts

@@ -4,7 +4,4 @@ import { wasp } from 'wasp/client/vite'
 
 export default defineConfig({
   plugins: [wasp(), tailwindcss()],
-  server: {
-    open: true,
-  },
 })

package/data/Cli/starters/minimal/package.json

@@ -1,7 +1,10 @@
 {
   "name": "__waspAppName__",
   "type": "module",
-  "workspaces": [".wasp/out/*", ".wasp/out/sdk/wasp"],
+  "workspaces": [
+    ".wasp/out/*",
+    ".wasp/out/sdk/wasp"
+  ],
   "dependencies": {
     "react": "^19.2.1",
     "react-dom": "^19.2.1",

package/data/Cli/starters/minimal/vite.config.ts

@@ -3,7 +3,4 @@ import { wasp } from "wasp/client/vite";
 
 export default defineConfig({
   plugins: [wasp()],
-  server: {
-    open: true,
-  },
 });

package/data/Cli/starters/skeleton/AGENTS.md

@@ -17,6 +17,12 @@ This project uses the Wasp framework.
 - Other constructors take no name argument; the declaration's name is the imported identifier. For example, `job(sendReminder, { ... })` declares a job named `sendReminder`.
 - `@wasp.sh/spec` is generated by Wasp, don't install it from npm.
 
+### Fresh checkout
+
+- Run `wasp install` before other Wasp commands in a fresh clone or worktree.
+- Set up `.env.server` and `.env.client` from the example files or the project README.
+- Run `wasp db migrate-dev`. Check the project README to see whether you also need to run a seed.
+
 ### Verification
 
 - Run `wasp compile` to check if app is valid.

package/data/Cli/starters/skeleton/CLAUDE.md

@@ -17,6 +17,12 @@ This project uses the Wasp framework.
 - Other constructors take no name argument; the declaration's name is the imported identifier. For example, `job(sendReminder, { ... })` declares a job named `sendReminder`.
 - `@wasp.sh/spec` is generated by Wasp, don't install it from npm.
 
+### Fresh checkout
+
+- Run `wasp install` before other Wasp commands in a fresh clone or worktree.
+- Set up `.env.server` and `.env.client` from the example files or the project README.
+- Run `wasp db migrate-dev`. Check the project README to see whether you also need to run a seed.
+
 ### Verification
 
 - Run `wasp compile` to check if app is valid.

package/data/Cli/starters/skeleton/tsconfig.src.json

@@ -1,13 +1,3 @@
-// =============================== IMPORTANT =================================
-// This file is mainly used for Wasp IDE support.
-//
-// Wasp will compile your code with slightly different (less strict) compilerOptions.
-// You can increase the configuration's strictness (e.g., by adding
-// "noUncheckedIndexedAccess": true), but you shouldn't reduce it (e.g., by
-// adding "strict": false). Just keep in mind that this will only affect your
-// IDE support, not the actual compilation.
-//
-// Full TypeScript configurability is coming very soon :)
 {
   "compilerOptions": {
     "module": "esnext",
@@ -25,6 +15,6 @@
     "outDir": ".wasp/out/user",
     "types": ["react", "node"]
   },
-  "include": ["src"],
+  "include": ["src", ".wasp/out/types/app"],
   "exclude": ["**/*.wasp.ts"]
 }

package/data/Generator/templates/Dockerfile

@@ -40,6 +40,7 @@ COPY package-lock.json .
 COPY tsconfig*.json .
 COPY server .wasp/out/server
 COPY sdk .wasp/out/sdk
+COPY types .wasp/out/types
 COPY libs .wasp/out/libs
 # Install npm packages, resulting in node_modules/.
 RUN npm install && cd .wasp/out/server && npm install

package/data/Generator/templates/sdk/wasp/api/index.ts

@@ -1,34 +1,8 @@
-import ky, { isHTTPError } from 'ky'
-import { config } from '../client/index.js'
-import { storage } from '../core/storage.js'
-import { apiEventsEmitter } from './events.js'
-
-const WASP_APP_AUTH_SESSION_ID_NAME = 'sessionId'
-
-// PRIVATE API (sdk)
-export function setSessionId(sessionId: string): void {
-  storage.set(WASP_APP_AUTH_SESSION_ID_NAME, sessionId)
-  apiEventsEmitter.emit('sessionId.set')
-}
-
-// PRIVATE API (sdk)
-export function getSessionId(): string | null {
-  const sessionId = storage.get(WASP_APP_AUTH_SESSION_ID_NAME) as
-    | string
-    | undefined
-  return sessionId ?? null
-}
-// PRIVATE API (sdk)
-export function clearSessionId(): void {
-  storage.remove(WASP_APP_AUTH_SESSION_ID_NAME)
-  apiEventsEmitter.emit('sessionId.clear')
-}
-
-// PRIVATE API (sdk)
-export function removeLocalUserData(): void {
-  storage.clear()
-  apiEventsEmitter.emit('sessionId.clear')
-}
+import ky from 'ky'
+import { config } from '../client/config.js'
+import { getSessionId, clearSessionId } from '@wasp.sh/lib-sdk-core/browser'
+export { getSessionId, setSessionId, clearSessionId, removeLocalUserData, handleApiError } from '@wasp.sh/lib-sdk-core/browser'
+export { WaspHttpError } from '@wasp.sh/lib-sdk-core'
 
 // PUBLIC API
 /**
@@ -79,61 +53,6 @@ export const api = ky.extend({
   },
 })
 
-// This makes sure that the following handler won't try to run in a non-browser
-// environment (e.g. during SSR), where `window` is not defined.
-if (typeof window !== 'undefined') {
-  // This handler will run on other tabs (not the active one calling API functions),
-  // and will ensure they know about auth session ID changes.
-  // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
-  // "Note: This won't work on the same page that is making the changes — it is really a way
-  // for other pages on the domain using the storage to sync any changes that are made."
-  window.addEventListener('storage', (event) => {
-    if (event.key === storage.getPrefixedKey(WASP_APP_AUTH_SESSION_ID_NAME)) {
-      if (!!event.newValue) {
-        apiEventsEmitter.emit('sessionId.set')
-      } else {
-        apiEventsEmitter.emit('sessionId.clear')
-      }
-    }
-  })
-}
-
-// PRIVATE API (sdk)
-/**
- * Takes an error returned by the app's API (as thrown by ky), and transforms it into a more
- * standard format to be further used by the client. It is also assumed that given API
- * error has been formatted as implemented by HttpError on the server.
- */
-export function handleApiError(error: unknown): unknown {
-  if (isHTTPError(error)) {
-    // If error came from HTTP response, we capture most informative message
-    // and also add .statusCode information to it.
-    // If error had JSON response, we assume it is of format { message, data } and
-    // add that info to the error.
-    // TODO: We might want to use HttpError here instead of just Error, since
-    //   HttpError is also used on server to throw errors like these.
-    //   That would require copying HttpError code to web-app also and using it here.
-    const responseJson = error.data as { message?: string; data?: unknown } | undefined
-    const responseStatusCode = error.response.status
-    return new WaspHttpError(responseStatusCode, responseJson?.message ?? error.message, responseJson)
-  } else {
-    // If any other error, we just propagate it.
-    return error
-  }
-}
-
-class WaspHttpError extends Error {
-  statusCode: number
-
-  data: unknown
-
-  constructor(statusCode: number, message: string, data: unknown) {
-    super(message)
-    this.statusCode = statusCode
-    this.data = data
-  }
-}
-
 function getSessionIdFromAuthorizationHeader(header: string | null): string | null {
   const prefix = 'Bearer '
   if (header && header.startsWith(prefix)) {

package/data/Generator/templates/sdk/wasp/auth/email/actions/login.ts

@@ -1,7 +1,7 @@
 {{={= =}=}}
 import { api, handleApiError } from '../../../api/index.js';
-import { initSession } from '../../helpers/user';
-import { SessionResponseSchema } from '../../responseSchemas';
+import { initSession } from '@wasp.sh/lib-sdk-core/browser';
+import { SessionResponseSchema } from '@wasp.sh/lib-sdk-core';
 
 // PUBLIC API
 export async function login(data: { email: string; password: string }): Promise<void> {

package/data/Generator/templates/sdk/wasp/auth/email/actions/passwordReset.ts

@@ -1,6 +1,6 @@
 {{={= =}=}}
 import { api, handleApiError } from '../../../api/index.js';
-import { SuccessResponseSchema } from '../../responseSchemas';
+import { SuccessResponseSchema } from '@wasp.sh/lib-sdk-core';
 
 // PUBLIC API
 export async function requestPasswordReset(data: { email: string; }): Promise<{ success: boolean }> {

package/data/Generator/templates/sdk/wasp/auth/email/actions/signup.ts

@@ -1,14 +1,15 @@
 {{={= =}=}}
 import { api, handleApiError } from '../../../api/index.js';
-import { SuccessResponseSchema } from '../../responseSchemas';
-{=# emailUserSignupFields.isDefined =}
-import { type UserEmailSignupFields } from '../../providers'
-{=/ emailUserSignupFields.isDefined =}
+import { SuccessResponseSchema } from '@wasp.sh/lib-sdk-core';
+{=# isEmailUserSignupFieldsDefined =}
+import type { UserEmailSignupFields } from '../../providers'
+{=/ isEmailUserSignupFieldsDefined =}
 
-type EmailSignupData = {
+// PRIVATE API
+export type EmailSignupData = {
   email: string
   password: string
-}{=# emailUserSignupFields.isDefined =} & UserEmailSignupFields{=/ emailUserSignupFields.isDefined =}
+}{=# isEmailUserSignupFieldsDefined =} & UserEmailSignupFields{=/ isEmailUserSignupFieldsDefined =}
 
 // PUBLIC API
 export async function signup(data: EmailSignupData): Promise<{ success: boolean }> {

package/data/Generator/templates/sdk/wasp/auth/email/actions/verifyEmail.ts

@@ -1,6 +1,6 @@
 {{={= =}=}}
 import { api, handleApiError } from '../../../api/index.js'
-import { SuccessResponseSchema } from '../../responseSchemas'
+import { SuccessResponseSchema } from '@wasp.sh/lib-sdk-core'
 
 // PUBLIC API
 export async function verifyEmail(data: {

package/data/Generator/templates/sdk/wasp/auth/forms/Auth.tsx

@@ -2,21 +2,24 @@
 import { useState, useMemo } from 'react'
 import { AuthContext, type ErrorMessage } from '@wasp.sh/lib-auth/browser'
 import styles from './Auth.module.css'
-import './internal/auth-styles.css'
-import { tokenObjToCSSVars } from "./internal/util"
-
 import {
-  type State,
+  FormMessageError as MessageError,
+  MessageSuccess,
+  tokenObjToCSSVars,
   type CustomizationOptions,
   type AdditionalSignupFields,
-} from './types'
+} from '@wasp.sh/lib-sdk-core/browser'
+
+import type { State } from './types'
 import { LoginSignupForm } from './internal/common/LoginSignupForm'
-import { MessageError, MessageSuccess } from './internal/Message'
 {=# isEmailAuthEnabled =}
 import { ForgotPasswordForm } from './internal/email/ForgotPasswordForm'
 import { ResetPasswordForm } from './internal/email/ResetPasswordForm'
 import { VerifyEmailForm } from './internal/email/VerifyEmailForm'
 {=/ isEmailAuthEnabled =}
+{=# isDummyEmailSenderNoticeEnabled =}
+import { DummyEmailSenderNotice } from './internal/email/DummyEmailSenderNotice'
+{=/ isDummyEmailSenderNoticeEnabled =}
 
 const logoStyle = {
   height: '3rem'
@@ -57,6 +60,9 @@ function Auth ({ state, appearance, logo, socialLayout = 'horizontal', additiona
         <h2 className={styles.headerText}>{title}</h2>
       </div>
 
+      {=# isDummyEmailSenderNoticeEnabled =}
+      {(state === 'signup' || state === 'forgot-password') && <DummyEmailSenderNotice />}
+      {=/ isDummyEmailSenderNoticeEnabled =}
       {errorMessage && (
         <MessageError>
           {errorMessage.title}{errorMessage.description && ': '}{errorMessage.description}

package/data/Generator/templates/sdk/wasp/auth/forms/ForgotPassword.tsx

@@ -1,5 +1,6 @@
 import Auth from './Auth'
-import { type CustomizationOptions, State } from './types'
+import type { CustomizationOptions } from '@wasp.sh/lib-sdk-core/browser'
+import { State } from './types'
 
 // PUBLIC API
 export function ForgotPasswordForm({

package/data/Generator/templates/sdk/wasp/auth/forms/Login.tsx

@@ -1,5 +1,6 @@
 import Auth from './Auth'
-import { type CustomizationOptions, State } from './types'
+import type { CustomizationOptions } from '@wasp.sh/lib-sdk-core/browser'
+import { State } from './types'
 
 // PUBLIC API
 export function LoginForm({

package/data/Generator/templates/sdk/wasp/auth/forms/ResetPassword.tsx

@@ -1,5 +1,6 @@
 import Auth from './Auth'
-import { type CustomizationOptions, State } from './types'
+import type { CustomizationOptions } from '@wasp.sh/lib-sdk-core/browser'
+import { State } from './types'
 
 // PUBLIC API
 export function ResetPasswordForm({

package/data/Generator/templates/sdk/wasp/auth/forms/Signup.tsx

@@ -1,9 +1,9 @@
 import Auth from './Auth'
-import {
-  type CustomizationOptions,
-  type AdditionalSignupFields,
-  State,
-} from './types'
+import type {
+  CustomizationOptions,
+  AdditionalSignupFields,
+} from '@wasp.sh/lib-sdk-core/browser'
+import { State } from './types'
 
 // PUBLIC API
 export function SignupForm({

package/data/Generator/templates/sdk/wasp/auth/forms/VerifyEmail.tsx

@@ -1,5 +1,6 @@
 import Auth from './Auth'
-import { type CustomizationOptions, State } from './types'
+import type { CustomizationOptions } from '@wasp.sh/lib-sdk-core/browser'
+import { State } from './types'
 
 // PUBLIC API
 export function VerifyEmailForm({

package/data/Generator/templates/sdk/wasp/auth/forms/internal/common/LoginSignupForm.tsx

@@ -1,12 +1,9 @@
 {{={= =}=}}
-import { useForm, UseFormReturn } from 'react-hook-form'
+import { useForm, type UseFormReturn } from 'react-hook-form'
 import styles from './LoginSignupForm.module.css'
-import '../auth-styles.css'
 import { config } from '../../../../client/index.js'
-import { clsx } from '../util'
-
-import { useAuthContext } from '@wasp.sh/lib-auth/browser'
 import {
+  clsx,
   Form,
   FormInput,
   FormItemGroup,
@@ -14,19 +11,23 @@ import {
   FormError,
   FormTextarea,
   SubmitButton,
-} from '../Form'
-import type {
-  AdditionalSignupFields,
-  AdditionalSignupField,
-  AdditionalSignupFieldRenderFn,
-  FormState,
-} from '../../types'
+  type AdditionalSignupFields,
+  type AdditionalSignupField,
+  type AdditionalSignupFieldRenderFn,
+  type FormState,
+} from '@wasp.sh/lib-sdk-core/browser'
+
+import { useAuthContext } from '@wasp.sh/lib-auth/browser'
+{=# enabledProviders.isEmailAuthEnabled =}
+import { emailFieldRules, emailInputProps } from '@wasp.sh/lib-sdk-core/browser'
+{=/ enabledProviders.isEmailAuthEnabled =}
 {=# isSocialAuthEnabled =}
-import * as SocialIcons from '../social/SocialIcons'
-import { SocialButton } from '../social/SocialButton'
+import * as SocialIcons from '@wasp.sh/lib-sdk-core/browser'
+import { SocialButton } from '@wasp.sh/lib-sdk-core/browser'
 {=/ isSocialAuthEnabled =}
 {=# isAnyPasswordBasedAuthEnabled =}
 import { useNavigate } from 'react-router'
+import { getAuthErrorMessage } from '@wasp.sh/lib-sdk-core/browser'
 {=/ isAnyPasswordBasedAuthEnabled =}
 {=# enabledProviders.isUsernameAndPasswordAuthEnabled =}
 import { useUsernameAndPassword } from '../usernameAndPassword/useUsernameAndPassword'
@@ -58,21 +59,18 @@ const gitHubSignInUrl = `${config.apiUrl}{= gitHubSignInPath =}`
 const microsoftSignInUrl = `${config.apiUrl}{= microsoftSignInPath =}`
 {=/ enabledProviders.isMicrosoftAuthEnabled =}
 
-{=!
-// Since we allow users to add additional fields to the signup form, we don't
-// know the exact shape of the form values. We are assuming that the form values
-// will be a flat object with string values.
-=}
-// PRIVATE API
-export type LoginSignupFormFields = {
-  [key: string]: string;
-}
+import type { LoginSignupFormFields } from '@wasp.sh/lib-sdk-core/browser'
+
 
 // PRIVATE API
 export const LoginSignupForm = ({
     state,
+    {=# isSocialAuthEnabled =}
     socialButtonsDirection = 'horizontal',
+    {=/ isSocialAuthEnabled =}
+    {=# isAnyPasswordBasedAuthEnabled =}
     additionalSignupFields,
+    {=/ isAnyPasswordBasedAuthEnabled =}
 }: {
     state: 'login' | 'signup'
     socialButtonsDirection?: 'horizontal' | 'vertical'
@@ -88,8 +86,8 @@ export const LoginSignupForm = ({
   const cta = isLogin ? 'Log in' : 'Sign up';
   {=# isAnyPasswordBasedAuthEnabled =}
   const navigate = useNavigate();
-  const onErrorHandler = (error) => {
-    setErrorMessage({ title: error.message, description: error.data?.data?.message })
+  const onErrorHandler = (error: unknown) => {
+    setErrorMessage(getAuthErrorMessage(error));
   };
   {=/ isAnyPasswordBasedAuthEnabled =}
   const hookForm = useForm<LoginSignupFormFields>()
@@ -99,7 +97,7 @@ export const LoginSignupForm = ({
     isLogin,
     onError: onErrorHandler,
     onSuccess() {
-      navigate('{= onAuthSucceededRedirectTo =}')
+      navigate({=& onAuthSucceededRedirectTo =})
     },
   });
   {=/ enabledProviders.isUsernameAndPasswordAuthEnabled =}
@@ -112,17 +110,22 @@ export const LoginSignupForm = ({
       setSuccessMessage(`You've signed up successfully! Check your email for the confirmation link.`)
     },
     onLoginSuccess() {
-      navigate('{= onAuthSucceededRedirectTo =}')
+      navigate({=& onAuthSucceededRedirectTo =})
     },
   });
   {=/ enabledProviders.isEmailAuthEnabled =}
   {=# isAnyPasswordBasedAuthEnabled =}
-  async function onSubmit (data) {
+  async function onSubmit(data: LoginSignupFormFields): Promise<void> {
     setIsLoading(true);
     setErrorMessage(null);
     setSuccessMessage(null);
     try {
-      await handleSubmit(data);
+      // We assert the type because the form holds raw input strings, while the
+      // signup data type uses the return types of the user's signup field
+      // getters (e.g. `Promise<string>` for an async getter).
+      // TODO: Close the type gap between the forms and the user's signup fields,
+      // so this assertion can go away.
+      await handleSubmit(data as Parameters<typeof handleSubmit>[0]);
     } finally {
       setIsLoading(false);
     }
@@ -189,10 +192,8 @@ export const LoginSignupForm = ({
           <FormItemGroup>
             <FormLabel>E-mail</FormLabel>
             <FormInput
-              {...register('email', {
-                required: 'Email is required',
-              })}
-              type="email"
+              {...register('email', emailFieldRules)}
+              {...emailInputProps}
               disabled={isLoading}
             />
             {errors.email && <FormError>{errors.email.message}</FormError>}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/DummyEmailSenderNotice.module.css

@@ -0,0 +1,11 @@
+.notice {
+  margin-top: 1rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  background: #bee3f8;
+  color: #2d3748;
+}
+
+.notice p {
+  margin: 0;
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/DummyEmailSenderNotice.tsx

@@ -0,0 +1,17 @@
+import styles from "./DummyEmailSenderNotice.module.css";
+
+// PRIVATE API
+/**
+ * Tells developers where to find the emails, since the Dummy email sender
+ * prints them in the terminal instead of sending them.
+ */
+export function DummyEmailSenderNotice() {
+  return (
+    <div className={styles.notice}>
+      <p>You are using the Dummy email sender.</p>
+      <p>
+        To see sent emails, check the <code>wasp start</code> terminal.
+      </p>
+    </div>
+  );
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/ForgotPasswordForm.tsx

@@ -1,16 +1,17 @@
-import { useForm } from 'react-hook-form'
 import { useAuthContext } from '@wasp.sh/lib-auth/browser'
+import { useForm } from 'react-hook-form'
 
 import { requestPasswordReset } from '../../../email/actions/passwordReset.js'
-import { Form, FormItemGroup, FormLabel, FormInput, SubmitButton, FormError } from '../Form'
+import { Form, FormItemGroup, FormLabel, FormInput, SubmitButton, FormError, emailFieldRules, emailInputProps, getAuthErrorMessage } from '@wasp.sh/lib-sdk-core/browser'
 
+type ForgotPasswordFormFields = { email: string };
 
 // PRIVATE API
 export const ForgotPasswordForm = () => {
-  const { register, handleSubmit, reset, formState: { errors } } = useForm<{ email: string }>()
+  const { register, handleSubmit, reset, formState: { errors } } = useForm<ForgotPasswordFormFields>()
   const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useAuthContext()
 
-  const onSubmit = async (data) => {
+  const onSubmit = async (data: ForgotPasswordFormFields): Promise<void> => {
     setIsLoading(true)
     setErrorMessage(null)
     setSuccessMessage(null)
@@ -18,11 +19,8 @@ export const ForgotPasswordForm = () => {
       await requestPasswordReset(data)
       reset()
       setSuccessMessage('Check your email for a password reset link.')
-    } catch (error) {
-      setErrorMessage({
-        title: error.message,
-        description: error.data?.data?.message,
-      })
+    } catch (error: unknown) {
+      setErrorMessage(getAuthErrorMessage(error));
     } finally {
       setIsLoading(false)
     }
@@ -34,10 +32,8 @@ export const ForgotPasswordForm = () => {
         <FormItemGroup>
           <FormLabel>E-mail</FormLabel>
           <FormInput
-            {...register('email', {
-              required: 'Email is required',
-            })}
-            type="email"
+            {...register('email', emailFieldRules)}
+            {...emailInputProps}
             disabled={isLoading}
           />
           {errors.email && <FormError>{errors.email.message}</FormError>}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/ResetPasswordForm.tsx

@@ -1,17 +1,19 @@
+import { useAuthContext } from '@wasp.sh/lib-auth/browser'
 import { useForm } from 'react-hook-form'
 import { useLocation } from 'react-router'
-import { useAuthContext } from '@wasp.sh/lib-auth/browser'
 
 import { resetPassword } from '../../../email/actions/passwordReset.js'
-import { Form, FormItemGroup, FormLabel, FormInput, SubmitButton, FormError } from '../Form'
+import { Form, FormItemGroup, FormLabel, FormInput, SubmitButton, FormError, getAuthErrorMessage } from '@wasp.sh/lib-sdk-core/browser'
+
+type ResetPasswordFormFields = { password: string; passwordConfirmation: string };
 
 // PRIVATE API
 export const ResetPasswordForm = () => {
-  const { register, handleSubmit, reset, formState: { errors } } = useForm<{ password: string; passwordConfirmation: string }>()
+  const { register, handleSubmit, reset, formState: { errors } } = useForm<ResetPasswordFormFields>()
   const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useAuthContext()
   const location = useLocation()
   const token = new URLSearchParams(location.search).get('token')
-  const onSubmit = async (data) => {
+  const onSubmit = async (data: ResetPasswordFormFields): Promise<void> => {
     if (!token) {
       setErrorMessage({
         title:
@@ -32,11 +34,8 @@ export const ResetPasswordForm = () => {
       await resetPassword({ password: data.password, token })
       reset()
       setSuccessMessage('Your password has been reset.')
-    } catch (error) {
-      setErrorMessage({
-        title: error.message,
-        description: error.data?.data?.message,
-      })
+    } catch (error: unknown) {
+      setErrorMessage(getAuthErrorMessage(error));
     } finally {
       setIsLoading(false)
     }