跳到主要内容

Account settings by prebuilt Account Center UI

What is the prebuilt Account Center UI​

Logto provides a prebuilt Account Center UI that offers ready-to-use pages for end users to manage their account settings. This prebuilt UI is hosted by Logto and handles common account management tasks including:

  • Updating email address
  • Updating phone number
  • Updating username
  • Setting or updating password
  • Managing MFA settings (TOTP authenticator app, passkeys, backup codes)

The prebuilt Account Center UI is designed to work seamlessly with your application, providing a consistent user experience without requiring you to build custom account management pages.

Benefits of using the prebuilt UI​

  • Zero development effort: Ready-to-use pages that work out of the box
  • Consistent experience: Matches the look and feel of Logto's sign-in experience
  • Security built-in: All verification flows and security measures are handled automatically
  • Always up-to-date: New features and security improvements are automatically available

Available pages​

The prebuilt Account Center UI provides the following pages, all accessible under the /account path of your Logto tenant endpoint:

PathDescription
/account/emailUpdate primary email address
/account/phoneUpdate primary phone number
/account/usernameUpdate username
/account/passwordSet or update password
/account/passkey/addAdd a new passkey (WebAuthn)
/account/passkey/manageView and manage existing passkeys
/account/authenticator-appSet up TOTP authenticator app
/account/backup-codes/generateGenerate new backup codes
/account/backup-codes/manageView and manage backup codes

For example, if your tenant endpoint is https://example.logto.app, the email update page would be available at https://example.logto.app/account/email.

How to use the prebuilt UI​

Step 1: Enable Account API​

The prebuilt Account Center UI relies on the Account API. Navigate to Console > Sign-in & account > Account center and enable the Account API.

Configure the field permissions according to your needs:

  • Set fields to Edit to allow users to modify them
  • Set fields to ReadOnly if users should only view them
  • Set fields to Off to hide them completely

To use the prebuilt Account Center UI, you need to redirect users from your application to the appropriate Logto pages. There are two approaches:

Approach A: Direct linking with redirect parameter​

Add links in your application that redirect users to the prebuilt pages. Include a redirect query parameter to bring users back to your app after they complete the action:

https://[tenant-id].logto.app/account/email?redirect=https://your-app.com/settings

When users complete updating their email, they will be redirected back to https://your-app.com/settings.

Approach B: Embedding in your account settings flow​

You can integrate the prebuilt pages into your existing account settings workflow:

  1. In your app's account settings page, show the user's current information
  2. Provide "Edit" or "Update" buttons that link to the corresponding prebuilt pages
  3. After the user completes the action, they are redirected back to your app

Example implementation:

function AccountSettings() {
  const tenantEndpoint = 'https://example.logto.app';
  const redirectUrl = encodeURIComponent(window.location.href);

  return (
    <div>
      <h2>Account Settings</h2>

      <div>
        <span>Email: user@example.com</span>
        <a href={`${tenantEndpoint}/account/email?redirect=${redirectUrl}`}>Update Email</a>
      </div>

      <div>
        <span>Password: ••••••••</span>
        <a href={`${tenantEndpoint}/account/password?redirect=${redirectUrl}`}>Change Password</a>
      </div>

      <div>
        <span>MFA: Not configured</span>
        <a href={`${tenantEndpoint}/account/authenticator-app?redirect=${redirectUrl}`}>
          Set up Authenticator
        </a>
      </div>
    </div>
  );
}

Step 3: Handle success redirects​

After users complete an action, they will be redirected to your specified URL with an optional show_success query parameter. You can use this to display a success message:

function SettingsPage() {
  const searchParams = new URLSearchParams(window.location.search);
  const showSuccess = searchParams.get('show_success');

  return (
    <div>
      {showSuccess === 'email' && <div>Email updated successfully!</div>}
      {showSuccess === 'password' && <div>Password updated successfully!</div>}
      {/* ... rest of your settings page */}
    </div>
  );
}

Security considerations​

The prebuilt Account Center UI includes built-in security measures:

  • Identity verification: Before making sensitive changes (email, phone, password, MFA), users must verify their identity using their current password or existing verification method
  • Verification codes: Email and phone updates require verification codes sent to the new address/number
  • Session validation: All operations validate the user's session to prevent unauthorized access

Customization options​

The prebuilt Account Center UI inherits the branding from your sign-in experience settings, including:

  • Logo and colors
  • Dark/light mode
  • Language settings

If you need more customization beyond what the prebuilt UI offers, consider using the Account API to build your own custom account management pages.