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()
    ]
});
← Changing ColoursThemes →