<ChangeCredential />

The ChangeCredential component renders a form that lets a signed-in user set a new value for one of their own credentials. It collects only a new value and its confirmation, checks it against the applicable rules as the user types, and posts the change to ThunderID.

It reads the rules it needs from the user type schema already resolved by ThunderIDProvider (GET /users/me/meta), so it adds no network request beyond the write itself. Every default label, placeholder, and message is built from the credential attribute's own displayName in that schema, so it always matches whatever an admin named it there.

By default it manages the password credential. To manage a different one, for example a PIN declared on the user type schema, set attribute; render the component once per credential to let a user manage more than one.

note

ChangeCredential collects only a new value and its confirmation, not the account's existing value. The self-service credential write path does not verify the current value today, so asking for one would only teach the user a false sense of security. Once server-side current-value verification ships, that field returns without a breaking change to this component's public props.

Usage

Basic Usage

src/AccountPage.jsx

jsx

import { ChangeCredential } from '@thunderid/react'

function AccountPage() {
  return (
    <div>
      <h2>Security</h2>
      <ChangeCredential />
    </div>
  )
}

export default AccountPage

Managing a Different Credential

Render one instance per credential the user type schema declares, keyed by its attribute name:

src/AccountPage.jsx

jsx

import { ChangeCredential } from '@thunderid/react'

function AccountPage() {
  return (
    <>
      <ChangeCredential attribute="password" />
      <ChangeCredential attribute="pin" />
    </>
  )
}

export default AccountPage

Custom Title

Pass an empty string to omit the heading entirely, for example when the surrounding layout (a card header, a dialog title) already names the credential:

src/AccountPage.jsx

jsx

import { ChangeCredential } from '@thunderid/react'

function AccountPage() {
  return (
    <section>
      <h2>Password</h2>
      <ChangeCredential title="" />
    </section>
  )
}

export default AccountPage

Props

Prop	Type	Required	Description
attribute	string	❌	The credential attribute this instance manages, any attribute the user type schema declares credential: true for. Defaults to 'password'.
cardLayout	boolean	❌	Whether to wrap the form in a bordered card. Defaults to false.
className	string	❌	Additional CSS class names.
onSuccess	() => void	❌	Called after the credential has been changed successfully.
policy	PasswordPolicy	❌	The rules the new value must satisfy. Defaults to the applicable rules from the user type schema.
preferences	Preferences	❌	Component-level preference overrides, including i18n.
showRequirements	boolean	❌	Whether to render the live requirement checklist. Defaults to true.
title	string	❌	Overrides the default "Change {credential}" heading. Pass an empty string to omit the heading entirely. Defaults to a translated, schema-derived heading.