Skip to main content

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 and phone number
  • Updating username
  • Setting or updating password
  • Managing social connections (link and unlink social accounts)
  • Managing MFA settings (TOTP authenticator app, passkeys, backup codes)
  • Toggling 2-step verification on or off
  • Managing active sessions and authorized apps

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/securitySecurity settings hub (2-step verification, social accounts, sessions)
/account/emailUpdate or remove primary email address
/account/phoneUpdate or remove 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/authenticator-app/replaceReplace existing 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>
  );
}

Supported URL parameters​

You can append the following query parameters to any Account Center URL to tailor the experience:

ParameterDescription
redirectThe absolute URL to send the user back to after they complete the action. Only http(s) URLs are accepted.
show_successWhen set to true, the success destination (e.g., your redirect URL) receives a show_success query parameter so you can display a confirmation message.
identifierPre-fills the identifier input on the target page (/account/email, /account/phone, /account/username). Useful for deep-linking from your app when you already know the user's identifier.
ui_localesSpace-separated list of BCP-47 language tags (e.g., fr-CA fr en) that controls the Account Center UI language. Falls back to the user's browser language if omitted.

Example — deep-link to the email update page with the current email pre-filled and French UI:

https://[tenant-id].logto.app/account/email?identifier=user@example.com&ui_locales=fr&redirect=https://your-app.com/settings
note:

The identifier value is stored in session storage before the sign-in redirect and consumed once by the target page.

The Account Center does not handle account deletion directly. Instead, you can configure an Account deletion URL that points to your own deletion flow (typically backed by the Management API). When configured, a Delete your account entry appears on the Account Center security page and links the user to your URL.

To configure it, navigate to Console > Sign-in & account > Account center and set the Account deletion URL field. You can also update it via the Management API:

curl -X PATCH https://[tenant-id].logto.app/api/account-center \
  -H 'authorization: Bearer <access_token>' \
  -H 'content-type: application/json' \
  --data-raw '{"deleteAccountUrl":"https://your-app.com/delete-account"}'

Leave the field empty (or set deleteAccountUrl to null) to hide the account deletion entry.

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

Custom CSS​

You can further customize the appearance of the Account Center UI by adding custom CSS. Navigate to Console > Sign-in & account > Account center, and add your custom CSS in the Custom CSS editor.

The prebuilt Account Center UI provides stable CSS class names prefixed with logto_ac- on key UI elements (layout containers, page headers, sections, cards, etc.) for easy targeting. This allows you to override default styles without worrying about class name changes between releases.

Example:

/* Hide the Logto signature */
.logto_ac-logto-signature {
  display: none;
}

/* Customize the security section card */
.logto_ac-security-card {
  border-radius: 12px;
}

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