Adding Extra Fields 💥

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.

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.

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:

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.

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.