fix(auth): Fix issues with deeplinking third party auth

Author: vbudhram

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

@@ -136,6 +136,36 @@ describe('ThirdPartyAuthComponent', () => {
     expect(onContinueWithApple).not.toBeCalled();
   });
 
+  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

@@ -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 React, { useRef, FormEventHandler, useEffect } from 'react';
+import React, { useRef, FormEventHandler, useEffect, useCallback } from 'react';
 import { FtlMsg } from 'fxa-react/lib/utils';
 
 import { ReactComponent as GoogleLogo } from './google-logo.svg';
@@ -18,6 +18,7 @@ export type ThirdPartyAuthProps = {
   onContinueWithApple?: FormEventHandler<HTMLFormElement>;
   showSeparator?: boolean;
   viewName?: string;
+  deeplink?: string;
 };
 
 /**
@@ -30,6 +31,7 @@ const ThirdPartyAuth = ({
   onContinueWithApple,
   showSeparator = true,
   viewName = 'unknown',
+                          deeplink,
 }: ThirdPartyAuthProps) => {
   const config = useConfig();
 
@@ -76,6 +78,7 @@ const ThirdPartyAuth = ({
                   </FtlMsg>
                 </>
               ),
+              deeplink
             }}
           />
           <ThirdPartySignInForm
@@ -98,6 +101,7 @@ const ThirdPartyAuth = ({
                   </FtlMsg>
                 </>
               ),
+              deeplink
             }}
           />
         </div>
@@ -125,6 +129,7 @@ const ThirdPartySignInForm = ({
   buttonText,
   onSubmit,
   viewName,
+                                deeplink
 }: {
   party: 'google' | 'apple';
   authorizationEndpoint: string;
@@ -139,11 +144,14 @@ const ThirdPartySignInForm = ({
   buttonText: ReactElement;
   onSubmit?: FormEventHandler<HTMLFormElement>;
   viewName?: string;
+  deeplink?: string;
 }) => {
   const { logViewEventOnce } = useMetrics();
   const stateRef = useRef<HTMLInputElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const isDeeplinking = deeplink !== undefined;
 
-  async function onClick() {
+  const onClick = useCallback(async () => {
     logViewEventOnce(`flow.${party}`, 'oauth-start');
 
     switch (`${party}-${viewName}`) {
@@ -165,20 +173,40 @@ 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
     await GleanMetrics.isDone();
 
-    stateRef.current!.value = getState();
-  }
+    if (stateRef.current) {
+      stateRef.current.value = getState();
+    }
+  }, [party, viewName, logViewEventOnce]);
+
 
   if (onSubmit === undefined) {
     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} method="GET" onSubmit={onSubmit}>
+    <form action={authorizationEndpoint} method="GET" onSubmit={onSubmit} ref={formRef}>
       <input
         data-testid={`${party}-signin-form-state`}
         ref={stateRef}
@@ -196,13 +224,15 @@ const ThirdPartySignInForm = ({
         <input type="hidden" name="response_mode" value={responseMode} />
       )}
 
-      <button
-        type="submit"
-        className="w-full px-2 mt-2 justify-center text-black bg-transparent border-grey-300 border hover:border-black rounded-lg text-md text-center inline-flex items-center focus-visible-default outline-offset-2"
-        onClick={onClick}
-      >
-        {buttonText}
-      </button>
+      {!isDeeplinking ? (
+        <button
+          type="submit"
+          className="w-full px-2 mt-2 justify-center text-black bg-transparent border-grey-300 border hover:border-black rounded-lg text-md text-center inline-flex items-center focus-visible-default outline-offset-2"
+          onClick={onClick}
+        >
+          {buttonText}
+        </button>
+      ) : null }
     </form>
   );
 };
@@ -213,7 +243,7 @@ function deleteParams(searchParams: URLSearchParams, paramsToDelete: string[]) {
 }
 
 function getState() {
-  // We stash originating location in the state oauth param
+  // We stash the originating location in the state oauth param
   // because we will need it to use it to reconstruct the redirect URL for RP
   const params = new URLSearchParams(window.location.search);
   // we won't need these params that are used for internal backbone/react navigation
@@ -225,12 +255,11 @@ function getState() {
     'forceExperimentGroup',
     'showReactApp',
   ]);
-  const state = encodeURIComponent(
+  return encodeURIComponent(
     `${window.location.origin}${
       window.location.pathname
     }?${modifiedParams.toString()}`
   );
-  return state;
 }
 
 export default ThirdPartyAuth;

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

@@ -415,6 +415,12 @@ 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, IsOptional } from 'class-validator';
+import { IsEmail, IsIn, IsOptional } from 'class-validator';
 import {
   bind,
   KeyTransforms,
@@ -19,4 +19,9 @@ export class IndexQueryParams extends ModelDataProvider {
   @IsEmail()
   @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,6 +11,7 @@ import {
   MaxLength,
   Matches,
   Validate,
+  IsIn,
 } from 'class-validator';
 import {
   bind,
@@ -50,4 +51,9 @@ 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, IsOptional } from 'class-validator';
-import { bind, ModelDataProvider } from '../../../lib/model-data';
+import { IsBoolean, IsEmail, IsIn, IsOptional } from 'class-validator';
+import { bind, KeyTransforms as T, ModelDataProvider } from '../../../lib/model-data';
 
 export class SignupQueryParams extends ModelDataProvider {
   // 'email' will be optional once the index page is converted to React
@@ -20,4 +20,9 @@ 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

@@ -4,7 +4,7 @@
 
 import * as Sentry from '@sentry/browser';
 
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { RouteComponentProps, useLocation } from '@reach/router';
 import { isEmail } from 'class-validator';
 
@@ -252,6 +252,7 @@ export const IndexContainer = ({
   }, [ftlMsgResolver, deleteAccountSuccess]);
 
   const initialPrefill = prefillEmail || suggestedEmail;
+  const deeplink = queryParamModel.deeplink;
 
   return isLoading ? (
     <LoadingSpinner fullScreen />
@@ -267,6 +268,7 @@ export const IndexContainer = ({
         errorBannerMessage,
         successBannerMessage,
         tooltipErrorMessage,
+        deeplink
       }}
       prefillEmail={initialPrefill}
     />

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

@@ -115,6 +115,19 @@ describe('Index page', () => {
     );
   });
 
+  it('does not render when deeplinking third party auth', () => {
+    renderWithLocalizationProvider(
+      <Subject
+        integration={createMockIndexOAuthIntegration({
+          clientId: POCKET_CLIENTIDS[0],
+        })}
+        deeplink="appleLogin"
+      />
+    );
+
+    thirdPartyAuthNotRendered();
+  });
+
   it('renders as expected when client is Pocket', () => {
     renderWithLocalizationProvider(
       <Subject

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

@@ -31,6 +31,7 @@ export const Index = ({
   setErrorBannerMessage,
   setSuccessBannerMessage,
   setTooltipErrorMessage,
+  deeplink
 }: IndexProps) => {
   const clientId = integration.getClientId();
   const isSync = integration.isSync();
@@ -42,10 +43,9 @@ export const Index = ({
 
   const emailEngageEventEmitted = useRef(false);
 
+  const isDeeplinking = !!deeplink;
+
   useEffect(() => {
-    // Note we might not need this later due to automatic page load events,
-    // but it's here for now to match parity with Backbone. This will be closely
-    // monitored for the `service=relay` flow for some time.
     GleanMetrics.emailFirst.view();
   }, []);
 
@@ -76,6 +76,11 @@ export const Index = ({
     },
   });
 
+  if (isDeeplinking) {
+    // To avoid flickering, we just render third party auth when deeplinking
+    return <ThirdPartyAuth showSeparator={false} viewName="deeplink" deeplink={deeplink} />
+  }
+
   return (
     <AppLayout>
       {isSync ? (

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

@@ -31,6 +31,7 @@ export interface IndexProps extends LocationState {
   errorBannerMessage?: string;
   successBannerMessage?: string;
   tooltipErrorMessage?: string;
+  deeplink?: string
 }
 
 export interface IndexFormData {