# Email & Password Login Component

PropelAuth's Email & Password Login component allows you to customize the login page for your application 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 Login

Email

Password

Login

* * *

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

* * *

# Reference APIs

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

## [emailPasswordLogin](https://ui.propelauth.com/login-signup-apis/email-password-login#email-password-login)

Accepts a user's email and password to log them in.

## Arguments

- Name `email`  \* Type string Description The email of the user to log in.
- Name `password`  \* Type string Description The password of the user to log in.

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

## 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 `passwordLoginDisabled` Description Password login is disabled in the PropelAuth Dashboard.
- Name `userAccountDisabled` Description User cannot login due to their account being disabled.
- Name `userAccountLocked` Description User cannot login due to their account being locked.
- Name `invalidCredentials` Description The email or password provided is incorrect.
- Name `badRequest` Description Incorrect arguments provided.
- Name `unexpectedOrUnhandled` Description An unexpected error occurred.

### Request

```javascript
const { emailPasswordLogin } = useAuthFrontendApis()

const response = await emailPasswordLogin({
    email: "test@example.com",
    password: "password"
})
response.handle({
    success(data) {
        // handle login state
    },
    passwordLoginDisabled(error) {
        console.error('Password login disabled', error)
    },
    userAccountDisabled(error) {
        console.error('User account disabled', error)
    },
    userAccountLocked(error) {
        console.error('User account locked', error)
    },
    invalidCredentials(error) {
        console.error('Invalid credentials', 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"
}
```