SuperTokens

SuperTokens

  • Docs
  • Discord
  • Blog

โ€บStyling

SIDEBAR_REPLACE_DOC_About this recipe

  • About this recipe

Quick setup

  • Frontend
  • Backend
  • Core

    • Self Hosted setup with Docker
    • Self Hosted setup without Docker
    • Managed Service

    Database Setup

    • MySQL
    • PostgreSQL
    • MongoDB
    • Rename database tables

Common customizations

  • Redirect To Auth Screen
  • Sign Out
  • SignUp Form

    • Prerequisite
    • Adding Extra Fields
    • Adding / Modifying field validators
    • Built in providers
    • Custom providers
    • Embed in a page
    • Terms of service & Privacy policy links
    • Show Sign Up by default

    SignIn Form

    • Prerequisite
    • Adding / Modifying field validators
    • Built in providers
    • Custom providers
    • Password managers
    • Embed in a page
  • Post sign up callbacks
  • Post sign in callbacks
  • User Roles

    • Assigning roles to users
    • Assigning roles to a session
    • Reading roles in an API
    • Reading roles in the frontend
    • Updating roles in a session

    Reset Password

    • About
    • Reset Password Email
    • Embed in a page

    Email Verification

    • About
    • Customising the email sent
    • Embed in a page

    Sessions

    • About
    • Storing session data
    • Session Verification in API
    • Revoking a session manually
    • Change session timeout
    • Checking if a session exists on the frontend
    • Get user information on the frontend
    • Fetching sessions for a user
    • Update JWT Payload
    • Update Session Data
    • Cookies and Https
    • Cookie Consent
    • Share sessions across sub domains
    • Anti CSRF
    • Same site cookies
    • JWT Signing key rotation
    • Access token blacklisting
    • Customizing Error Handling

    Styling

    • Changing Colours
    • Changing Style via CSS
    • Themes

    Changing base path

    • Website Base Path
    • API Base Path
  • User Pagination
  • Core

    • Adding API Keys
    • Tuning Performance
    • Logging

    Core CLI

    • Overview
    • Start
    • List
    • Stop
    • Uninstall

NextJS

  • About
  • 1. Configuration
  • 2. Showing Login UI
  • 3. Adding auth APIs
  • 4. Protecting a website route
  • 5. Session verification

    • 5a. Session verification in an API call
    • 5b. Session verification in getServerSideProps
  • 6. Next steps

SIDEBAR_REPLACE_DOC_Serverless Optimisation

  • Running on serverless env

SIDEBAR_REPLACE_DOC_SDKs API Reference

  • SDKs API Reference

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.

ReactJS
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.

ReactJS
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.

ReactJS
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.

ReactJS
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.

ReactJS
SuperTokens.init({
recipeList: [
ThirdPartyEmailPassword.init({
emailVerificationFeature: {
verifyEmailLinkClickedScreen: {
style: {...}
}
}
}),

Session.init()
]
});
โ† Changing ColoursThemes โ†’