Merge pull request #18456 from mozilla/fxa-11207

fix(sms): Set signed in state to true in apolloClient after using recovery phone and code

Author: vbudhram

packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/index.tsx

@@ -2,10 +2,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { RouteComponentProps, useLocation } from '@reach/router';
 import { FtlMsg } from 'fxa-react/lib/utils';
-import { isWebIntegration, useFtlMsgResolver } from '../../../models';
+import { AppContext, isWebIntegration, useFtlMsgResolver } from '../../../models';
 import { BackupCodesImage } from '../../../components/images';
 import LinkExternal from 'fxa-react/components/LinkExternal';
 import FormVerifyCode, {
@@ -25,6 +25,7 @@ import Banner from '../../../components/Banner';
 import { HeadingPrimary } from '../../../components/HeadingPrimary';
 import ButtonBack from '../../../components/ButtonBack';
 import classNames from 'classnames';
+import { GET_LOCAL_SIGNED_IN_STATUS } from '../../../components/App/gql';
 
 export const viewName = 'signin-recovery-code';
 
@@ -52,6 +53,7 @@ const SigninRecoveryCode = ({
     'Backup authentication code required'
   );
   const location = useLocation();
+  const { apolloClient } = useContext(AppContext);
 
   const webRedirectCheck = useWebRedirect(integration.data.redirectTo);
 
@@ -143,6 +145,17 @@ const SigninRecoveryCode = ({
         // Update verification status of stored current account
         verified: true,
       });
+
+      // There seems to be a race condition with updating the cache and state,
+      // so we need to wait a bit before navigating to the next page. This is
+      // a temporary fix until we find a better solution, most likely with refactoring
+      // how we handle state in the app.
+      apolloClient?.cache.writeQuery({
+        query: GET_LOCAL_SIGNED_IN_STATUS,
+        data: { isSignedIn: true },
+      });
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
       onSuccessNavigate();
     }
 

packages/fxa-settings/src/pages/Signin/SigninRecoveryPhone/container.tsx

@@ -2,12 +2,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { RouteComponentProps, useLocation } from '@reach/router';
 import SigninRecoveryPhone from '.';
 import { SigninLocationState } from '../interfaces';
 import { getSigninState, handleNavigation } from '../utils';
 import {
+  AppContext,
   isWebIntegration,
   useAuthClient,
   useSensitiveDataClient,
@@ -27,11 +28,13 @@ import {
   SigninRecoveryPhoneContainerProps,
   SigninRecoveryPhoneLocationState,
 } from './interfaces';
+import { GET_LOCAL_SIGNED_IN_STATUS } from '../../../components/App/gql';
 
 const SigninRecoveryPhoneContainer = ({
   integration,
 }: SigninRecoveryPhoneContainerProps & RouteComponentProps) => {
   const authClient = useAuthClient();
+  const { apolloClient } = useContext(AppContext);
   const location = useLocation() as ReturnType<typeof useLocation> & {
     state: SigninRecoveryPhoneLocationState;
   };
@@ -84,6 +87,16 @@ const SigninRecoveryPhoneContainer = ({
         verified: true,
       });
 
+      // There seems to be a race condition with updating the cache and state,
+      // so we need to wait a bit before navigating to the next page. This is
+      // a temporary fix until we find a better solution, most likely with refactoring
+      // how we handle state in the app.
+      apolloClient?.cache.writeQuery({
+        query: GET_LOCAL_SIGNED_IN_STATUS,
+        data: { isSignedIn: true },
+      });
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
       const navigationOptions = {
         email: signinState.email,
         signinData: {