fix(vue): remove mock facade values code (#4061)

* Remove dependency on mock facade

* Update comment

* Remove //@ts-ignore

* useAuthenticatorValue cleanup

* Update packages/vue/src/composables/useAuth.ts

* Update packages/vue/src/composables/useAuth.ts

* Update packages/vue/src/composables/useAuth.ts

* Update tests

* fix typo

* Update packages/vue/src/composables/__tests__/useAuthenticator.spec.ts

packages/vue/src/composables/__tests__/useAuthenticator.spec.ts

@@ -20,6 +20,7 @@ class MockAuthService {
 
 const mockServiceFacade = {
   authStatus: 'authenticated',
+  socialProviders: ['amazon'],
 } as unknown as AuthenticatorServiceFacade;
 
 const getServiceFacadeSpy = jest
@@ -54,13 +55,19 @@ describe('useAuthenticator', () => {
   it('returns the expected values', () => {
     const wrapper = mount(TestComponent);
 
+    expect(wrapper.vm.authStatus).toBe('unauthenticated');
+    expect(wrapper.vm.socialProviders).toStrictEqual(['amazon']);
+    wrapper.unmount();
+  });
+
+  it('calls getServiceFacade once on initial mount', () => {
+    const wrapper = mount(TestComponent);
+
     expect(getServiceFacadeSpy).toBeCalledTimes(1);
     expect(getServiceFacadeSpy).toBeCalledWith({
       send: mockSend,
       state: mockState.value,
     });
-
-    expect(wrapper.vm.authStatus).toBe('unauthenticated');
     wrapper.unmount();
   });
 

packages/vue/src/composables/useAuth.ts

@@ -14,7 +14,6 @@ import {
 } from '@aws-amplify/ui';
 
 import { UseAuth } from '../types';
-import { facade } from './useUtils';
 
 export const useAuth = createSharedComposable((): UseAuth => {
   const machine = createAuthenticatorMachine();
@@ -53,20 +52,25 @@ export const useAuth = createSharedComposable((): UseAuth => {
 export const useAuthenticator = createSharedComposable(() => {
   const { authStatus, state, send } = useAuth();
 
-  const useAuthenticatorValue = reactive({
-    ...facade,
-    send,
-    state,
-  }) as any;
+  // TODO(BREAKING): remove the cast to any
+  const useAuthenticatorValue = reactive({}) as any;
 
+  /*
+   * Note that watchEffect runs immediately, so `useAuthenticatorValue` is
+   * guaranteed to have facade values by the time `useAuthenticator` returns.
+   *
+   * https://vuejs.org/api/reactivity-core.html#watcheffect
+   */
   watchEffect(() => {
-    const facadeValues = getServiceFacade({
-      send,
-      state: state.value,
-    });
+    const facade = getServiceFacade({ send, state: state.value });
+
+    /*
+     * TODO(BREAKING): consider using a plain object with `refs` instead of
+     * one `reactive` object to prevent iterating manually over its keys.
+     */
     for (const key of Object.keys(facade)) {
       //@ts-ignore
-      useAuthenticatorValue[key] = facadeValues[key];
+      useAuthenticatorValue[key] = facade[key];
     }
     useAuthenticatorValue.authStatus = authStatus.value;
     useAuthenticatorValue.send = send;