PasswordProvider

Configures a provider that supports username and password authentication. This is usually paired with the PasswordUI.

import { PasswordUI } from "@openauthjs/openauth/ui/password"
import { PasswordProvider } from "@openauthjs/openauth/provider/password"

export default issuer({
  providers: {
    password: PasswordProvider(
      PasswordUI({
        copy: {
          error_email_taken: "This email is already taken."
        },
        sendCode: (email, code) => console.log(email, code)
      })
    )
  },
  // ...
})

Behind the scenes, the PasswordProvider expects callbacks that implements request handlers that generate the UI for the following.

PasswordProvider({
  // ...
  login: (req, form, error) => Promise<Response>
  register: (req, state, form, error) => Promise<Response>
  change: (req, state, form, error) => Promise<Response>
})

This allows you to create your own UI for each of these screens.

---

Methods

PasswordProvider

PasswordProvider(config)

Parameters

• config PasswordConfig

Returns Provider

PasswordChangeError

Type { type: “invalid_email” } | { type: “invalid_code” } | { type: “invalid_password” } | { type: “password_mismatch” }

The errors that can happen on the change password screen.

Error	Description
invalid_email	The email is invalid.
invalid_code	The code is invalid.
invalid_password	The password is invalid.
password_mismatch	The passwords do not match.

PasswordChangeState

Type { redirect: string, type: “start” } | { code: string, email: string, redirect: string, type: “code” } | { email: string, redirect: string, type: “update” }

The state of the password change flow.

State	Description
start	The user is asked to enter their email address to start the flow.
code	The user needs to enter the pin code to verify their email.
update	The user is asked to enter their new password and confirm it.

PasswordConfig

• change (req: Request<>, state: PasswordChangeState, form?: FormData<>, error?: PasswordChangeError) => Promise<Response<>>

• login (req: Request<>, form?: FormData<>, error?: PasswordLoginError) => Promise<Response<>>

• register (req: Request<>, state: PasswordRegisterState, form?: FormData<>, error?: PasswordRegisterError) => Promise<Response<>>

• sendCode (email: string, code: string) => Promise<void>

PasswordConfig.change

Type (req: Request<>, state: PasswordChangeState, form?: FormData<>, error?: PasswordChangeError) => Promise<Response<>>

The request handler to generate the UI for the change password screen.

Takes the standard Request and optionally FormData ojects.

Also passes in the current state of the flow and any error that occurred.

Expects the Response object in return.

PasswordConfig.login

Type (req: Request<>, form?: FormData<>, error?: PasswordLoginError) => Promise<Response<>>

The request handler to generate the UI for the login screen.

Takes the standard Request and optionally FormData ojects.

In case of an error, this is called again with the error.

Expects the Response object in return.

PasswordConfig.register

Type (req: Request<>, state: PasswordRegisterState, form?: FormData<>, error?: PasswordRegisterError) => Promise<Response<>>

The request handler to generate the UI for the register screen.

Takes the standard Request and optionally FormData ojects.

Also passes in the current state of the flow and any error that occurred.

Expects the Response object in return.

PasswordConfig.sendCode

Type (email: string, code: string) => Promise<void>

Callback to send the confirmation pin code to the user.

{
  sendCode: async (email, code) => {
    // Send an email with the code
  }
}

PasswordLoginError

Type { type: “invalid_password” } | { type: “invalid_email” }

The errors that can happen on the login screen.

Error	Description
invalid_email	The email is invalid.
invalid_password	The password is invalid.

PasswordRegisterError

Type { type: “invalid_code” } | { type: “email_taken” } | { type: “invalid_email” } | { type: “invalid_password” } | { type: “password_mismatch” }

The errors that can happen on the register screen.

Error	Description
email_taken	The email is already taken.
invalid_email	The email is invalid.
invalid_code	The code is invalid.
invalid_password	The password is invalid.
password_mismatch	The passwords do not match.

PasswordRegisterState

Type { type: “start” } | { code: string, email: string, password: string, type: “code” }

The states that can happen on the register screen.

State	Description
start	The user is asked to enter their email address and password to start the flow.
code	The user needs to enter the pin code to verify their email.