Changing Field Labels and Placeholder text

If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the formFields property when initializing SuperTokens on the frontend.

ReactJS
Angular
Vue
Plain JavaScript
React Native

Note

You can use the supertokens-web-js SDK which exposes several helper functions that query the APIs exposed by the SuperTokens backend SDK.

You can refer to this example app as a reference for using the supertokens-web-js SDK.

Note

To use SuperTokens with React Native you need to use the supertokens-react-native SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        EmailPassword.init({
            signInAndUpFeature: {
                signUpForm: {
                    formFields: [{
                        id: "email",
                        label: "customFieldName",
                        placeholder: "Custom value"
                    }]
                }
            }
        }),
        Session.init()
    ]
});