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

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.

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