Deploy passwordless auth feature for WooCommerce.com (#90359)

* Deploy Woo passwordless auth for woo.com flows * chore: Refactor logged-out component to remove unused variable and simplify code
Automattic · May 9, 2024 · 264cf6e · 264cf6e
1 parent efbea48
commit 264cf6e
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 93 deletions.
diff --git a/client/blocks/authentication/social/social-tos.jsx b/client/blocks/authentication/social/social-tos.jsx
@@ -2,7 +2,7 @@ import { localizeUrl } from '@automattic/i18n-utils';
 import { localize } from 'i18n-calypso';
 import { connect } from 'react-redux';
 import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
-import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';
+import getIsWooPasswordless from 'calypso/state/selectors/get-is-woo-passwordless';
 
 const toSLinks = {
 	components: {
@@ -47,5 +47,5 @@ function SocialAuthToS( props ) {
 
 export default connect( ( state ) => ( {
 	oauth2Client: getCurrentOAuth2Client( state ),
-	isWooPasswordless: !! getWooPasswordless( state ),
+	isWooPasswordless: getIsWooPasswordless( state ),
 } ) )( localize( SocialAuthToS ) );
diff --git a/client/blocks/login/continue-as-user.jsx b/client/blocks/login/continue-as-user.jsx
@@ -7,7 +7,7 @@ import Gravatar from 'calypso/components/gravatar';
 import wpcom from 'calypso/lib/wp';
 import { getCurrentUser } from 'calypso/state/current-user/selectors';
 import { getCurrentQueryArguments } from 'calypso/state/selectors/get-current-query-arguments';
-import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';
+import getIsWooPasswordless from 'calypso/state/selectors/get-is-woo-passwordless';
 
 import './continue-as-user.scss';
 
@@ -180,5 +180,5 @@ function ContinueAsUser( {
 export default connect( ( state ) => ( {
 	currentUser: getCurrentUser( state ),
 	redirectUrlFromQuery: get( getCurrentQueryArguments( state ), 'redirect_to', null ),
-	isWooPasswordless: !! getWooPasswordless( state ),
+	isWooPasswordless: getIsWooPasswordless( state ),
 } ) )( ContinueAsUser );
diff --git a/client/blocks/login/index.jsx b/client/blocks/login/index.jsx
@@ -50,9 +50,9 @@ import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selector
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import getInitialQueryArguments from 'calypso/state/selectors/get-initial-query-arguments';
+import getIsWooPasswordless from 'calypso/state/selectors/get-is-woo-passwordless';
 import getPartnerSlugFromQuery from 'calypso/state/selectors/get-partner-slug-from-query';
 import getWccomFrom from 'calypso/state/selectors/get-wccom-from';
-import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';
 import isFetchingMagicLoginEmail from 'calypso/state/selectors/is-fetching-magic-login-email';
 import isMagicLoginEmailRequested from 'calypso/state/selectors/is-magic-login-email-requested';
 import isWooCommerceCoreProfilerFlow from 'calypso/state/selectors/is-woocommerce-core-profiler-flow';
@@ -991,7 +991,7 @@ export default connect(
 			'woocommerce-onboarding' === get( getCurrentQueryArguments( state ), 'from' ),
 		isWooCoreProfilerFlow: isWooCommerceCoreProfilerFlow( state ),
 		wccomFrom: getWccomFrom( state ),
-		isWooPasswordless: !! getWooPasswordless( state ),
+		isWooPasswordless: getIsWooPasswordless( state ),
 		isAnchorFmSignup: getIsAnchorFmSignup(
 			get( getCurrentQueryArguments( state ), 'redirect_to' )
 		),

diff --git a/client/blocks/login/login-form.jsx b/client/blocks/login/login-form.jsx
@@ -61,8 +61,8 @@ import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selector
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import getInitialQueryArguments from 'calypso/state/selectors/get-initial-query-arguments';
+import getIsWooPasswordless from 'calypso/state/selectors/get-is-woo-passwordless';
 import getWccomFrom from 'calypso/state/selectors/get-wccom-from';
-import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';
 import isWooCommerceCoreProfilerFlow from 'calypso/state/selectors/is-woocommerce-core-profiler-flow';
 import ErrorNotice from './error-notice';
 import SocialLoginForm from './social';
@@ -1068,7 +1068,7 @@ export default connect(
 				getCurrentQueryArguments( state )?.email_address,
 			wccomFrom: getWccomFrom( state ),
 			currentQuery: getCurrentQueryArguments( state ),
-			isWooPasswordless: !! getWooPasswordless( state ),
+			isWooPasswordless: getIsWooPasswordless( state ),
 		};
 	},
 	{

diff --git a/client/blocks/signup-form/index.jsx b/client/blocks/signup-form/index.jsx
@@ -58,8 +58,8 @@ import { getCurrentUser } from 'calypso/state/current-user/selectors';
 import { createSocialUserFailed } from 'calypso/state/login/actions';
 import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
+import getIsWooPasswordless from 'calypso/state/selectors/get-is-woo-passwordless';
 import getWccomFrom from 'calypso/state/selectors/get-wccom-from';
-import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';
 import isWooCommerceCoreProfilerFlow from 'calypso/state/selectors/is-woocommerce-core-profiler-flow';
 import { resetSignup } from 'calypso/state/signup/actions';
 import { getSectionName } from 'calypso/state/ui/selectors';
@@ -1374,7 +1374,7 @@ export default connect(
 			isJetpackWooDnaFlow: wooDnaConfig( getCurrentQueryArguments( state ) ).isWooDnaFlow(),
 			from: get( getCurrentQueryArguments( state ), 'from' ),
 			wccomFrom: getWccomFrom( state ),
-			isWooPasswordless: !! getWooPasswordless( state ),
+			isWooPasswordless: getIsWooPasswordless( state ),
 			isWoo: isWooOAuth2Client( oauth2Client ) || isWooCoreProfilerFlow,
 			isWooCoreProfilerFlow,
 			isP2Flow:

diff --git a/client/layout/logged-out.jsx b/client/layout/logged-out.jsx
@@ -42,8 +42,8 @@ import { clearLastActionRequiresLogin } from 'calypso/state/reader-ui/actions';
 import { getLastActionRequiresLogin } from 'calypso/state/reader-ui/selectors';
 import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import getInitialQueryArguments from 'calypso/state/selectors/get-initial-query-arguments';
+import getIsWooPasswordless from 'calypso/state/selectors/get-is-woo-passwordless';
 import getWccomFrom from 'calypso/state/selectors/get-wccom-from';
-import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';
 import isWooCommerceCoreProfilerFlow from 'calypso/state/selectors/is-woocommerce-core-profiler-flow';
 import { masterbarIsVisible } from 'calypso/state/ui/selectors';
 import BodySectionCssClass from './body-section-css-class';
@@ -351,13 +351,6 @@ export default withCurrentRoute(
 				noMasterbarForSection ||
 				noMasterbarForRoute;
 
-			const isWCCOM = isWooOAuth2Client( oauth2Client ) && wccomFrom !== null;
-			const wooPasswordless = getWooPasswordless( state );
-			const isWooPasswordless =
-				!! wooPasswordless &&
-				// Enable woo-passwordless feature for WCCOM only.
-				isWCCOM;
-
 			return {
 				isJetpackLogin,
 				isWhiteLogin,
@@ -378,7 +371,7 @@ export default withCurrentRoute(
 				isPartnerSignup,
 				isPartnerSignupStart,
 				isWooCoreProfilerFlow,
-				isWooPasswordless,
+				isWooPasswordless: getIsWooPasswordless( state ),
 			};
 		},
 		{ clearLastActionRequiresLogin }

diff --git a/client/login/index.web.js b/client/login/index.web.js
@@ -9,7 +9,6 @@ import {
 	makeLayoutMiddleware,
 } from 'calypso/controller/shared';
 import LayoutLoggedOut from 'calypso/layout/logged-out';
-import signupController from 'calypso/signup/controller';
 import {
 	login,
 	magicLogin,
@@ -68,7 +67,6 @@ export default ( router ) => {
 			redirectLoggedIn,
 			setLocaleMiddleware(),
 			setSectionMiddleware( LOGIN_SECTION_DEFINITION ),
-			signupController.redirectWooPasswordless,
 			magicLoginUse,
 			makeLoggedOutLayout
 		);
@@ -77,7 +75,6 @@ export default ( router ) => {
 			[ `/log-in/link/${ lang }`, `/log-in/jetpack/link/${ lang }`, `/log-in/new/link/${ lang }` ],
 			setLocaleMiddleware(),
 			setSectionMiddleware( LOGIN_SECTION_DEFINITION ),
-			signupController.redirectWooPasswordless,
 			magicLogin,
 			makeLoggedOutLayout
 		);
@@ -88,7 +85,6 @@ export default ( router ) => {
 		redirectLoggedIn,
 		setLocaleMiddleware(),
 		setSectionMiddleware( LOGIN_SECTION_DEFINITION ),
-		signupController.redirectWooPasswordless,
 		qrCodeLogin,
 		makeLoggedOutLayout
 	);
@@ -111,7 +107,6 @@ export default ( router ) => {
 		setLocaleMiddleware(),
 		setHrefLangLinks,
 		setSectionMiddleware( LOGIN_SECTION_DEFINITION ),
-		signupController.redirectWooPasswordless,
 		login,
 		setShouldServerSideRenderLogin,
 		makeLoggedOutLayout

diff --git a/client/login/wp-login/index.jsx b/client/login/wp-login/index.jsx
@@ -42,7 +42,7 @@ import getCurrentLocaleSlug from 'calypso/state/selectors/get-current-locale-slu
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import getInitialQueryArguments from 'calypso/state/selectors/get-initial-query-arguments';
-import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';
+import getIsWooPasswordless from 'calypso/state/selectors/get-is-woo-passwordless';
 import isWooCommerceCoreProfilerFlow from 'calypso/state/selectors/is-woocommerce-core-profiler-flow';
 import { withEnhancers } from 'calypso/state/utils';
 import LoginButtons from './login-buttons';
@@ -636,7 +636,7 @@ export default connect(
 			isFromMigrationPlugin: startsWith( get( currentQuery, 'from' ), 'wpcom-migration' ),
 			isWooCoreProfilerFlow: isWooCommerceCoreProfilerFlow( state ),
 			isWoo: isWooOAuth2Client( oauth2Client ),
-			isWooPasswordless: getWooPasswordless( state ),
+			isWooPasswordless: getIsWooPasswordless( state ),
 			currentRoute,
 			currentQuery,
 			redirectTo: getRedirectToOriginal( state ),

diff --git a/client/signup/controller.js b/client/signup/controller.js
@@ -6,17 +6,10 @@ import store from 'store';
 import { notFound } from 'calypso/controller';
 import { recordPageView } from 'calypso/lib/analytics/page-view';
 import { loadExperimentAssignment } from 'calypso/lib/explat';
-import { isWooOAuth2Client } from 'calypso/lib/oauth2-clients.js';
 import { login } from 'calypso/lib/paths';
-import { sectionify, addQueryArgs } from 'calypso/lib/route';
+import { sectionify } from 'calypso/lib/route';
 import flows from 'calypso/signup/config/flows';
 import { getCurrentUserSiteCount, isUserLoggedIn } from 'calypso/state/current-user/selectors';
-import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors.js';
-import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
-import getCurrentRoute from 'calypso/state/selectors/get-current-route.js';
-import getPreviousQuery from 'calypso/state/selectors/get-previous-query';
-import getWccomFrom from 'calypso/state/selectors/get-wccom-from';
-import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';
 import { updateDependencies } from 'calypso/state/signup/actions';
 import { getSignupDependencyStore } from 'calypso/state/signup/dependency-store/selectors';
 import { setCurrentFlowName, setPreviousFlowName } from 'calypso/state/signup/flow/actions';
@@ -430,49 +423,4 @@ export default {
 				} );
 		}
 	},
-
-	async redirectWooPasswordless( context, next ) {
-		if ( ! config.isEnabled( 'woo/passwordless' ) ) {
-			next();
-			return;
-		}
-
-		const state = context.store.getState();
-		const oauth2Client = getCurrentOAuth2Client( state );
-		const wccomFrom = getWccomFrom( state );
-		const isWCCOM = isWooOAuth2Client( oauth2Client ) && wccomFrom !== null;
-		const wooPasswordless = getWooPasswordless( state );
-
-		if ( ! isWCCOM ) {
-			// Only enable Woo passwordless for WooCommerce.com users
-			next();
-			return;
-		}
-
-		if ( wooPasswordless ) {
-			// Woo passwordless is already enabled via query parameter
-			next();
-			return;
-		}
-
-		const previousQuery = getPreviousQuery( state );
-
-		if ( ! previousQuery || ! previousQuery[ 'woo-passwordless' ] ) {
-			// If the previous page did not have the woo-passwordless query parameter, fetch the experiment assignment. Otherwise, skip the experiment assignment.
-
-			const experimentAssignment = await loadExperimentAssignment(
-				'calypso_wooexpress_signup_passwordless_registration_202404_v1'
-			);
-			if ( experimentAssignment.variationName !== 'treatment' ) {
-				next();
-				return;
-			}
-		}
-
-		// Add the woo-passwordless query parameter to the URL.
-		const currentRoute = getCurrentRoute( state );
-		const currentQuery = getCurrentQueryArguments( state );
-		const queryParams = { ...currentQuery, 'woo-passwordless': 'yes' };
-		return page.replace( addQueryArgs( queryParams, currentRoute ) );
-	},
 };
diff --git a/client/signup/index.web.js b/client/signup/index.web.js
@@ -17,7 +17,6 @@ export default function () {
 		controller.saveInitialContext,
 		controller.redirectWithoutLocaleIfLoggedIn,
 		controller.redirectToFlow,
-		controller.redirectWooPasswordless,
 		controller.setSelectedSiteForSignup,
 		controller.start,
 		makeLayout,

diff --git a/client/signup/steps/user/index.jsx b/client/signup/steps/user/index.jsx
@@ -44,8 +44,8 @@ import { errorNotice } from 'calypso/state/notices/actions';
 import { fetchOAuth2ClientData } from 'calypso/state/oauth2-clients/actions';
 import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
+import getIsWooPasswordless from 'calypso/state/selectors/get-is-woo-passwordless';
 import getWccomFrom from 'calypso/state/selectors/get-wccom-from';
-import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';
 import { getSuggestedUsername } from 'calypso/state/signup/optional-dependencies/selectors';
 import { saveSignupStep, submitSignupStep } from 'calypso/state/signup/progress/actions';
 
@@ -748,7 +748,7 @@ const ConnectedUser = connect(
 			oauth2Client: getCurrentOAuth2Client( state ),
 			suggestedUsername: getSuggestedUsername( state ),
 			wccomFrom: getWccomFrom( state ),
-			isWooPasswordless: !! getWooPasswordless( state ),
+			isWooPasswordless: getIsWooPasswordless( state ),
 			from: get( getCurrentQueryArguments( state ), 'from' ),
 			userLoggedIn: isUserLoggedIn( state ),
 		};

diff --git a/client/state/selectors/get-is-woo-passwordless.ts b/client/state/selectors/get-is-woo-passwordless.ts
@@ -0,0 +1,19 @@
+import 'calypso/state/route/init';
+import config from '@automattic/calypso-config';
+import { isWooOAuth2Client } from 'calypso/lib/oauth2-clients';
+import { getCurrentOAuth2Client } from '../oauth2-clients/ui/selectors';
+import getWccomFrom from './get-wccom-from';
+import type { AppState } from 'calypso/types';
+
+/**
+ * Return if should enable Woo Passwordless authentication.
+ *
+ */
+export default function getIsWooPasswordless( state: AppState ): boolean {
+	if ( ! config.isEnabled( 'woo/passwordless' ) ) {
+		return false;
+	}
+
+	// Enable Woo Passwordless only if user is from WooCommerce.com. Not enable for other flows such as "Core Profiler" for now.
+	return isWooOAuth2Client( getCurrentOAuth2Client( state ) ) && getWccomFrom( state ) !== null;
+}
diff --git a/client/state/selectors/get-woo-passwordless.ts b/client/state/selectors/get-woo-passwordless.ts