Changing Style via CSS ๐ญ
Updating the palette might not provide enough flexibility for your needs. If you'd like to update some specific CSS attributes, it is possible to do so.
This section will guide you through an example of updating the button from the signup form. Note that the process can be applied to update any HTML tags from within SuperTokens components.
Sign-Up / Sign-In
First, let's open our website at /auth
. The Sign-in widget should show up. Let's use the browser console to find out the class name that we'd like to overwrite.
Each stylable components contains data-supertokens
attributes (in our example data-supertokens="button"
).
Let's add a button
attribute to our configuration file.
SuperTokens.init({
appInfo: {...},
recipeList: [
ThirdPartyEmailPassword.init({
palette: {...},
signInAndUpFeature: {
style: {
button: {
backgroundColor: '#252571',
border: '0px',
width: '30%',
margin: '0 auto'
}
}
}
}),
Session.init()
]
});
The above will result in:
The syntax for styling is the same as React inline styling
Using this same technique, you can fully customize your widgets.
Check out the React reference API for a full list of classes that you can overwrite.
Reset Password Using Token
Send password reset email form
The same technique as above can be applied to tweak the send email form with the only difference that you should apply changes to enterEmailForm
from within the resetPasswordUsingTokenFeature
.
SuperTokens.init({
recipeList: [
ThirdPartyEmailPassword.init({
resetPasswordUsingTokenFeature: {
enterEmailForm: {
style: {...}
}
}
}),
Session.init()
]
});
Submit new password form
The same technique as above can be applied to tweak the submit new password form with the only difference that you should apply changes to submitNewPasswordForm
from within the resetPasswordUsingTokenFeature
.
SuperTokens.init({
recipeList: [
ThirdPartyEmailPassword.init({
resetPasswordUsingTokenFeature: {
submitNewPasswordForm: {
style: {...}
}
}
}),
Session.init()
]
});
Email Verification
Send verify email screen
The same technique as above can be applied to tweak the send email form with the only difference that you should apply changes to sendVerifyEmailScreen
from within the emailVerificationFeature
.
SuperTokens.init({
recipeList: [
ThirdPartyEmailPassword.init({
emailVerificationFeature: {
sendVerifyEmailScreen: {
style: {...}
}
}
}),
Session.init()
]
});
Verify email link clicked screen
The same technique as above can be applied to tweak the send email form with the only difference that you should apply changes to verifyEmailLinkClickedScreen
from within the emailVerificationFeature
feature.
SuperTokens.init({
recipeList: [
ThirdPartyEmailPassword.init({
emailVerificationFeature: {
verifyEmailLinkClickedScreen: {
style: {...}
}
}
}),
Session.init()
]
});