PasswordUI

Configure the UI that’s used by the Password provider.

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

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

---

Methods

PasswordUI

PasswordUI(input)

Parameters

• input PasswordUIOptions

  Configure the UI.

Returns PasswordConfig

Creates a UI for the Password provider flow.

PasswordUIOptions

• copy? Object

  • button_continue string

  • change_prompt string

  • code_resend string

  • code_return string

  • error_email_taken string

  • error_invalid_code string

  • error_invalid_email string

  • error_invalid_password string

  • error_password_mismatch string

  • error_validation_error string

  • input_code string

  • input_email string

  • input_password string

  • input_repeat string

  • login string

  • login_description string

  • login_prompt string

  • login_title string

  • register string

  • register_description string

  • register_prompt string

  • register_title string

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

• validatePassword? any

Configure the password UI.

PasswordUIOptions.copy?

Type Object

Custom copy for the UI.

PasswordUIOptions.copy.button_continue

Type string

Default “Continue”

Copy for the continue button.

PasswordUIOptions.copy.change_prompt

Type string

Default “Forgot password?”

Copy for the forgot password link.

PasswordUIOptions.copy.code_resend

Type string

Default “Resend code”

Copy for the resend code button.

PasswordUIOptions.copy.code_return

Type string

Default “Back to”

Copy for the “Back to” link.

PasswordUIOptions.copy.error_email_taken

Type string

Default “There is already an account with this email.”

Error message when email is already taken.

PasswordUIOptions.copy.error_invalid_code

Type string

Default “Code is incorrect.”

Error message when the confirmation code is incorrect.

PasswordUIOptions.copy.error_invalid_email

Type string

Default “Email is not valid.”

Error message when the email is invalid.

PasswordUIOptions.copy.error_invalid_password

Type string

Default “Password is incorrect.”

Error message when the password is incorrect.

PasswordUIOptions.copy.error_password_mismatch

Type string

Default “Passwords do not match.”

Error message when the passwords do not match.

PasswordUIOptions.copy.error_validation_error

Type string

Default “Password does not meet requirements.”

Error message when the user enters a password that fails validation.

PasswordUIOptions.copy.input_code

Type string

Default “Code”

Copy for the code input.

PasswordUIOptions.copy.input_email

Type string

Default “Email”

Copy for the email input.

PasswordUIOptions.copy.input_password

Type string

Default “Password”

Copy for the password input.

PasswordUIOptions.copy.input_repeat

Type string

Default “Repeat password”

Copy for the repeat password input.

PasswordUIOptions.copy.login

Type string

Default “Login”

Copy for the login button.

PasswordUIOptions.copy.login_description

Type string

Default “Sign in with your email”

Description of the login page.

PasswordUIOptions.copy.login_prompt

Type string

Default “Already have an account?”

Copy for the login link.

PasswordUIOptions.copy.login_title

Type string

Default “Welcome to the app”

Title of the login page.

PasswordUIOptions.copy.register

Type string

Default “Register”

Copy for the register button.

PasswordUIOptions.copy.register_description

Type string

Default “Sign in with your email”

Description of the register page.

PasswordUIOptions.copy.register_prompt

Type string

Default “Don’t have an account?”

Copy for the register link.

PasswordUIOptions.copy.register_title

Type string

Default “Welcome to the app”

Title of the register page.

PasswordUIOptions.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
  }
}

PasswordUIOptions.validatePassword?

Type any

Callback to validate the password on sign up and password reset.

{
  validatePassword: (password) => {
     return password.length < 8 ? "Password must be at least 8 characters" : undefined
  }
}