SuperTokens

SuperTokens

  • Docs
  • Discord
  • Blog

โ€บSign Up 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

    • MySQL
    • PostgreSQL
    • MongoDB
    • Rename database tables

Common customizations

  • Redirect To Auth Screen
  • Sign Out
  • Sign Up Form

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

    Sign In Form

    • Prerequisite
    • Adding / Modifying field validators
    • 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

    Multi Tenancy

    • About
    • One login, many sub domains
    • One login per sub domain
  • 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

Adding Extra Fields ๐Ÿ’ฅ

This is a two step process. There are frontend and backend changes (scroll down)

Step 1: Front End ๐Ÿšช

Currently, your Sign-up form contains only email and password fields. But you might want to get more information from your customers on sign up. Let's see how you can extend the Sign-up form to fit your needs.

ReactJS
SuperTokens.init({
appInfo: {...},
recipeList: [
EmailPassword.init({
signInAndUpFeature: {
signUpForm: {
formFields: [{
id: "name",
label: "Full name",
placeholder: "First name and last name"
}, {
id: "age",
label: "Your age",
placeholder: "How old are you?",
}, {
id: "country",
label: "Your country",
placeholder: "Where do you live?",
optional: true
}]
}

}
}),
Session.init()
]
});

Please refer to the auth-react reference API for more information about adding custom fields.

Step 2: Back End ๐Ÿ“ซ

Add fields to SuperTokens init

Now that you have added new fields to the front end you need to make sure that the backend will take them into account when your new users register.

Go back to where you have called the SuperTokens init function in your NodeJs application:

NodeJS
SuperTokens.init({
appInfo: {...},
supertokens: {...},
recipeList: [
EmailPassword.init({
signUpFeature: {
formFields: [{
id: "name"
}, {
id: "age"
}, {
id: "country",
optional: true
}]

}
}),
Session.init({...})
]
});

Handle form fields on successful Sign-up

Supertokens does not store those custom fields on successful signup.

Instead, you should use the handleCustomFormFieldsPostSignUp callback to handle those values yourselves.

NodeJS
SuperTokens.init({
appInfo: {...},
supertokens: {...},
recipeList: [
EmailPassword.init({
signUpFeature: {
formFields: [{
id: "name"
}, {
id: "age"
}, {
id: "country",
optional: true
}],
handleCustomFormFieldsPostSignUp: async (user, formFields) => {
let {id, email} = user;
/* formFields is [
{id: "name", value: "..."},
{id: "age", value: ...},
{id: "country", value: "..." or "" if not provided}
]
*/

// TODO: Sanitize form fields and store in your DB.
}

}
}),
Session.init({...})
]
});
Please note that Supertokens is not applying any processing to those custom fields. That means you should sanitize all the fields.

Please refer to the NodeJS reference API for more information on handleCustomFormFieldsPostSignUp input types.

โ† PrerequisiteAdding / Modifying field validators โ†’