Email & Password Signup Component

PropelAuth's Email & Password Signup component allows you to build out your own signup page with email and password login. It is designed to be used when your user has a Login State of LOGIN_REQUIRED.

We highly recommend reviewing the Login and Signup Guide if using any of our login or signup components.

Email & Password Signup

Shadcn Installation

Install this component from our shadcn registry.

npx shadcn@latest add https://components.propelauth.com/r/email-password-signup.json

Reference APIs

These are the APIs that are used by the above component. You can use these APIs directly in your own code.

Create a user for your application using email and password. See passwordlesslogin and loginWithSocialProvider for alternative ways to sign users up.

Arguments

Name
email *
Type
string
Description
The email of the user to create.
Name
password *
Type
string
Description
The password of the user to create.
Name
username
Type
string
Description
The username of the user to create. See User Properties for more information.
Name
first_name
Type
string
Description
The first name of the user to create. See User Properties for more information.
Name
last_name
Type
string
Description
The last name of the user to create. See User Properties for more information.
Name
properties
Type
dictionary
Description
A dictionary of custom properties of the user to create. See Custom User Properties for more information.
Name
invite_token
Type
string
Description
The token included as a invite_token URL parameter in the invite link sent to the invited user.
Name
turnstile_token
Type
string
Description
The token returned by the Turnstile widget. Required if using the PropelAuth Cloudflare Turnstile Integration.

Success Response

Name
login_state
Type
LoginState
Description
Returns one of the following:
- LOGIN_REQUIRED
- TWO_FACTOR_REQUIRED
- EMAIL_NOT_CONFIRMED_YET
- USER_MISSING_REQUIRED_PROPERTIES
- USER_MUST_BE_IN_AT_LEAST_ONE_ORG
- UPDATE_PASSWORD_REQUIRED
- TWO_FACTOR_ENROLLMENT_REQUIRED
- LOGGED_IN
Name
user_id
Type
string
Description
The ID of the user that was created.

Response Functions

The response object has a handle function that you can use to handle the response. These functions can be async, and you can return values from them.

Name
success
Description
Successful request.
Name
signupDisabled
Description
Signups are disabled in the PropelAuth Dashboard.
Name
badRequest
Description
Incorrect arguments provided.
Name
unexpectedOrUnhandled
Description
An unexpected error occurred.

Request

const { signup } = useAuthFrontendApis()

const response = await signup({
    email: "test@example.com",
    password: "password",
    username: "airbud3",
    first_name: "Buddy",
    last_name: "Framm",
    properties: {
        favoriteSport: "Basketball"
    },
    invite_token: "eyJvcmdfaWQ...",
    turnstile_token: "0.sSXqFt-EH..Z"
})
response.handle({
    success(data) {
        // handle login state
    },
    signupDisabled(error) {
        console.error('Signups are disabled', error)
    },
    badRequest(error) {
        for (const [field, fieldErrorMessage] of Object.entries(error.user_facing_errors)) {
            console.log('Error: "' + fieldErrorMessage + '" for field: "' + field + '"')
        }
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled', error.user_facing_error)
    },
})

Successful Response

{
    "login_state": "Finished",
    "user_id": "bf186f61-b204-4dd6-a6dc-a4ba2c97db1d"
}