SuperTokens

SuperTokens

  • Docs
  • Discord
  • Blog

โ€บSignIn Form

SIDEBAR_REPLACE_DOC_About this recipe

  • About this recipe

Quick setup

  • Video tutorial
  • Frontend
  • Backend
  • Core

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

    Database Setup

    • If using MySQL
    • If using PostgreSQL
    • Rename database tables

SIDEBAR_REPLACE_DOC_About appInfo

  • About appInfo

Common customizations

  • Redirect To Auth Screen
  • Sign Out
  • SignUp Form

    • Prerequisite
    • Adding Extra Fields
    • Adding / Modifying field validators
    • Built in providers
    • Custom providers
    • 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 Sign In / Up form in a page
  • Post signin / signup 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
    • Customising the reset password email
    • Embed in a page

    Email Verification

    • Enable email verification
    • Customising the email sent
    • Embed in a page
    • Post email verification

    Sessions

    • About
    • Storing data in a session
    • 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
    • Handling session expiry
    • Securing a website route / component
    • Fetching sessions for a user
    • Update JWT Payload
    • Update Session Data
    • Multiple API endpoints
    • Cookies and Https
    • Cookie Consent
    • Share sessions across sub domains
    • Anti CSRF
    • Same site cookies
    • JWT Signing key rotation
    • Access token blacklisting
    • Using in an iframe
    • Customizing Error Handling

    Styling

    • Changing Colours
    • Changing Style via CSS
    • Disable use of shadow DOM

    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

Advanced customizations

  • Overview
  • React component override

    • About
    • How to use

    Frontend functions override

    • About
    • How to use

    Backend functions override

    • About
    • How to use

    APIs override

    • About
    • How to use
    • Disabling APIs

    Frontend hooks

    • Pre API Hook
    • Handle Event Hook
    • Redirection Callback Hook

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

Serverless Deployment

    With Netlify

    • About
    • 1. Frontend Setup
    • 2. Backend config
    • 3. Exposing Auth APIs
    • 4. Session verification / Building your APIs
    • 5. Next steps

    With AWS Lambda

    • About
    • 1. Frontend Setup
    • 2. Backend config
    • 3. Exposing Auth APIs
    • 4. Setting Up API Gateway & CORS
    • 5. Session verification / Building your APIs
    • 6. Next steps

Testing

  • Testing with Postman

SIDEBAR_REPLACE_DOC_SDK Reference

  • SDK Reference

SIDEBAR_REPLACE_DOC_API Reference

  • API Reference

Password managers ๐Ÿ”‘

Styling encapsulation relies on shadow DOM browser feature.

Unfortunately password managers such as Dashlane, LastPass, OnePassword, etc... do not detect authentication forms fields inside shadow DOMs.

If you would like to make sure that your end users can use their password managers, you will have to disable shadow DOM.

ReactJS
SuperTokens.init({
appInfo: {...},
recipeList: [
ThirdPartyEmailPassword.init({
useShadowDom: false
})
]
});

  • SuperTokens uses only randomized styles to define its styling so disabling shadow DOM should not impact the rest of your application's styles. On the other hand, when disabling Shadow DOM, make sure to verify that your CSS does not impact how SuperTokens UI is rendered.
  • Shadow DOM will always be disabled with Internet Explorer since it does not support it. Similarly, if you intend to support Internet Explorer for your application make sure to verify how SuperTokens UI is rendered.
โ† Custom providersEmbed Sign In / Up form in a page โ†’