fix(rna): refactor fed sign in (#4719)

aws-amplify · Nov 14, 2023 · f9e4fa8 · f9e4fa8
1 parent 2c5a8ac
commit f9e4fa8
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 8 deletions.
diff --git a/.changeset/plenty-meals-cross.md b/.changeset/plenty-meals-cross.md
@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react-native": patch
+"@aws-amplify/ui": patch
+---
+
+fix(rna): refactor fed sign in
diff --git a/examples/react-native/src/ui/components/authenticator/social-providers/Example.tsx b/examples/react-native/src/ui/components/authenticator/social-providers/Example.tsx
@@ -3,13 +3,10 @@ import { StyleSheet, View } from 'react-native';
 
 import { Authenticator } from '@aws-amplify/ui-react-native';
 import { Amplify } from 'aws-amplify';
-import { ConsoleLogger } from 'aws-amplify/utils';
 
 import { SignOutButton } from '../SignOutButton';
 import awsconfig from './aws-exports';
 
-// @ts-expect-error
-ConsoleLogger.LOG_LEVEL = 'DEBUG';
 Amplify.configure(awsconfig);
 
 function App() {

diff --git a/...act-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx b/...act-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
+import { signInWithRedirect } from 'aws-amplify/auth';
 
 import {
   SocialProvider,
@@ -16,13 +17,21 @@ import { getThemedStyles } from './styles';
 
 const { getSignInWithFederationText, getOrText } = authenticatorTextUtil;
 
+// use `signInWithRedirect` directly instead of `toFederatedSignIn`
+// exposed on `useAuthenticator` for RN. `@aws-amplify/rtn-web-browser`
+// does not emit an event on federated sign in flow cancellation,
+// preventing the `Authenticator` from updating state and leaving the
+// UI in a "pending" state
+const handleSignInWithRedirect = (
+  provider: 'amazon' | 'apple' | 'facebook' | 'google'
+) => signInWithRedirect({ provider: capitalize(provider) });
+
 export default function FederatedProviderButtons({
   buttonStyle,
   dividerLabelStyle,
   route,
   socialProviders,
   style,
-  toFederatedSignIn,
 }: FederatedProviderButtonsProps): JSX.Element | null {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
@@ -33,7 +42,7 @@ export default function FederatedProviderButtons({
         const providerIconSource = icons[`${provider}Logo`];
 
         const handlePress = () => {
-          toFederatedSignIn({ provider: capitalize(provider) });
+          handleSignInWithRedirect(provider);
         };
 
         return (
@@ -47,7 +56,7 @@ export default function FederatedProviderButtons({
           </FederatedProviderButton>
         );
       }),
-    [route, socialProviders, toFederatedSignIn, themedStyle, buttonStyle]
+    [route, socialProviders, themedStyle, buttonStyle]
   );
 
   return providerButtons?.length ? (

diff --git a/...Authenticator/common/FederatedProviderButtons/__tests__/FederatedProviderButtons.spec.tsx b/...Authenticator/common/FederatedProviderButtons/__tests__/FederatedProviderButtons.spec.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react-native';
+import * as AuthModule from 'aws-amplify/auth';
 
 import {
   AuthenticatorRoute,
@@ -43,7 +44,13 @@ describe('FederatedProviderButtons', () => {
     expect(toJSON()).toBe(null);
   });
 
-  it('calls toFederatedSignIn with the expected provider on press', () => {
+  it('calls signInWithRedirect with the expected provider on press', () => {
+    const signInWithRedirectSpy = jest
+      .spyOn(AuthModule, 'signInWithRedirect')
+      .mockImplementation((_?: AuthModule.SignInWithRedirectInput) =>
+        Promise.resolve(undefined)
+      );
+
     const { getByText } = render(
       <FederatedProviderButtons {...defaultProps} />
     );
@@ -55,7 +62,7 @@ describe('FederatedProviderButtons', () => {
 
     fireEvent.press(providerButton);
 
-    expect(toFederatedSignIn).toHaveBeenCalledWith({
+    expect(signInWithRedirectSpy).toHaveBeenCalledWith({
       provider: capitalize(provider),
     });
   });

diff --git a/packages/ui/src/helpers/authenticator/defaultAuthHubHandler.ts b/packages/ui/src/helpers/authenticator/defaultAuthHubHandler.ts
@@ -24,6 +24,10 @@ export const defaultAuthHubHandler: AuthMachineHubHandler = async (
       }
       break;
     }
+    case 'signInWithRedirect': {
+      send('SIGN_IN_WITH_REDIRECT');
+      break;
+    }
     case 'signedOut':
     case 'tokenRefresh_failure': {
       if (event === 'signedOut' && isFunction(onSignOut)) {

diff --git a/packages/ui/src/machines/authenticator/index.ts b/packages/ui/src/machines/authenticator/index.ts
@@ -276,6 +276,7 @@ export function createAuthenticatorMachine(
         },
       },
       on: {
+        SIGN_IN_WITH_REDIRECT: { target: '#authenticator.getCurrentUser' },
         CHANGE: { actions: 'forwardToActor' },
         BLUR: { actions: 'forwardToActor' },
         SUBMIT: { actions: 'forwardToActor' },

diff --git a/packages/ui/src/machines/authenticator/types.ts b/packages/ui/src/machines/authenticator/types.ts
@@ -81,6 +81,7 @@ export type AuthEventTypes =
   | 'RESEND'
   | 'FORGOT_PASSWORD'
   | 'AUTO_SIGN_IN_FAILURE'
+  | 'SIGN_IN_WITH_REDIRECT'
   | 'SIGN_IN'
   | 'SIGN_OUT'
   | 'SIGN_UP'