Skip to main content

Email Password login

Sign up form#

Call the following function when the user clicks on the sign up button.

import { emailPasswordSignUp } from "supertokens-web-js/recipe/thirdpartyemailpassword";

async function signUpClicked(email: string, password: string) {
    try {
        let response = await emailPasswordSignUp({
            formFields: [{
                id: "email",
                value: email
            }, {
                id: "password",
                value: password
            }]
        })

        if (response.status === "FIELD_ERROR") {
            // one of the input formFields failed validaiton
            response.formFields.forEach(formField => {
                if (formField.id === "email") {
                    // Email validation failed (for example incorrect email syntax),
                    // or the email is not unique.
                    window.alert(formField.error)
                } else if (formField.id === "password") {
                    // Password validation failed.
                    // Maybe it didn't match the password strength
                    window.alert(formField.error)
                }
            })
        } else if (response.status === "SIGN_UP_NOT_ALLOWED") { 
            // the reason string is a user friendly message
            // about what went wrong. It can also contain a support code which users
            // can tell you so you know why their sign up was not allowed.
            window.alert(response.reason)
        } else {
            // sign up successful. The session tokens are automatically handled by
            // the frontend SDK.
            window.location.href = "/homepage"
        }
    } catch (err: any) {
        if (err.isSuperTokensGeneralError === true) {
            // this may be a custom error message sent from the API by you.
            window.alert(err.message);
        } else {
            window.alert("Oops! Something went wrong.");
        }
    }
}

The formFields input is a key-value array. You must provide it an email and a password value at a minimum. If you want to provide additional items, for example the user's name or age, you can append it to the array like so:

{
    "formFields": [{
        "id": "email",
        "value": "john@example.com"
    }, {
        "id": "password",
        "value": "somePassword123"
    }, {
        "id": "name",
        "value": "John Doe"
    }]
}

On the backend, the formFields array will be available to you for consumption.

note

On success, the backend will send back session tokens as part of the response headers which will be automatically handled by our frontend SDK for you.

Checking if email is unique#

As a part of the sign up form, you may want to explicitly check that the entered email is unique. Whilst this is already done via the sign up API call, it may be a better UX to warn the user about a non unique email right after they finish typing it.

import { doesEmailExist } from "supertokens-web-js/recipe/thirdpartyemailpassword";

async function checkEmail(email: string) {
    try {
        let response = await doesEmailExist({
            email
        });

        if (response.doesExist) {
            window.alert("Email already exists. Please sign in instead")
        }
    } catch (err: any) {
        if (err.isSuperTokensGeneralError === true) {
            // this may be a custom error message sent from the API by you.
            window.alert(err.message);
        } else {
            window.alert("Oops! Something went wrong.");
        }
    }
}

Sign in form#

Call the follwing function when the user clicks on the sign in button.

import { emailPasswordSignIn } from "supertokens-web-js/recipe/thirdpartyemailpassword";

async function signInClicked(email: string, password: string) {
    try {
        let response = await emailPasswordSignIn({
            formFields: [{
                id: "email",
                value: email
            }, {
                id: "password",
                value: password
            }]
        })

        if (response.status === "FIELD_ERROR") {
            response.formFields.forEach(formField => {
                if (formField.id === "email") {
                    // Email validation failed (for example incorrect email syntax).
                    window.alert(formField.error)
                }
            })
        } else if (response.status === "WRONG_CREDENTIALS_ERROR") {
            window.alert("Email password combination is incorrect.")
        } else if (response.status === "SIGN_IN_NOT_ALLOWED") {
            // the reason string is a user friendly message
            // about what went wrong. It can also contain a support code which users
            // can tell you so you know why their sign in was not allowed.
            window.alert(response.reason)
        } else {
            // sign in successful. The session tokens are automatically handled by
            // the frontend SDK.
            window.location.href = "/homepage"
        }
    } catch (err: any) {
        if (err.isSuperTokensGeneralError === true) {
            // this may be a custom error message sent from the API by you.
            window.alert(err.message);
        } else {
            window.alert("Oops! Something went wrong.");
        }
    }
}
important

On success, the backend will send back session tokens as part of the response headers which will be automatically handled by our frontend SDK for you.

See also#

Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI