task(): remove 3rd-party auth deeplink functionality

Author: toufali

packages/fxa-settings/src/components/ThirdPartyAuth/__snapshots__/index.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`ThirdPartyAuthComponent buttons match snapshot: apple 1`] = `
 <button
   aria-label="Continue with Apple"
   class="w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
-          bg-black border-transparent
-          "
+        bg-black border-transparent
+        "
   type="submit"
 >
   <svg
@@ -20,8 +20,8 @@ exports[`ThirdPartyAuthComponent buttons match snapshot: google 1`] = `
 <button
   aria-label="Continue with Google"
   class="w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
-          bg-[#F9F4F4] border-[#747775] border-[1px]
-          "
+        bg-[#F9F4F4] border-[#747775] border-[1px]
+        "
   type="submit"
 >
   <svg

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

@@ -143,36 +143,6 @@ describe('ThirdPartyAuthComponent', () => {
     expect(onContinueWithApple).not.toHaveBeenCalled();
   });
 
-  it('should deeplink directly to google auth, if deeplink=`googleLogin`', async () => {
-    renderWith({
-      enabled: true,
-      showSeparator: false,
-      deeplink: 'googleLogin',
-      view: 'index',
-    });
-
-    expect(
-      (await screen.findByTestId('google-signin-form-state')).getAttribute(
-        'value'
-      )
-    ).not.toEqual('');
-  });
-
-  it('should deeplink directly to apple auth, if deeplink=`appleLogin`', async () => {
-    renderWith({
-      enabled: true,
-      showSeparator: false,
-      deeplink: 'appleLogin',
-      view: 'index',
-    });
-
-    expect(
-      (await screen.findByTestId('apple-signin-form-state')).getAttribute(
-        'value'
-      )
-    ).not.toEqual('');
-  });
-
   it('hides separator', async () => {
     renderWith({
       enabled: true,

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

@@ -20,7 +20,6 @@ export type ThirdPartyAuthProps = {
   onContinueWithApple?: FormEventHandler<HTMLFormElement>;
   showSeparator?: boolean;
   viewName?: string;
-  deeplink?: string;
   flowQueryParams?: QueryParams;
   separatorType?: 'or' | 'signInWith';
 };
@@ -35,7 +34,6 @@ const ThirdPartyAuth = ({
   onContinueWithApple,
   showSeparator = true,
   viewName = 'unknown',
-  deeplink,
   flowQueryParams,
   separatorType = 'or',
 }: ThirdPartyAuthProps) => {
@@ -91,7 +89,6 @@ const ThirdPartyAuth = ({
                   <GoogleLogo className="w-full h-auto" />
                 </>
               ),
-              deeplink,
             }}
           />
           <ThirdPartySignInForm
@@ -111,7 +108,6 @@ const ThirdPartyAuth = ({
                   <AppleLogo className="w-full h-auto" />
                 </>
               ),
-              deeplink,
             }}
           />
         </div>
@@ -139,7 +135,6 @@ const ThirdPartySignInForm = ({
   buttonText,
   onSubmit,
   viewName,
-  deeplink,
   flowQueryParams,
 }: {
   party: 'google' | 'apple';
@@ -155,14 +150,12 @@ const ThirdPartySignInForm = ({
   buttonText: ReactElement;
   onSubmit?: FormEventHandler<HTMLFormElement>;
   viewName?: string;
-  deeplink?: string;
   flowQueryParams?: QueryParams;
 }) => {
   const { logViewEventOnce } = useMetrics();
   const { l10n } = useLocalization();
   const stateRef = useRef<HTMLInputElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
-  const isDeeplinking = deeplink !== undefined;
 
   const getLoginAriaLabel = () => {
     const labels = {
@@ -201,12 +194,6 @@ const ThirdPartySignInForm = ({
       case 'apple-signup':
         GleanMetrics.thirdPartyAuth.startAppleAuthFromReg();
         break;
-      case 'google-deeplink':
-        GleanMetrics.thirdPartyAuth.googleDeeplink();
-        break;
-      case 'apple-deeplink':
-        GleanMetrics.thirdPartyAuth.appleDeeplink();
-        break;
     }
 
     // wait for all the Glean events to be sent before the page unloads
@@ -221,19 +208,6 @@ const ThirdPartySignInForm = ({
     onSubmit = () => true;
   }
 
-  useEffect(() => {
-    if (deeplink && formRef.current) {
-      // Only deeplink if this is the correct button
-      if (
-        (deeplink === 'googleLogin' && party === 'google') ||
-        (deeplink === 'appleLogin' && party === 'apple')
-      ) {
-        onClick();
-        formRef.current.submit();
-      }
-    }
-  }, [deeplink, onClick, party]);
-
   return (
     <form
       action={authorizationEndpoint}
@@ -258,22 +232,20 @@ const ThirdPartySignInForm = ({
         <input type="hidden" name="response_mode" value={responseMode} />
       )}
 
-      {!isDeeplinking ? (
-        <button
-          type="submit"
-          className={`w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
-          ${
-            party === 'google'
-              ? 'bg-[#F9F4F4] border-[#747775] border-[1px]'
-              : 'bg-black border-transparent'
-          }
-          `}
-          onClick={onClick}
-          aria-label={getLoginAriaLabel()}
-        >
-          {buttonText}
-        </button>
-      ) : null}
+      <button
+        type="submit"
+        className={`w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
+        ${
+          party === 'google'
+            ? 'bg-[#F9F4F4] border-[#747775] border-[1px]'
+            : 'bg-black border-transparent'
+        }
+        `}
+        onClick={onClick}
+        aria-label={getLoginAriaLabel()}
+      >
+        {buttonText}
+      </button>
     </form>
   );
 };
@@ -302,7 +274,6 @@ function getState(flowQueryParams: QueryParams | undefined) {
 
   // Remove unwanted keys
   const filteredParams = deleteParams(new URLSearchParams(combinedParams), [
-    'deeplink',
     'email',
     'emailStatusChecked',
     'forceExperiment',

packages/fxa-settings/src/lib/glean/index.ts

@@ -427,12 +427,6 @@ const recordEventMetric = (
     case 'third_party_auth_apple_login_start':
       thirdPartyAuth.appleLoginStart.record();
       break;
-    case 'third_party_auth_apple_deeplink':
-      thirdPartyAuth.appleDeeplink.record();
-      break;
-    case 'third_party_auth_google_deeplink':
-      thirdPartyAuth.googleDeeplink.record();
-      break;
     case 'cad_firefox_notnow_submit':
       cadFirefox.notnowSubmit.record();
       break;

packages/fxa-settings/src/models/pages/index/query-params.ts

@@ -2,7 +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 { IsEmail, IsIn, IsOptional, Validate } from 'class-validator';
+import { IsEmail, IsOptional, Validate } from 'class-validator';
 import {
   bind,
   KeyTransforms,
@@ -20,9 +20,4 @@ export class IndexQueryParams extends ModelDataProvider {
   @Validate(IsEmailOrEmpty, {})
   @bind(KeyTransforms.snakeCase)
   loginHint: string | undefined;
-
-  @IsOptional()
-  @IsIn(['googleLogin', 'appleLogin'])
-  @bind()
-  deeplink: string | undefined;
 }

packages/fxa-settings/src/models/pages/signin/query-params.ts

@@ -11,7 +11,6 @@ import {
   MaxLength,
   Matches,
   Validate,
-  IsIn,
 } from 'class-validator';
 import {
   bind,
@@ -51,9 +50,4 @@ export class SigninQueryParams extends ModelDataProvider {
   @Validate(IsFxaRedirectToUrl, {})
   @bind(T.snakeCase)
   redirectTo: string | undefined = undefined;
-
-  @IsOptional()
-  @IsIn(['googleLogin', 'appleLogin'])
-  @bind(T.snakeCase)
-  deeplink!: string;
 }

packages/fxa-settings/src/models/pages/signup/query-params.ts

@@ -2,8 +2,8 @@
  * 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 { IsBoolean, IsEmail, IsIn, IsOptional } from 'class-validator';
-import { bind, KeyTransforms as T, ModelDataProvider } from '../../../lib/model-data';
+import { IsBoolean, IsEmail, IsOptional } from 'class-validator';
+import { bind, ModelDataProvider } from '../../../lib/model-data';
 
 export class SignupQueryParams extends ModelDataProvider {
   // 'email' will be optional once the index page is converted to React
@@ -20,9 +20,4 @@ export class SignupQueryParams extends ModelDataProvider {
   @IsBoolean()
   @bind()
   emailStatusChecked: boolean = false;
-
-  @IsOptional()
-  @IsIn(['googleLogin', 'appleLogin'])
-  @bind(T.snakeCase)
-  deeplink!: string;
 }

packages/fxa-settings/src/pages/Index/container.tsx

@@ -315,7 +315,6 @@ const IndexContainer = ({
   }, [ftlMsgResolver, deleteAccountSuccess]);
 
   const initialPrefill = prefillEmail || suggestedEmail;
-  const deeplink = queryParamModel.deeplink;
   const isMobile = isMobileDevice();
 
   const cmsInfo = integration.getCmsInfo();
@@ -339,7 +338,6 @@ const IndexContainer = ({
         errorBannerMessage,
         successBannerMessage,
         tooltipErrorMessage,
-        deeplink,
         flowQueryParams,
         isMobile,
         useFxAStatusResult,

packages/fxa-settings/src/pages/Index/index.test.tsx

@@ -5,14 +5,9 @@
 import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import {
-  createMockIndexOAuthIntegration,
-  createMockIndexOAuthNativeIntegration,
-  Subject,
-} from './mocks';
+import { createMockIndexOAuthNativeIntegration, Subject } from './mocks';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import { MozServices } from '../../lib/types';
-import { MONITOR_CLIENTIDS } from '../../models/integrations/client-matching';
 import GleanMetrics from '../../lib/glean';
 import { MOCK_CMS_INFO } from '../mocks';
 
@@ -219,29 +214,6 @@ describe('Index page', () => {
     ).not.toBeInTheDocument();
   });
 
-  // This is wrapped so that the HTMLFormElement.submit can be mocked
-  // without affecting other tests.
-  describe('deep linking', () => {
-    beforeEach(() => {
-      HTMLFormElement.prototype.submit = jest.fn();
-    });
-    afterEach(() => {
-      jest.resetAllMocks();
-    });
-    it('does not render when deeplinking third party auth', () => {
-      renderWithLocalizationProvider(
-        <Subject
-          integration={createMockIndexOAuthIntegration({
-            clientId: MONITOR_CLIENTIDS[0],
-          })}
-          deeplink="appleLogin"
-        />
-      );
-
-      thirdPartyAuthNotRendered();
-    });
-  });
-
   describe('glean metrics', () => {
     it('emits emailFirst.view on initial render', () => {
       const viewSpy = jest.spyOn(GleanMetrics.emailFirst, 'view');

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

@@ -28,7 +28,6 @@ export const Index = ({
   setErrorBannerMessage,
   setSuccessBannerMessage,
   setTooltipErrorMessage,
-  deeplink,
   flowQueryParams,
   isMobile,
   useFxAStatusResult,
@@ -43,8 +42,6 @@ export const Index = ({
 
   const emailEngageEventEmitted = useRef(false);
 
-  const isDeeplinking = !!deeplink;
-
   useEffect(() => {
     GleanMetrics.emailFirst.view();
   }, []);
@@ -82,18 +79,6 @@ export const Index = ({
     },
   });
 
-  if (isDeeplinking) {
-    // To avoid flickering, we just render third party auth when deeplinking
-    return (
-      <ThirdPartyAuth
-        showSeparator={false}
-        viewName="deeplink"
-        deeplink={deeplink}
-        flowQueryParams={flowQueryParams}
-      />
-    );
-  }
-
   const cmsInfo = integration.getCmsInfo();
   const title = cmsInfo?.EmailFirstPage?.pageTitle;
   const splitLayout = cmsInfo?.EmailFirstPage?.splitLayout;