Frontend Dev's GuideProfile Management

Profile Management

This document includes a sample frontend guide for profile management of a specific application designed, built and deployed in Mindbricks. The application name is TickatMe, and please note that any information referencing to tickatme should be considered as an example for your own project.

Profile Page

Design a profile page to manage (view and edit) user information. The profile page should upload the user avatar using the auth service's database bucket (dbBucket) — upload to POST {authBaseUrl}/bucket/userAvatars/upload with the regular access token (multipart form-data), then use the returned accessKey to build the public download URL: GET {authBaseUrl}/bucket/userAvatars/download/key/{accessKey}. Store this URL as the user's avatar property. For other file storage needs, see the Bucket Management section above.

On the profile page, you will need 4 business APIs: getUser , updateProfile, updateUserPassword and archiveProfile. Do not rely on the /currentuser response for profile data, because it contains session information. The most recent user data is in the user database and should be accessed via the getUser business API.

The updateProfile, updateUserPassword and archiveProfile api can only be called by the users themselves. They are designed specific to the profile page.

The avatar upload component should include an image-cropping component with zoom and pan capabilities. The frontend will send the image to the bucket after it is scaled and cropped.

Do not implement your own cropping component; instead, use the library component react-easy-crop by installing it.

Note that the user cannot change/update their primary login identifier (email when email is primary, mobile when mobile is primary, or both when using emailOrMobile) or roleId.

For password update you should make a separate block in the UI, so that user can enter old password, new password and confirm new password before calling the updateUserPassword.

Here are the 3 auth APIs—getUser , updateProfile and updateUserPassword— as follows: You can access these APIs through the auth service base URL, {appUrl}/auth-api.

Get User API

This api is used by admin roles or the users themselves to get the user profile information.

Rest Route

The getUser API REST controller can be triggered via the following route:

/v1/users/:userId

Rest Request Parameters

The getUser api has got 1 request parameter

ParameterTypeRequiredPopulation
userIdIDtruerequest.params?.userId

userId : This id paremeter is used to query the required data object.

REST Request To access the api you can use the REST controller with the path GET /v1/users/:userId

axios({
  method: "GET",
  url: `/v1/users/${userId}`,
  data: {},
  params: {},
});

REST Response

{
  "status": "OK",
  "statusCode": "200",
  "elapsedMs": 126,
  "ssoTime": 120,
  "source": "db",
  "cacheKey": "hexCode",
  "userId": "ID",
  "sessionId": "ID",
  "requestId": "ID",
  "dataName": "user",
  "method": "GET",
  "action": "get",
  "appVersion": "Version",
  "rowCount": 1,
  "user": {
    "id": "ID",
    "email": "String",
    "password": "String",
    "fullname": "String",
    "avatar": "String",
    "roleId": "String",
    "mobile": "String",
    "mobileVerified": "Boolean",
    "emailVerified": "Boolean",
    "storeId": "ID",
    "isActive": true,
    "recordVersion": "Integer",
    "createdAt": "Date",
    "updatedAt": "Date",
    "_owner": "ID"
  }
}

Update Profile API

This route is used by users to update their profiles.

Rest Route

The updateProfile API REST controller can be triggered via the following route:

/v1/profile/:userId

Rest Request Parameters

The updateProfile api has got 4 request parameters

ParameterTypeRequiredPopulation
userIdIDtruerequest.params?.userId
fullnameStringfalserequest.body?.fullname
avatarStringfalserequest.body?.avatar
mobileStringfalserequest.body?.mobile

userId : This id paremeter is used to select the required data object that will be updated fullname : A string value to represent the fullname of the user avatar : The avatar url of the user. A random avatar will be generated if not provided mobile : A string value to represent the user's mobile number in E.164 format (e.g. +905551234567). The backend normalizes mobile numbers to this format automatically. This field is only available when the mobile field exists in the user data model (depends on primaryLoginIdentifier and secondaryIdentifierPresence). When mobile is the primary login identifier, it cannot be updated through the profile.

REST Request To access the api you can use the REST controller with the path PATCH /v1/profile/:userId

axios({
  method: "PATCH",
  url: `/v1/profile/${userId}`,
  data: {
    fullname: "String",
    avatar: "String",
    mobile: "String",
  },
  params: {},
});

REST Response

{
  "status": "OK",
  "statusCode": "200",
  "elapsedMs": 126,
  "ssoTime": 120,
  "source": "db",
  "cacheKey": "hexCode",
  "userId": "ID",
  "sessionId": "ID",
  "requestId": "ID",
  "dataName": "user",
  "method": "PATCH",
  "action": "update",
  "appVersion": "Version",
  "rowCount": 1,
  "user": {
    "id": "ID",
    "email": "String",
    "password": "String",
    "fullname": "String",
    "avatar": "String",
    "roleId": "String",
    "mobile": "String",
    "mobileVerified": "Boolean",
    "emailVerified": "Boolean",
    "storeId": "ID",
    "isActive": true,
    "recordVersion": "Integer",
    "createdAt": "Date",
    "updatedAt": "Date",
    "_owner": "ID"
  }
}

