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

• First Name
• Last Name
• 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.

signup

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"
}