# Email & Password Signup Component

PropelAuth's Email & Password Signup component allows you to build out your own signup page with [email and password login](https://docs.propelauth.com/overview/authentication/login-methods#passwords). It is designed to be used when your user has a [Login State](https://ui.propelauth.com/login-signup-apis#login-state) of `LOGIN_REQUIRED`.

We highly recommend reviewing the [Login and Signup Guide](https://ui.propelauth.com/login-signup-apis) if using any of our login or signup components.

## Email & Password Signup

- First Name  
- Last Name  
- Email  
- Password  
- Signup

---

## [Shadcn Installation](https://ui.propelauth.com/login-signup-apis/email-password-signup#shadcn-installation)

Install this component from our [shadcn registry](https://ui.propelauth.com/getting-started/component-registry).

```bash
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](https://ui.propelauth.com/login-signup-apis/email-password-signup#signup)

Create a user for your application using email and password. See [passwordlesslogin](https://ui.propelauth.com/login-signup-apis/email-password-signup#passwordless-login) and [loginWithSocialProvider](https://ui.propelauth.com/login-signup-apis/email-password-signup#login-with-social-provider) 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](https://docs.propelauth.com/overview/user-management/user-properties) for more information.  
- Name `first_name` Type string  
  Description The first name of the user to create. See [User Properties](https://docs.propelauth.com/overview/user-management/user-properties) for more information.  
- Name `last_name` Type string  
  Description The last name of the user to create. See [User Properties](https://docs.propelauth.com/overview/user-management/user-properties) for more information.  
- Name `properties` Type dictionary  
  Description A dictionary of custom properties of the user to create. See [Custom User Properties](https://docs.propelauth.com/overview/user-management/user-properties#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](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/). Required if using the PropelAuth [Cloudflare Turnstile Integration](https://docs.propelauth.com/integrations/turnstile).

## 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

```javascript
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

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