fix(angular,vue): remove floating border between transitions (#1937)

* Remove `Auth.signIn` from `confirmSignUp` service

This should fail because we aren't setting intents yet.

* Implement "autoSignIn" redirect intent

* Fix incorrect json keys

* Remove verification step in autoSignIn

* Remove unused var

* Add autoSignIn route

* Add test for sms-mfa redirect after autosignin

* Revert "Fix incorrect json keys"

This reverts commit f0d954e.

* Create eight-insects-mix.md

* Create famous-vans-smile.md

* Edit wording

* Update eight-insects-mix.md

* Update packages/ui/src/machines/authenticator/actors/signIn.ts

Co-authored-by: Shane Laymance <[email protected]>

* Add hasRouteComponent function

* Use switch statement

* Fix state -> actorState

* Handle `signOut` too

* Fix typo

* Create twelve-suits-pump.md

* Update twelve-suits-pump.md

Co-authored-by: Shane Laymance <[email protected]>

Author: wlee221

.changeset/twelve-suits-pump.md

@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-vue": patch
+"@aws-amplify/ui-angular": patch
+---
+
+Removed floating border that appears between transitions in Vue and Angular Authenticator. 

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/authenticator/authenticator.component.html

@@ -1,7 +1,7 @@
 <div
   data-amplify-authenticator
   [attr.data-variation]="variation"
-  *ngIf="route !== 'authenticated'"
+  *ngIf="hasRouteComponent()"
 >
   <div data-amplify-container>
     <amplify-slot name="header" [context]="context"></amplify-slot>

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/authenticator/authenticator.component.ts

@@ -171,10 +171,25 @@ export class AuthenticatorComponent
   }
 
   public hasTabs() {
-    const route = this.authenticator.route;
+    const { route } = this.authenticator;
     return route === 'signIn' || route === 'signUp';
   }
 
+  public hasRouteComponent() {
+    const { route } = this.authenticator;
+
+    switch (route) {
+      case 'authenticated':
+      case 'idle':
+      case 'setup':
+      case 'signOut':
+      case 'autoSignIn':
+        return false;
+      default:
+        return true;
+    }
+  }
+
   private mapCustomComponents(
     componentQuery: QueryList<AmplifySlotDirective>
   ): Record<string, TemplateRef<any>> {

packages/vue/src/components/authenticator.vue

@@ -242,14 +242,24 @@ const hasTabs = computed(() => {
     actorState.value?.matches('signIn') || actorState.value?.matches('signUp')
   );
 });
+
+const hasRouteComponent = computed(() => {
+  return !(
+    state.value.matches('authenticated') ||
+    state.value.matches('idle') ||
+    state.value.matches('setup') ||
+    state.value.matches('signOut') ||
+    actorState.value?.matches('autoSignIn')
+  );
+});
 </script>
 
 <template>
   <div
     v-bind="$attrs"
     data-amplify-authenticator
     :data-variation="variation"
-    v-if="!state?.matches('authenticated')"
+    v-if="hasRouteComponent"
   >
     <div data-amplify-container>
       <slot name="header"> </slot>