Update Userpassword API

This route is used to update the password of users in the profile page by users themselves

Rest Route

The updateUserPassword API REST controller can be triggered via the following route:

/v1/userpassword/:userId

Rest Request Parameters

The updateUserPassword api has got 3 request parameters

ParameterTypeRequiredPopulation
userIdIDtruerequest.params?.userId
oldPasswordStringtruerequest.body?.oldPassword
newPasswordStringtruerequest.body?.newPassword

userId : This id paremeter is used to select the required data object that will be updated oldPassword : The old password of the user that will be overridden bu the new one. Send for double check. newPassword : The new password of the user to be updated

REST Request To access the api you can use the REST controller with the path PATCH /v1/userpassword/:userId

axios({
  method: "PATCH",
  url: `/v1/userpassword/${userId}`,
  data: {
    oldPassword: "String",
    newPassword: "String",
  },
  params: {},
});

REST Response

{
  "status": "OK",
  "statusCode": "200",
  "elapsedMs": 126,
  "ssoTime": 120,
  "source": "db",
  "cacheKey": "hexCode",
  "userId": "ID",
  "sessionId": "ID",
  "requestId": "ID",
  "dataName": "user",
  "method": "PATCH",
  "action": "update",
  "appVersion": "Version",
  "rowCount": 1,
  "user": {
    "id": "ID",
    "email": "String",
    "password": "String",
    "fullname": "String",
    "avatar": "String",
    "roleId": "String",
    "mobile": "String",
    "mobileVerified": "Boolean",
    "emailVerified": "Boolean",
    "storeId": "ID",
    "isActive": true,
    "recordVersion": "Integer",
    "createdAt": "Date",
    "updatedAt": "Date",
    "_owner": "ID"
  }
}

Archiving A Profile

A user may want to archive their profile. So the profile page should include an archive section for the users to archive their accounts. When an account is archived, it is marked as archived and an aarchiveDate is atteched to the profile. All user data is kept in the database for 1 month after user archived. If the user tries to login or register with the same login identifier (email or mobile, depending on primaryLoginIdentifier), the account will be activated again. But if no login or register occures in 1 month after archiving, the profile and its related data will be deleted permanenetly. So in the profile page,

  1. The arcihve options should be accepted after user writes a text like ("ARCHİVE MY ACCOUNT") to a confirmation dialog, so that frontend UX can ensure this is not an unconscious request.

  2. The user should be warned about the process, that his account will be available for a restore for 1 month.

The archive api, can only be called by the users themselves and its used as follows.

Archive Profile API

This api is used by users to archive their profiles.

Rest Route

The archiveProfile API REST controller can be triggered via the following route:

/v1/archiveprofile/:userId

Rest Request Parameters

The archiveProfile api has got 1 request parameter

ParameterTypeRequiredPopulation
userIdIDtruerequest.params?.userId

userId : This id paremeter is used to select the required data object that will be deleted

REST Request To access the api you can use the REST controller with the path DELETE /v1/archiveprofile/:userId

axios({
  method: "DELETE",
  url: `/v1/archiveprofile/${userId}`,
  data: {},
  params: {},
});

REST Response

{
  "status": "OK",
  "statusCode": "200",
  "elapsedMs": 126,
  "ssoTime": 120,
  "source": "db",
  "cacheKey": "hexCode",
  "userId": "ID",
  "sessionId": "ID",
  "requestId": "ID",
  "dataName": "user",
  "method": "DELETE",
  "action": "delete",
  "appVersion": "Version",
  "rowCount": 1,
  "user": {
    "id": "ID",
    "email": "String",
    "password": "String",
    "fullname": "String",
    "avatar": "String",
    "roleId": "String",
    "mobile": "String",
    "mobileVerified": "Boolean",
    "emailVerified": "Boolean",
    "storeId": "ID",
    "isActive": false,
    "recordVersion": "Integer",
    "createdAt": "Date",
    "updatedAt": "Date",
    "_owner": "ID"
  }
}

After you complete this step, please ensure you have not made the following common mistakes:

  1. Note that any api call to the application backend is based on a service base url, in this propmpt all auth apis should be called by /auth-api prefix after application's base url, and bucket apis should be called by /bucket prefix after base url.

  2. Avatar uploads use dbBuckets (database buckets) in the auth service, not the external bucket service. Upload to POST {authBaseUrl}/bucket/userAvatars/upload using the regular access token. The external bucket service and its tokens (userBucketToken, applicationBucketToken) are for non-avatar files like documents and product images.

  3. On the profile page, fetch the latest user data from the service using getUser. The /currentuser API is session-stored data; the latest data is in the database.

  4. When you upload the avatar image on the profile page, use the returned download URL (built from the accessKey) as the user's avatar property and update the user record when the Save button is clicked.