Authenticator - Sign in only on request

To achieve your desired behavior with Amplify Gen 2 and Vue using the AWS Authenticator, you'll need to modify your approach slightly. Instead of wrapping your entire app in the Authenticator component, you should handle the authentication flow manually. Here's how you can adjust your code:

1. Remove the Authenticator wrapper from your main app component.

2. Use the Amplify Auth API to check the user's authentication status when the app loads.

3. Implement a sign-in button that triggers the authentication flow when clicked.

4. After successful authentication, reload the app or update the user state.

Here's an example of how you could structure your main app component:

<template>
  <v-app>
    <v-main>
      <template v-if="isAuthenticating">
        <Authenticator @signIn="handleSignIn" />
      </template>
      <template v-else>
        <Main :myUser="user" @signIn="startAuthFlow" @signOut="handleSignOut" />
      </template>
    </v-main>
  </v-app>
</template>

<script>
import { Auth } from 'aws-amplify';
import { Authenticator } from '@aws-amplify/ui-vue';
import { ref, onMounted } from 'vue';

export default {
  components: { Authenticator, Main },
  setup() {
    const user = ref(null);
    const isAuthenticating = ref(false);

    const checkAuthState = async () => {
      try {
        const authUser = await Auth.currentAuthenticatedUser();
        user.value = authUser;
      } catch (error) {
        user.value = null;
      }
    };

    const startAuthFlow = () => {
      isAuthenticating.value = true;
    };

    const handleSignIn = (authUser) => {
      user.value = authUser;
      isAuthenticating.value = false;
    };

    const handleSignOut = async () => {
      await Auth.signOut();
      user.value = null;
    };

    onMounted(checkAuthState);

    return {
      user,
      isAuthenticating,
      startAuthFlow,
      handleSignIn,
      handleSignOut,
    };
  },
};
</script>

In this setup:

1. The app checks the authentication state on mount using Auth.currentAuthenticatedUser().
2. If the user is not signed in, the Main component is rendered with user set to null.
3. When the sign-in button in the Main component is clicked, it emits a signIn event, which sets isAuthenticating to true and shows the Authenticator.
4. After successful authentication, the handleSignIn function updates the user state and hides the Authenticator.
5. The Main component receives the user information and can display a sign-out button when the user is authenticated.

This approach allows you to control when the authentication flow is triggered and provides a seamless experience for both new and returning users.

Remember to handle the sign-out process in your Main component by emitting a signOut event when the user clicks the sign-out button. This will trigger the handleSignOut function in the parent component, which will clear the user state and sign the user out of the Amplify Auth session.

Sources
Authenticator is not redirecting user to login page after account verification code is entered | AWS re:Post
Add Auth / User Sign-in - AWS Mobile Hub
Add Auth / User Sign-in - AWS Mobile Hub