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 headings. 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 title in prebuilt formHighlighting attribute to be used for customization

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

Let's customize elements with the headerTitle attribute. The syntax for styling is plain CSS.

import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdParty.init({
            style: `
                [data-supertokens~=headerTitle {
                    border: 3px;
                    border-color: #000000;
                    border-style: solid;
                }
            `
        }),
        Session.init()
    ]
});

The above will result in:

Prebuilt form with custom title

Changing fonts#

By default, SuperTokens uses the Arial font. The best way to override this is to add a font-family styling to the container component in the recipe configuration.

import SuperTokens from "supertokens-auth-react";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    style: `
        [data-supertokens~=container] {
            font-family: cursive;
        }
    `,
    recipeList: [ /* ... */]
});

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 ThirdParty from "supertokens-auth-react/recipe/thirdparty";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    // ...
    recipeList: [
        ThirdParty.init({
            style: `
                [data-supertokens~=headerTitle] {
                    border: 3px;
                    border-color: #000000;
                    border-style: solid;
                }

                @media (max-width: 440px) {
                    [data-supertokens~=headerTitle] {
                        border: 5px;
                    }
                }
            `
        }),
    ],
});

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";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    style: `[data-supertokens~=authPage] {
        ...
    }`,
    recipeList: [ /* ... */]
});

Customizing the OAuth callback screen#

This screen is shown when the user returns to the application from the OAuth provider

import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        ThirdParty.init({
            oAuthCallbackScreen: {
                style: ` ... `
            }
        }), 
        Session.init()
    ]
});
Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI