Merge pull request #16815 from mozilla/fxa-9400

fix(params): Redirect to email first page when not signed in

packages/fxa-settings/src/components/App/index.test.tsx

@@ -284,7 +284,7 @@ describe('SettingsRoutes', () => {
 
     await waitFor(() => {
       expect(hardNavigateToContentServerSpy).toHaveBeenCalledWith(
-        `/signin?redirect_to=${encodeURIComponent(settingsPath)}`
+        `/?redirect_to=${encodeURIComponent(settingsPath)}`
       );
     });
   });

packages/fxa-settings/src/components/App/index.tsx

@@ -2,12 +2,7 @@
  * 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 {
-  RouteComponentProps,
-  Router,
-  useLocation,
-  useNavigate,
-} from '@reach/router';
+import { RouteComponentProps, Router, useLocation } from '@reach/router';
 import {
   lazy,
   Suspense,
@@ -200,7 +195,6 @@ const SettingsRoutes = ({
   isSignedIn,
   integration,
 }: { isSignedIn: boolean; integration: Integration } & RouteComponentProps) => {
-  const navigate = useNavigate();
   const location = useLocation();
   // TODO: Remove this + config.sendFxAStatusOnSettings check once we confirm this works
   const config = useConfig();
@@ -226,12 +220,10 @@ const SettingsRoutes = ({
   });
 
   if (!isSignedIn && !shouldCheckFxaStatus) {
-    const path = `/signin?redirect_to=${encodeURIComponent(location.pathname)}`;
-    if (config.showReactApp.signInRoutes) {
-      navigate(path);
-    } else {
-      hardNavigateToContentServer(path);
-    }
+    const params = new URLSearchParams(location.search);
+    params.set('redirect_to', location.pathname);
+    const path = `/?${params.toString()}`;
+    hardNavigateToContentServer(path);
     return <LoadingSpinner fullScreen />;
   }
 

packages/fxa-settings/src/pages/Signin/SigninTokenCode/mocks.tsx

@@ -24,6 +24,7 @@ export function createMockWebIntegration() {
     getService: () => MozServices.Default,
     isSync: () => false,
     wantsKeys: () => false,
+    data: {},
   };
 }
 

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

@@ -35,6 +35,7 @@ import {
 } from '../../models/integrations/client-matching';
 import { SigninFormData, SigninProps } from './interfaces';
 import { handleNavigation } from './utils';
+import { useWebRedirect } from '../../lib/hooks/useWebRedirect';
 
 export const viewName = 'signin';
 
@@ -62,6 +63,7 @@ const Signin = ({
   const location = useLocation();
   const navigate = useNavigate();
   const ftlMsgResolver = useFtlMsgResolver();
+  const webRedirectCheck = useWebRedirect(integration.data.redirectTo);
 
   const [bannerError, setBannerError] = useState(
     localizedErrorFromLocationState || ''
@@ -129,6 +131,9 @@ const Signin = ({
             sessionToken,
           },
           integration,
+          redirectTo: webRedirectCheck.isValid()
+            ? integration.data.redirectTo
+            : '',
           finishOAuthFlowHandler,
           queryParams: location.search,
         };
@@ -154,6 +159,7 @@ const Signin = ({
       integration,
       finishOAuthFlowHandler,
       location.search,
+      webRedirectCheck,
     ]
   );
 
@@ -185,6 +191,9 @@ const Signin = ({
           verified: data.signIn.verified,
           integration,
           finishOAuthFlowHandler,
+          redirectTo: webRedirectCheck.isValid()
+            ? integration.data.redirectTo
+            : '',
           queryParams: location.search,
         };
 
@@ -261,6 +270,7 @@ const Signin = ({
       finishOAuthFlowHandler,
       integration,
       location.search,
+      webRedirectCheck,
     ]
   );
 

packages/fxa-settings/src/pages/Signin/interfaces.ts

@@ -17,7 +17,7 @@ export interface AvatarResponse {
 }
 
 export type SigninIntegration =
-  | Pick<Integration, 'type' | 'isSync' | 'getService' | 'wantsKeys'>
+  | Pick<Integration, 'type' | 'isSync' | 'getService' | 'wantsKeys' | 'data'>
   | SigninOAuthIntegration;
 
 export type SigninOAuthIntegration = Pick<
@@ -28,6 +28,7 @@ export type SigninOAuthIntegration = Pick<
   | 'wantsTwoStepAuthentication'
   | 'wantsKeys'
   | 'wantsLogin'
+  | 'data'
 >;
 
 export interface LocationState {

packages/fxa-settings/src/pages/Signin/mocks.tsx

@@ -102,6 +102,7 @@ export function createMockSigninWebIntegration(): SigninIntegration {
     isSync: () => false,
     getService: () => MozServices.Default,
     wantsKeys: () => false,
+    data: {},
   };
 }
 
@@ -111,6 +112,7 @@ export function createMockSigninSyncIntegration(): SigninIntegration {
     isSync: () => true,
     wantsKeys: () => true,
     getService: () => MozServices.FirefoxSync,
+    data: {},
   };
 }
 
@@ -130,6 +132,7 @@ export function createMockSigninOAuthIntegration({
     wantsKeys: () => wantsKeys,
     wantsLogin: () => false,
     wantsTwoStepAuthentication: () => false,
+    data: {},
   };
 }