Customize form fields
Customize form fields in the sign in component by modifying labels, placeholders, default values, and error messages.
Before you start
The following instructions are only relevant if you are using the pre-built UI components. If you have created your own authentication UI, you can skip this guide.
Modify labels and placeholders
To change the labels and placeholders of the fields update the formFields
property, in the recipe configuration.
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
EmailPassword.init({
signInAndUpFeature: {
signInForm: {
formFields: [{
id: "email",
label: "customFieldName",
placeholder: "Custom value"
}]
}
}
}),
Session.init()
]
});
Set default values
Add a getDefaultValue
option in the formFields
configuration to pre-fill the inputs.
Keep in mind that the function needs to return a string.
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
EmailPassword.init({
signInAndUpFeature: {
signInForm: {
formFields: [{
id: "email",
label: "Your Email",
getDefaultValue: () => "john.doe@gmail.com"
}]
}
}
}),
Session.init()
]
});
Change the optional error message
When you try to submit the login form without filling in the required fields, the UI, by default, shows an error stating that the Field is not optional
.
To customize this message set the nonOptionalErrorMsg
property to a custom string.
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
EmailPassword.init({
signInAndUpFeature: {
signInForm: {
formFields: [{
id: "email",
label: "Your Email",
placeholder: "Email",
nonOptionalErrorMsg: "Please add your email"
}]
}
}
}),
Session.init()
]
});
Custom field validators
To add custom validation logic to the sign in form, update the sign up form configuration.
The email
and password
fields validation synchronizes between the two forms.
Check the sign up form instructions for more details.