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. 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 Login

Email

Password

Login

Shadcn Installation

Install this component from our shadcn registry.

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

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

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