I'm using the @aws-amplify/ui-vue (2.1.2) and @aws-amplify/auth (4.4.1) npm packages along with Cognito to present user login to a webapp.

Whenever I create a new account and the user logs in for the first time to verify the name and change the temporary password, the user information and access credentials associated with the user's authenticated role are undefined. If the user reloads the page to sign in or signs out, then everything works as expected.

Is there a good way of ensuring the login session has defined credentials? How does one test the solution before it gets in front of a user?

<template>
  <authenticator :hide-sign-up="true">
    <template v-slot="{ user, signOut }">
      <!-- undef user fields 1st time only -->
      <p>Hello {{ user?.attributes?.name }}!</p>
      <!-- other AWS access, e.g. S3 reads, fail 1st time, too. -->
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>

<script>
import { Authenticator } from '@aws-amplify/ui-vue';
import '@aws-amplify/ui-vue/styles.css';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports'; // amplify config

Amplify.configure(awsconfig);

export default {
  name: 'App',
  components: {
    Authenticator
  },
  data() {
    return {}
  }
}
</script>