SuperTokens

SuperTokens

  • Docs
  • Discord
  • Blog

โ€บSign Up Form

SIDEBAR_REPLACE_DOC_Introduction

  • Introduction

Quick setup

  • Video tutorial & Architecture
  • Frontend
  • Backend
  • Core

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

    Database Setup

    • MySQL
    • PostgreSQL

Common customizations

  • Sign Out
  • Sign Up Form

    • About
    • Adding Extra Fields
    • Adding / Modifying field validators
    • Embed in a page
    • Handling signup success
    • Terms of service & Privacy policy links

    Sign In Form

    • About
    • Adding / Modifying field validators
    • Password managers
    • Embed in a page
    • Show Sign In by default

    Reset Password

    • About
    • Reset password email
    • Embed in a page

    Email Verification

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

    Sessions

    • About
    • Cookie Consent
    • Creating a new session
    • Session Verification in API
    • Change session timeout
    • Checking if a session exists on the frontend
    • Get user information on the frontend
    • Using with FaunaDB

    Styling

    • Changing Colours
    • Changing Style via CSS
    • Themes

    Changing base path

    • Website Base Path
    • API Base Path

    Multi Tenancy

    • About
    • One login, many sub domains
    • One login per sub domain
  • User Pagination

Advanced users

    Advanced session management

    • Share sessions across sub domains
    • Anti CSRF
    • JWT Signing key rotation
    • Access token blacklisting
    • Customizing Error Handling

    Supertokens Core config

    • Adding API Keys
    • Tuning Performance
    • Logging
    • Rename database tables

    Make your own frontend

    • Sign-up / Sign-in custom theme
    • Reset password custom theme

    Make your own backend

    • Sign up custom API
    • Sign in custom API
    • Reset password custom APIs

NextJS

  • SuperTokens with NextJS
  • Deploy with Vercel
  • Deploy with Netlify

SIDEBAR_REPLACE_DOC_SDKs

  • SDKs

SIDEBAR_REPLACE_DOC_Compatibility Table

  • Compatibility Table

Migration

  • Migrating from an older version of SuperTokens
  • Migrating to SuperTokens
  • Migrating away from SuperTokens
  • From managed service to self hosted

Embed in a page ๐Ÿ“‘

Two steps to achieving this:

  • First we disable the full page default implementation
  • Then we render the Sign-up / Sign-in UI wherever we like

Step 1: Disable default implementation ๐Ÿ”

SuperTokens.init({
    appInfo: {...},
    recipeList: [
        EmailPassword.init({
            signInAndUpFeature: {
                disableDefaultImplementation: true,
                (...)
            },
            (...)
        }),
        (...)
    ]
});

If you navigate to /auth, you should not see the widget anymore.

Step 2: Add component ๐Ÿ“ƒ

For example if you would like to add the Sign-up / Sign-in widget at the very end of a landing page, before the footer, simply import the SignInAndUp component and render it:


import {SignInAndUp} from 'supertokens-auth-react/recipe/emailpassword';

class MyLandingPage extends React.Component {
    render() {
        return (
            <div>
                <Header/>
                <FirstSection/>
                <AnotherSection/>

                (...)

                <SignInAndUp/>
                <Footer/>
            </div>
        )
    }
}
โ† Adding / Modifying field validatorsHandling signup success โ†’