Unexpected Behavor at implementing Per User Authorization Feature.

[agustinmoranr]

Issue Explanation:

While doing the Quickstart guide for the Amplify Gen-2 I found a confuse behavor at implementing the per user authorization feature.
Here:

Due to the initial code of the amplify-vite-react-template at App.tsx the Per User Authorization feature won't work correctly, because if the user changes between to accounts to validate that the Per User Authorization works, the data got stock to the previous account:

amplify-quickstart-react-error.mp4

In the example above, the account with email: [email protected] has 2 todos items written in Spanish, while the other account: [email protected] has 2 todos items written in English. As you can see when changing the account, the data got stuck and i need to reload the page to update the data.

I think this is not expected to happened because in the quickstart guide you are meant to use subscription method to query your data.

Request of changes:

I think one of the easiest ways of solving this is moving the TodosList to a separated component.
Something like this:

This way when the user implements the Authenticator component, the TodosList will be unmounted and mounted correctly, and updating subscription query data, retrieving the expected data for each user.

Maybe you can upadate the quickstart documentation to handle this properly, or maybe updating the template also would work!

[heeen]

I added user as a dependency to the query effect like this:

  const { user, signOut } = useAuthenticator();
  useEffect(() => {
    client.models.Todo.observeQuery().subscribe({
      next: (data) => setTodos([...data.items]),
    });
  }, [user]);