Account Extension

Overview

Discover how the Account Management Extension enhances the Web SDK by offering streamlined tools for managing user accounts efficiently. This extension is essential for developers integrating complex user account actions such as information retrieval and updates, password management, and verification processes within their web applications.

Installation

To install the Credenza Account Management Extension, use the following npm command:

npm i @credenza3/core-web-account-ext

import { AccountExtension } from '@credenza3/core-web-account-ext';

Create SDK Instance

To set up the SDK instance using the Account Management Extension, you need to create a new instance of CredenzaSDK and include the AccountExtension in the extensions array.

Here's how you can achieve this:

const sdk = new CredenzaSDK({
  extensions: [new AccountExtension()],
  // other sdk params
});

Methods and Properties

Retrieve User Info

sdk.account.info(): Promise<User>

type User {
  aud: string;
  email: string;
  exp: number;
  iat: number;
  iss: string;
  login_type: string;
  name: string;
  nonce: string;
  phone: string;
  scope: string;
  sub: string;
  token_type: string;
  token_use: string;
}

Retrieve user information using the SDK by making an API call. Here's the process.

Utilize sdk.account.info() to make an API call that returns the user object. This method fetches user details from the server and provides you with an object containing user data.

const user = await sdk.account.info();
console.log(user);
 

Update Profile Data

sdk.account.updateProfile(data: { name?: string; picture?: string }):Promise<void>

To update user profile data, use the updateProfile method. This allows you to modify user attributes such as name and picture. Ensure you have the updated values ready before making the call.

Here is a code snippet demonstrating how to update the user's name and picture URL using the AccountExtension instance.

await sdk.account.updateProfile({
  name: 'New Name',
  picture: 'https://example.com/new-picture.jpg'
});

Parameters: * name (string, optional): The new name of the user. * picture (string, optional): The new URL of the user's profile picture.

Change Password

sdk.account.changePassword(data: { oldPassword: string; newPassword: string; confirmPassword: string }) :Promise<void>

In this section, you'll learn how to change the user's password using the AccountExtension of the Credenza SDK. This process is restricted to users logged in with credentials.

Use the changePassword method to update the user's password. The method requires the current (oldPassword) and new passwords (newPassword and confirmPassword).

Here is an example code snippet:

await sdk.account.changePassword({
  oldPassword: 'old-password',
  newPassword: 'new-password',
  confirmPassword: 'new-password'
})

Modify Email Address

sdk.account.changeEmail(email: string) : Promise<void>

sdk.account.verifyCode(code: string) : Promise<void>

To change the user's email address using the Credenza SDK, follow the steps below. This method is disabled for users logged in with social networks.

Call the method to change the email, passing the new email as a parameter.

await sdk.account.verifyCode(code: string)

Verify the email change by passing the code received in the verification email.

await sdk.account.changeEmail(email: string)

Alter Phone Number

sdk.account.changePhone(data: { phone: string }) : Promise<void>

To change your phone number, make sure you are not logged in via social networks. Use the changePhone method and provide the new phone number. Follow up with the verifyCode method to complete verification.

await sdk.account.changePhone({ phone: 'new-phone-number' })

You'll receive a verification code via SMS. To verify, use the verifyCode method.

await sdk.account.verifyCode({ code: 'received-code' })

Check any pending verifications to see unverified contact data.

const pending = await sdk.account.pendingVerificationContacts()

Check Pending Verifications

sdk.account.pendingVerificationContacts() :Promise<PendingVerifications>

To check for pending verifications, you can use the pendingVerificationContacts method from the SDK. This will allow you to display any unverified contact data, such as email addresses and phone numbers.

Here's how you can implement this in your code:

const pending = await sdk.account.pendingVerificationContacts();
console.log('Pending verifications:', pending);

type PendingVerifications {
 email?: string;
 phone?: string;
}