aws-amplify / aws-amplify/amplify-ui

FR (Authenticator): `useAuthenticator` to support responding to Auth.updateUserAttributes()

Open
#1,333 1 comment 4 reactions 0 assignees View on GitHub
Authenticator feature-request
Dominant language
TypeScript
Stars
1.1k
Forks
347
Avg merge
18h 29m
Merged PRs (30d)
9

Description

### On which framework/platform would you like to see this feature implemented?

React

### Which UI component is this feature-request for?

Authenticator

### Please describe your feature-request in detail.

My application has the user sign in and then displays their given name cognito attribute on several pages. I also have a user settings form where the user can change their first name, last name and email. When they save this form I do an Auth.updateUserAttributes call which works fine.

The issue is if I pull the user using the Authenticator.Provider context I only get the user object at the time of login. If I modify the user I will not see those changes unless I log out and back in.

In the documentation on this page: https://ui.docs.amplify.aws/components/authenticator#prevent-re-renders it says "For example, you can ensure useAuthenticator to only reevaluate when its user context changes" but I don't think there is currently a way to trigger a user context change.

### Please describe a solution you'd like.

A new way to update user attributes / password using useAuthenticator instead of Auth.updateUserAttributes or Auth.changePassword that would refresh the context user object so the application has access to the updated user.

### We love contributors! Is this something you'd be interested in working on?

- [ ] 👋 I may be able to implement this feature request.
- [ ] ⚠️ This feature might incur a breaking change.

------
@MadaShindeInai - [Deduped issue](https://github.com/aws-amplify/amplify-ui/issues/2495)
### Please describe your bug.

In my React 18 project i use Amplify `"@aws-amplify/ui-react": "^2.17.1"`, `"aws-amplify": "^4.3.22"`, and i faced with unexpected behaviour on my localhost. (everything was as expected in deployed version).

I doing `import { useAuthenticator } from '@aws-amplify/ui-react';` into my component to get user data (issue exists with both approaches):

const { user } = useAuthenticator();
const { user } = useAuthenticator((context) => [context.user]);

I also do `import { Auth } from 'aws-amplify';` and make a function to update user attribute - `given_name`.

const setAttr = async () => {
const user = await Auth.currentAuthenticatedUser();
await Auth.updateUserAttributes(user, { given_name: 'Eddie' });
const res = await Auth.currentAuthenticatedUser();
console.log(JSON.stringify(res.attributes));
};
After running this function i see correct value in `console.log(JSON.stringify(res.attributes));` inside function.
But `const { user } = useAuthenticator();` still see values from initial render (old name). I checked it by declaring `setInterval(() => console.log(user.attributes), 1000);` and comparing values.
So, value in context do not change => component do not re-render => i see old `given_name` until i reload page.

### What's the expected behaviour?

After changing `given_name` field, `useAuthenticator` track this change and cause a rerender not only on deployed version, but also on localhost with enabled React.StrictMode.

### Help us reproduce the bug!

It probably should appear in any CRA + amplify setup with enabled React.StrictMode.

### Code Snippet

```typescript
// Put your code below this line.

```

### Additional information and screenshots
#### The essence of the problem:
Removing `` from `index.tsx` in the root of a project solved the problem on localhost. However, [StrictMode](https://reactjs.org/docs/strict-mode.html) is important and helps avoid problems. So it will be cool, if Amplify UI will be compatible with it.
Original issue from stackoverflow:
https://stackoverflow.com/questions/73416383/aws-amplify-useauthenticator-hook-do-not-cause-a-re-render-on-user-attributes-f/73445435#73445435

Contributor guide

Open the contributing guide

Research direction

Start with the Authenticator.Provider and useAuthenticator behavior described in the issue, then reproduce the React StrictMode case using Auth.updateUserAttributes and Auth.currentAuthenticatedUser. Done means the context user reflects updated attributes and dependent components rerender without requiring logout, reload, or disabling StrictMode.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
authentication, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.