Button text not responding to isSubmitting
Hello. I have a sign in and sign up page. Both of the buttons are listening to isSubmitting/isValidating to change their text. But for some reason, only the signin button changes text, not the signup button.
5 Replies
ratty-blush•5w ago
what are your validators?
and your submit function?
yappiest-sapphireOP•5w ago
const signInSchema = z.object({
email: z
.email({ message: "Please enter a valid email address." })
.max(40, { message: "Email cannot be longer than 40 characters." })
.nonempty({ message: "Please enter your email address." }),
password: z
.string()
.min(8, { message: "Password must be at least 8 characters long." })
.max(30, { message: "Password should not be longer than 30 characters." })
.nonempty({ message: "Please enter a password." }),
});
export function SignIn() {
const [authErrorMessage, setAuthErrorMessage] = useState<string>("");
const form = useForm({
defaultValues: {
email: "",
password: "",
},
validators: {
onChange: signInSchema,
},
onSubmit: async ({ value }) => {
const { error } = await authClient.signIn.email({
email: value.email,
password: value.password,
});
// If there was an error
if (error) {
if (error?.code) {
setAuthErrorMessage(getAuthErrorMessage(error?.code));
return;
}
// An error occurred but there is no code? This could be due to change in better-auth library. For this situation, we will be returning a generic error message and call sentry
// TODO: call sentry
setAuthErrorMessage(
"We have encountered a strange error. Please try again later.",
);
return;
}
// If no error, redirect to dashboard
redirect("/dashboard");
},
});
const signInSchema = z.object({
email: z
.email({ message: "Please enter a valid email address." })
.max(40, { message: "Email cannot be longer than 40 characters." })
.nonempty({ message: "Please enter your email address." }),
password: z
.string()
.min(8, { message: "Password must be at least 8 characters long." })
.max(30, { message: "Password should not be longer than 30 characters." })
.nonempty({ message: "Please enter a password." }),
});
export function SignIn() {
const [authErrorMessage, setAuthErrorMessage] = useState<string>("");
const form = useForm({
defaultValues: {
email: "",
password: "",
},
validators: {
onChange: signInSchema,
},
onSubmit: async ({ value }) => {
const { error } = await authClient.signIn.email({
email: value.email,
password: value.password,
});
// If there was an error
if (error) {
if (error?.code) {
setAuthErrorMessage(getAuthErrorMessage(error?.code));
return;
}
// An error occurred but there is no code? This could be due to change in better-auth library. For this situation, we will be returning a generic error message and call sentry
// TODO: call sentry
setAuthErrorMessage(
"We have encountered a strange error. Please try again later.",
);
return;
}
// If no error, redirect to dashboard
redirect("/dashboard");
},
});
ratty-blush•5w ago
a zod synchronous validator takes a few ms at most.
isValidating will long be false before another render cycle hits
isSubmitting includes the authClient sign inyappiest-sapphireOP•5w ago
const signUpSchema = z....
export function SignUp() {
const [authErrorMessage, setAuthErrorMessage] = useState<string>("");
const form = useForm({
defaultValues: {
name: "",
email: "",
password: "",
confirmPassword: "",
},
validators: {
onChange: signUpSchema,
},
onSubmit: async ({ value }) => {
const { error } = await authClient.signUp.email({
name: value.name,
email: value.email,
password: value.password,
});
// If there was an error
if (error) {
if (error?.code) {
setAuthErrorMessage(getAuthErrorMessage(error?.code));
return;
}
// An error occurred but there is no code? This could be due to change in better-auth library. For this situation, we will be returning a generic error message and call sentry
// TODO: call sentry
setAuthErrorMessage(
"We have encountered a strange error. Please try again later.",
);
return;
}
// If no error, redirect to dashboard
redirect("/dashboard");
},
});
const signUpSchema = z....
export function SignUp() {
const [authErrorMessage, setAuthErrorMessage] = useState<string>("");
const form = useForm({
defaultValues: {
name: "",
email: "",
password: "",
confirmPassword: "",
},
validators: {
onChange: signUpSchema,
},
onSubmit: async ({ value }) => {
const { error } = await authClient.signUp.email({
name: value.name,
email: value.email,
password: value.password,
});
// If there was an error
if (error) {
if (error?.code) {
setAuthErrorMessage(getAuthErrorMessage(error?.code));
return;
}
// An error occurred but there is no code? This could be due to change in better-auth library. For this situation, we will be returning a generic error message and call sentry
// TODO: call sentry
setAuthErrorMessage(
"We have encountered a strange error. Please try again later.",
);
return;
}
// If no error, redirect to dashboard
redirect("/dashboard");
},
});
ratty-blush•5w ago
:PepeThumbs: let me know if there's other issues that show up