How to Read and Update Standard and Custom Attribute in Aws Cognito using React Amplify

Go to AWS Cognito Service

1. Open your user pool. Click Attribute menu on left sidebar.
2. Add a custom attribute (bio, in this example). type is string.
3. Set up a plain create-react-app project with aws-amplify and @aws-amplify/ui-react
4. Configure Amplify as per below configuration somewhere in your app.

let user = await Auth.currentAuthenticatedUser();
await Auth.updateUserAttributes(user, {
‘gender’: gender,
‘phone_number’: phone,
“address”: address,
‘birthdate’: moment(dob).format(‘MM/DD/YYYY’),
‘custom:bio’: bio //custom attribute
})

Reading Standard attribute is simple you just have to get the object key and the value will be return.

But When Reading Custom attribute the key will be in the form of colon.. custom:bio

How to Read that in Javascript ?

First time while login user i have send all the user data in my localStorage as shown in below picture

So to read the custom attribute and show on the view we can use the below code

JSON.parse(localStorage.getItem(‘users’))[‘custom:bio’]