Skip to main content

Changing Style via CSS

Updating the CSS allows you to change the UI of our components to meet your needs.

This section will guide you through an example of updating the look of buttons. Note that the process can be applied to update any HTML tag from within SuperTokens components.

Global style changes#

How to make changes#

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.

Inspecting submit button in prebuilt formHighlighting attribute to be used for customization

Each stylable components contains data-supertokens attributes (in our example data-supertokens="button").

Let's add a button attribute to our configuration file. The syntax for styling is the same as React inline styling.

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({            palette: { /* ... */ },            style: {                button: {                    backgroundColor: '#252571',                    border: '0px',                    width: '30%',                    margin: '0 auto'                }            }        }),        Session.init()    ]});

The above will result in:

Prebuilt form with custom submit button

Changing fonts#

By default, SuperTokens loads and uses the 'Rubik' font. The best way to override this is to add styling to the container component in the recipe configuration. Doing so will prevent the SDK from loading the default font.

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({            palette: { /* ... */ },            style: {                container: {                    fontFamily: "cursive"                }            }        }),        Session.init()    ]});

Using media queries#

You may want to have different CSS for different viewports. This can be achieved via media queries like this:

import SuperTokens from "supertokens-auth-react";import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "...",    },    recipeList: [        // ...        EmailPassword.init({            // ...            style: {                button: {                    backgroundColor: '#252571',                    border: '0px',                    width: '30%',                    margin: '0 auto',                    "@media (max-width: 440px)": {                        width: "90%",                    },                },            },        }),    ],});

Customising the Sign-Up / Sign-In form#

These are the screens shown when the user tries to log in or sign up for the application.

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({            palette: { /* ... */ },            signInAndUpFeature: {                signUpForm: {                    style: { /* ... */ }                }            }        }),        Session.init()    ]});

Customising the Password Reset forms#

Send password reset email form#

This form is shown when the user clicks on "forgot password" in the sign in form.

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({            resetPasswordUsingTokenFeature: {                enterEmailForm: {                    style: { /* ... */ }                }            }        }),        Session.init()    ]});

Submit new password form#

This screen is shown when the user clicks the password reset link on their email - to enter their new password

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({            resetPasswordUsingTokenFeature: {                submitNewPasswordForm: {                    style: { /* ... */ }                }            }        }),         Session.init()    ]});

Customise the Email Verification forms#

Send verification email screen#

This screen is shown when the user logs in and is redirected to a screen which asks them to send an email verification email.

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({            emailVerificationFeature: {                sendVerifyEmailScreen: {                    style: { /* ... */ }                }            }        }),         Session.init()    ]});

Verify email link clicked screen#

This screen is shown when the user clicks the email verification link on their email.

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({            emailVerificationFeature: {                verifyEmailLinkClickedScreen: {                    style: { /* ... */ }                }            }        }),        Session.init()    ]});