Adding Extra Fields

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

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

Plain JavaScript

not supported / not applicable

If this requires a call to the backend, you will need to call our APIs yourself. Otherwise, since you are building your own login UI, you will have to handle this yourself.

React Native

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()    ]});

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 backend application:

NodeJS

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

GoLang

import (    "github.com/supertokens/supertokens-golang/recipe/emailpassword"    "github.com/supertokens/supertokens-golang/recipe/emailpassword/epmodels"    "github.com/supertokens/supertokens-golang/supertokens")
func main() {    countryOptional := true    supertokens.Init(supertokens.TypeInput{        RecipeList: []supertokens.Recipe{            emailpassword.Init(&epmodels.TypeInput{                SignUpFeature: &epmodels.TypeInputSignUp{                    FormFields: []epmodels.TypeInputFormField{                        {                            ID: "name",                        },                        {                            ID: "age",                        },                        {                            ID:       "country",                            Optional: &countryOptional,                        },                    },                },            }),        },    })}

Python

supertokens_python.init({    'app_info': {...},    'supertokens': {...},    'framework': '...',    'recipe_list': [        emailpassword.init({            'sign_up_feature': {                'form_fields': [{                        'id': 'name'                    }, {                        'id': 'age'                    }, {                        'id': 'country',                        'optional': True                    }                ]            }        }),        session.init({...})    ]})

Handle form fields on successful Sign-up

To handle form fields on the backend you'll have to override the signUpPOST API when initializing the recipe:

NodeJS

SuperTokens.init({    appInfo: {...},    supertokens: {...},    recipeList: [        EmailPassword.init({            override: {                apis: (originalImplementation) => {                    return {                        ...originalImplementation,                        signUpPOST: async function(input) {
                            if (originalImplementation.signUpPOST === undefined) {                                throw Error("Should never come here");                            }
                            // First we call the original implementation of signUpPOST.                            let response = await originalImplementation.signUpPOST(input);
                            // Post sign up response, we check if it was successful                            if (response.status === "OK") {
                                // These are the input form fields values that the user used while signing up                                let formFields = input.formFields;                                                            }                            return response;                        }                    }                }            }        }),        Session.init({...})    ]});

GoLang

func main() {    supertokens.Init(supertokens.TypeInput{        RecipeList: []supertokens.Recipe{            emailpassword.Init(&epmodels.TypeInput{                Override: &epmodels.OverrideStruct{                    APIs: func(originalImplementation epmodels.APIInterface) epmodels.APIInterface {                        // First we copy the original implementation func                        originalSignUpPOST := *originalImplementation.SignUpPOST
                        (*&originalImplementation.SignUpPOST) = func(formFields []epmodels.TypeFormField, options epmodels.APIOptions) (epmodels.SignUpResponse, error) {                            resp, err := originalSignUpPOST(formFields, options)                            if err != nil {                                return epmodels.SignUpResponse{}, err                            }
                            if resp.OK != nil {                                // sign up was successful
                                // TODO: You can now read the formFields from the input params
                            }
                            return resp, err                        }
                        return originalImplementation                    },                },            }),        },    })}

Python

def override_email_password_apis(original_implementation):    original_sign_up_post = original_implementation.sign_up_post
    async def sign_up_post(form_fields: List[FormField], api_options: APIOptions):        # First we call the original implementation of signInPOST.        response = await original_sign_up_post(form_fields, api_options)
        # Post sign up response, we check if it was successful        if response.is_ok:            id = response.user.user_id            email = response.user.email
            # TODO: use the input form fields values for custom logic        return response        original_implementation.sign_up_post = sign_up_post    return original_implementation
supertokens_python.init({    'app_info': {...},    'supertokens': {...},    'framework': '...',    'recipe_list': [        emailpassword.init({            'override': {                'apis': override_email_password_apis            }        })    ]})

caution

SuperTokens does not store custom form fields. You need to store them in your db post user sign up.