Email Password login
#
Sign up form- Web
- Mobile
Call the following function when the user clicks on the sign up button.
- Via NPM
- Via Script Tag
import { signUp } from "supertokens-web-js/recipe/emailpassword";
async function signUpClicked(email: string, password: string) {
try {
let response = await signUp({
formFields: [{
id: "email",
value: email
}, {
id: "password",
value: password
}]
})
if (response.status === "FIELD_ERROR") {
// one of the input formFields failed validation
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.");
}
}
}
async function signUpClicked(email: string, password: string) {
try {
let response = await supertokensEmailPassword.signUp({
formFields: [{
id: "email",
value: email
}, {
id: "password",
value: password
}]
})
if (response.status === "FIELD_ERROR") {
// one of the input formFields failed validation
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 in 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.");
}
}
}
- Single tenant setup
- Multi tenant setup
Call the follwing API when the user clicks on the sign up button (the command below can be tried on your terminal).
curl --location --request POST '<YOUR_API_DOMAIN>/auth/signup' \
--header 'Content-Type: application/json; charset=utf-8' \
--data-raw '{
"formFields": [{
"id": "email",
"value": "[email protected]"
}, {
"id": "password",
"value": "somePassword123"
}]
}'
Call the follwing API when the user clicks on the sign up button (the command below can be tried on your terminal).
curl --location --request POST '<YOUR_API_DOMAIN>/auth/<TENANT_ID>/signup' \
--header 'Content-Type: application/json; charset=utf-8' \
--data-raw '{
"formFields": [{
"id": "email",
"value": "[email protected]"
}, {
"id": "password",
"value": "somePassword123"
}]
}'
The response body from the API call has a status
property in it:
status: "OK"
: User creation was successful. The response also contains more information about the user, for example their user ID.status: "FIELD_ERROR"
: One of the form field inputs failed validation. The response body contains information about which form field input based on theid
:The email could fail validation if it's syntactically not an email, of it it's not unique.
The password could fail validation if it's not string enough (as defined by the backend password validator).
Either way, you want to show the user an error next to the input form field.
status: "GENERAL_ERROR"
: This is only possible if you have overriden the backend API to send back a custom error message which should be displayed on the frontend.status: "SIGN_UP_NOT_ALLOWED"
: This can happen during automatic account linking or during MFA. Thereason
prop that's in the response body contains a support code using which you can see why the sign up was not allowed.
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": "[email protected]"
}, {
"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 uniqueAs 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.
- Web
- Mobile
- Via NPM
- Via Script Tag
import { doesEmailExist } from "supertokens-web-js/recipe/emailpassword";
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.");
}
}
}
async function checkEmail(email: string) {
try {
let response = await supertokensEmailPassword.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.");
}
}
}
- Single tenant setup
- Multi tenant setup
curl --location --request GET '<YOUR_API_DOMAIN>/auth/emailpassword/email/[email protected]'
curl --location --request GET '<YOUR_API_DOMAIN>/auth/<TENANT_ID>/emailpassword/email/[email protected]'
The response body from the API call has a status
property in it:
status: "OK"
: The response will also contain aexists
boolean which will betrue
if the input email already belongs to an email password user.status: "GENERAL_ERROR"
: This is only possible if you have overriden the backend API to send back a custom error message which should be displayed on the frontend.
#
Sign in form- Web
- Mobile
Call the follwing function when the user clicks on the sign in button.
- Via NPM
- Via Script Tag
import { signIn } from "supertokens-web-js/recipe/emailpassword";
async function signInClicked(email: string, password: string) {
try {
let response = await signIn({
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.");
}
}
}
async function signInClicked(email: string, password: string) {
try {
let response = await supertokensEmailPassword.signIn({
formFields: [{
id: "email",
value: email
}, {
id: "password",
value: password
}]
})
if (response.status === "FIELD_ERROR") {
// one of the input formFields failed validation
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.");
}
}
}
- Single tenant setup
- Multi tenant setup
Call the follwing API when the user clicks on the sign in button (the command below can be tried on your terminal).
curl --location --request POST '<YOUR_API_DOMAIN>/auth/signin' \
--header 'Content-Type: application/json; charset=utf-8' \
--data-raw '{
"formFields": [{
"id": "email",
"value": "[email protected]"
}, {
"id": "password",
"value": "somePassword123"
}]
}'
Call the follwing API when the user clicks on the sign in button (the command below can be tried on your terminal).
curl --location --request POST '<YOUR_API_DOMAIN>/auth/<TENANT_ID>/signin' \
--header 'Content-Type: application/json; charset=utf-8' \
--data-raw '{
"formFields": [{
"id": "email",
"value": "[email protected]"
}, {
"id": "password",
"value": "somePassword123"
}]
}'
The response body from the API call has a status
property in it:
status: "OK"
: User sign in was successful. The response also contains more information about the user, for example their user ID.status: "WRONG_CREDENTIALS_ERROR"
: The input email and password combination is incorrect.status: "FIELD_ERROR"
: This indicates that the input email did not pass the backend validation - probably because it's syntactically not an email. You want to show the user an error next to the email input form field.status: "GENERAL_ERROR"
: This is only possible if you have overriden the backend API to send back a custom error message which should be displayed on the frontend.status: "SIGN_IN_NOT_ALLOWED"
: This can happen during automatic account linking or during MFA. Thereason
prop that's in the response body contains a support code using which you can see why the sign in was not allowed.
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.