@automattic/data-stores 1.0.0-alpha.0 → 3.0.0

package/src/auth/README.md

@@ -0,0 +1,96 @@
+# User store
+
+This store includes behavior for logging users in; including "passwordless" logins, 2-factor auth, etc.
+
+The store manages where the user is in login process. The login UI is responsible for displaying the appropriate components (e.g. password form, 2-factor code form) based on the state of the store, and the store is responsible for advancing through the flow depending on the authentication method the user is using.
+
+## Usage
+
+Register the auth store, passing in a valid client ID and secret:
+
+```js
+import { Auth } from '@automattic/data-stores';
+
+const AUTH_STORE = Auth.register( {
+	client_id: 'MY_CLIENT_ID', // ⚠️Replace with your app's ID
+	client_secret: 'MY_CLIENT_SECRET', // ⚠️Replace with your app's secret
+	loadCookiesAfterLogin: true, // Read more below
+} );
+```
+
+### Login flow state
+
+The user can be in the following login states:
+
+- `ENTER_USERNAME_OR_EMAIL`
+- `ENTER_PASSWORD`
+- `ENTER_2FA_CODE`
+- `LOGIN_LINK_SENT`
+- `WAITING_FOR_2FA_APP`
+- `LOGGED_IN`
+
+To get the current state use the `loginFlowState` selector.
+
+To restart the login flow dispatch the `reset` action.
+
+```js
+import { useSelect } from '@wordpress/data';
+
+function MyComponent() {
+	const loginFlowState = useSelect( ( select ) => select( AUTH_STORE ).getLoginFlowState() );
+	const { reset } = useDispatch( AUTH_STORE );
+
+	return (
+		<div>
+			Current login flow state: { loginFlowState }
+			<button onClick={ reset }>Reset login flow</button>
+		</div>
+	);
+}
+```
+
+### Entering username and password
+
+The store will need to check whether a password is needed for a given user. Rather than submitting both at once, submit the email to the store first and respond if the login flow state changes.
+
+```js
+import { useDispatch, useSelect } from '@wordpress/data';
+
+function MyComponent() {
+	const loginFlowState = useSelect( ( select ) => select( AUTH_STORE ).getLoginFlowState() );
+	const { submitUsernameOrEmail, submitPassword } = useDispatch( AUTH_STORE );
+
+	switch ( loginFlowState ) {
+		case 'ENTER_USERNAME_OR_EMAIL':
+			return (
+				<form onSubmit={ ( e ) => submitUsernameOrEmail( e.target.username.value ) }>
+					<label htmlFor="username">Username or email</label>
+					<input id="username" name="username" required />
+				</form>
+			);
+
+		case 'ENTER_PASSWORD':
+			return (
+				<form onSubmit={ ( e ) => submitPassword( e.target.password.value ) }>
+					<label htmlFor="password">Username or email</label>
+					<input id="password" name="password" type="password" required />
+				</form>
+			);
+
+		default:
+			return null;
+	}
+}
+```
+
+### `loadCookiesAfterLogin` config
+
+After login is complete (`loginFlowState === 'LOGGED_IN'`) the user will have a session on the server, but the client won't have all the cookies for that session yet. In particular it won't have the cookies needed by `wpcom-proxy-request` to talk to `public-api.wordpress.com`.
+
+This could be fine under some circumstances. If, after a successful login, the browser navigates to another page then the cookies will be loaded as part of that page navigation. It would be a waste for the auth store to retrieve them. In this case use `loadCookiesAfterLogin = false`.
+
+If however the user will continue to work and make more requests on the same page after logging in, then we want the store to make the required request to get cookies. In this case use `loadCookiesAfterLogin = true`.
+
+The flag defaults to `true`.
+
+_Implementation detail:_ under the hood, if `loadCookiesAfterLogin === true` then the store will reload the iframe used by `wpcom-proxy-request` to send requests to `public-api.wordpress.com`. Because it's only the iframe that reloads the user won't see a browser refresh happen.

package/src/auth/actions.ts

@@ -0,0 +1,290 @@
+import { select } from '@wordpress/data-controls';
+import { stringify } from 'qs';
+import {
+	wpcomRequest,
+	fetchAndParse,
+	requestAllBlogsAccess,
+	reloadProxy,
+	wait,
+} from '../wpcom-request-controls';
+import { STORE_KEY, POLL_APP_PUSH_INTERVAL_SECONDS } from './constants';
+import { remoteLoginUser } from './controls';
+import { getNextTaskId } from './utils';
+import type { WpcomClientCredentials } from '../shared-types';
+import type {
+	AuthOptionsSuccessResponse,
+	AuthOptionsErrorResponse,
+	WpLoginSuccessResponse,
+	WpLoginErrorResponse,
+	SendLoginEmailSuccessResponse,
+	SendLoginEmailErrorResponse,
+	WpLoginResponse,
+	PushNotificationSentData,
+	LoginCompleteData,
+} from './types';
+
+export interface ActionsConfig extends WpcomClientCredentials {
+	/**
+	 * True if user needs immediate access to cookies after logging in.
+	 * See README.md for details.
+	 * Default: true
+	 */
+	loadCookiesAfterLogin?: boolean;
+}
+
+export function createActions( {
+	client_id,
+	client_secret,
+	loadCookiesAfterLogin = true,
+}: ActionsConfig ) {
+	const reset = () =>
+		( {
+			type: 'RESET_LOGIN_FLOW' as const,
+		} as const );
+
+	const receiveAuthOptions = ( response: AuthOptionsSuccessResponse, usernameOrEmail: string ) =>
+		( {
+			type: 'RECEIVE_AUTH_OPTIONS',
+			response,
+			usernameOrEmail,
+		} as const );
+
+	const receiveAuthOptionsFailed = ( response: AuthOptionsErrorResponse ) =>
+		( {
+			type: 'RECEIVE_AUTH_OPTIONS_FAILED',
+			response,
+		} as const );
+
+	const receiveSendLoginEmail = ( response: SendLoginEmailSuccessResponse ) =>
+		( {
+			type: 'RECEIVE_SEND_LOGIN_EMAIL',
+			response,
+		} as const );
+
+	const receiveSendLoginEmailFailed = ( response: SendLoginEmailErrorResponse ) =>
+		( {
+			type: 'RECEIVE_SEND_LOGIN_EMAIL_FAILED',
+			response,
+		} as const );
+
+	const clearErrors = () =>
+		( {
+			type: 'CLEAR_ERRORS',
+		} as const );
+
+	const startPollingTask = ( pollingTaskId: number ) =>
+		( {
+			type: 'START_POLLING_TASK',
+			pollingTaskId,
+		} as const );
+
+	function* submitUsernameOrEmail( usernameOrEmail: string ) {
+		yield clearErrors();
+		const escaped = encodeURIComponent( usernameOrEmail );
+
+		try {
+			const authOptions: AuthOptionsSuccessResponse = yield wpcomRequest( {
+				path: `/users/${ escaped }/auth-options`,
+				apiVersion: '1.1',
+			} );
+
+			yield receiveAuthOptions( authOptions, usernameOrEmail );
+
+			if ( authOptions.passwordless ) {
+				try {
+					const emailResponse: SendLoginEmailSuccessResponse = yield wpcomRequest( {
+						path: `/auth/send-login-email`,
+						apiVersion: '1.2',
+						method: 'post',
+						body: {
+							email: usernameOrEmail,
+
+							// TODO Send the correct locale
+							lang_id: 1,
+							locale: 'en',
+
+							client_id,
+							client_secret,
+						},
+					} );
+
+					yield receiveSendLoginEmail( emailResponse );
+				} catch ( err ) {
+					yield receiveSendLoginEmailFailed( err as SendLoginEmailErrorResponse );
+				}
+			}
+		} catch ( err ) {
+			yield receiveAuthOptionsFailed( err as AuthOptionsErrorResponse );
+		}
+	}
+
+	const receiveWpLogin = ( response: WpLoginSuccessResponse ) =>
+		( {
+			type: 'RECEIVE_WP_LOGIN',
+			response,
+		} as const );
+
+	const receiveWpLoginFailed = ( response: WpLoginErrorResponse ) =>
+		( {
+			type: 'RECEIVE_WP_LOGIN_FAILED',
+			response,
+		} as const );
+
+	function* submitPassword( password: string ) {
+		yield clearErrors();
+		const username: string = yield select( STORE_KEY, 'getUsernameOrEmail' );
+
+		try {
+			const loginResponse = yield* wpLogin( 'login-endpoint', {
+				remember_me: true,
+				username,
+				password,
+			} );
+
+			if ( ! loginResponse.success ) {
+				yield receiveWpLoginFailed( loginResponse );
+			} else if ( loginResponse.data.two_step_notification_sent ) {
+				yield receiveWpLogin( loginResponse );
+
+				const twoFactorResponse = yield* handle2fa( loginResponse.data );
+				if ( twoFactorResponse.success ) {
+					yield* handleSuccessfulLogin( twoFactorResponse );
+				} else if ( twoFactorResponse.success === false ) {
+					yield receiveWpLoginFailed( twoFactorResponse );
+				} else {
+					// If success is undefined then 2fa polling was canceled
+				}
+			} else {
+				yield* handleSuccessfulLogin( loginResponse );
+			}
+		} catch ( e ) {
+			const error = {
+				code: ( e as Error ).name,
+				message: ( e as Error ).message,
+			};
+
+			yield receiveWpLoginFailed( {
+				success: false,
+				data: { errors: [ error ] },
+			} );
+		}
+	}
+
+	function* handleSuccessfulLogin( response: WpLoginSuccessResponse ) {
+		if ( loadCookiesAfterLogin ) {
+			yield reloadProxy();
+			// Need to rerequest access after the proxy is reloaded
+			yield requestAllBlogsAccess();
+		}
+
+		if ( response.data.two_step_notification_sent === undefined ) {
+			yield remoteLoginUser( response.data.token_links );
+		}
+
+		yield receiveWpLogin( response );
+	}
+
+	function* handle2fa(
+		loginResponseData: Exclude< WpLoginSuccessResponse[ 'data' ], LoginCompleteData >
+	) {
+		switch ( loginResponseData.two_step_notification_sent ) {
+			case 'push':
+				return yield* handlePush2fa( loginResponseData );
+		}
+	}
+
+	function* handlePush2fa( {
+		user_id,
+		push_web_token,
+		two_step_nonce_push,
+	}: PushNotificationSentData ) {
+		let two_step_nonce = two_step_nonce_push;
+
+		const pollingTaskId = getNextTaskId();
+		yield startPollingTask( pollingTaskId );
+
+		while ( true ) {
+			const currentPollingTaskId: number = yield select( STORE_KEY, 'getPollingTaskId' );
+
+			if ( currentPollingTaskId !== pollingTaskId ) {
+				// Polling has been canceled, either by `reset()` or by a subsequent call to log in
+				return { success: undefined, canceled: true };
+			}
+
+			try {
+				const response: WpLoginResponse = yield* wpLogin( 'two-step-authentication-endpoint', {
+					remember_me: true,
+					auth_type: 'push',
+					user_id,
+					two_step_nonce,
+					two_step_push_token: push_web_token,
+				} );
+
+				if ( response.success || ! response.data.two_step_nonce ) {
+					return response;
+				}
+
+				two_step_nonce = response.data.two_step_nonce;
+			} catch ( e ) {
+				// Ignore network errors, they may continue
+			}
+
+			yield wait( POLL_APP_PUSH_INTERVAL_SECONDS * 1000 );
+		}
+	}
+
+	type WpLoginAction = 'two-step-authentication-endpoint' | 'login-endpoint';
+
+	function* wpLogin( action: WpLoginAction, body: Record< string, unknown > ) {
+		const response: { body: WpLoginResponse } = yield fetchAndParse(
+			// TODO Wrap this in `localizeUrl` from lib/i18n-utils
+			'https://wordpress.com/wp-login.php?action=' + encodeURIComponent( action ),
+			{
+				credentials: 'include',
+				method: 'POST',
+				headers: {
+					Accept: 'application/json',
+					'Content-Type': 'application/x-www-form-urlencoded',
+				},
+				body: stringify( {
+					client_id,
+					client_secret,
+					...body,
+				} ),
+			}
+		);
+
+		return response.body as WpLoginResponse;
+	}
+
+	return {
+		reset,
+		clearErrors,
+		receiveAuthOptions,
+		receiveAuthOptionsFailed,
+		receiveWpLogin,
+		receiveWpLoginFailed,
+		receiveSendLoginEmail,
+		receiveSendLoginEmailFailed,
+		submitPassword,
+		submitUsernameOrEmail,
+		startPollingTask,
+	};
+}
+
+type ActionCreators = ReturnType< typeof createActions >;
+
+export type Action =
+	| ReturnType<
+			| ActionCreators[ 'reset' ]
+			| ActionCreators[ 'clearErrors' ]
+			| ActionCreators[ 'receiveAuthOptions' ]
+			| ActionCreators[ 'receiveAuthOptionsFailed' ]
+			| ActionCreators[ 'receiveWpLogin' ]
+			| ActionCreators[ 'receiveWpLoginFailed' ]
+			| ActionCreators[ 'receiveSendLoginEmail' ]
+			| ActionCreators[ 'receiveSendLoginEmailFailed' ]
+			| ActionCreators[ 'startPollingTask' ]
+	  >
+	// Type added so we can dispatch actions in tests, but has no runtime cost
+	| { type: 'TEST_ACTION' };

package/src/auth/constants.ts

@@ -0,0 +1,2 @@
+export const STORE_KEY = 'automattic/auth';
+export const POLL_APP_PUSH_INTERVAL_SECONDS = 5;

package/src/auth/controls.ts

@@ -0,0 +1,55 @@
+/**
+ * Creates a promise that will be rejected after a given timeout
+ *
+ * @param ms amount of milliseconds till reject the promise
+ * @returns a promise that will be rejected after ms milliseconds
+ */
+const createTimingOutPromise = ( ms: number ) =>
+	new Promise( ( _, reject ) => {
+		setTimeout( () => reject( new Error( `timeout of ${ ms } reached` ) ), ms );
+	} );
+
+/**
+ * Makes a request to a given link in an iframe
+ *
+ * @param loginLink the login link to load
+ * @param requestTimeout amount of time to allow the link to load, default 25s
+ * @returns a promise that will be resolved if the link was successfully loaded
+ */
+const makeRemoteLoginRequest = ( loginLink: string, requestTimeout = 25000 ) => {
+	if ( typeof document === 'undefined' ) {
+		return Promise.reject();
+	}
+
+	let iframe: HTMLIFrameElement | undefined;
+	const iframeLoadPromise = new Promise( ( resolve ) => {
+		iframe = document.createElement( 'iframe' );
+		iframe.style.display = 'none';
+		iframe.setAttribute( 'scrolling', 'no' );
+		iframe.onload = resolve;
+		iframe.src = loginLink;
+		document.body.appendChild( iframe );
+	} );
+
+	const removeIframe = () => {
+		iframe?.parentElement?.removeChild( iframe );
+	};
+
+	return Promise.race( [ iframeLoadPromise, createTimingOutPromise( requestTimeout ) ] ).then(
+		removeIframe,
+		removeIframe
+	);
+};
+
+export const remoteLoginUser = ( loginLinks: string[] ) =>
+	( { type: 'REMOTE_LOGIN_USER', loginLinks } as const );
+
+export const controls = {
+	REMOTE_LOGIN_USER: ( { loginLinks }: ReturnType< typeof remoteLoginUser > ) =>
+		Promise.all(
+			loginLinks
+				.map( ( loginLink ) => makeRemoteLoginRequest( loginLink ) )
+				// make sure we continue even when a remote login fails
+				.map( ( promise ) => promise.catch( () => undefined ) )
+		),
+};

package/src/auth/index.ts

@@ -0,0 +1,41 @@
+import { registerStore } from '@wordpress/data';
+import { controls as dataControls } from '@wordpress/data-controls';
+import { requestAllBlogsAccess } from 'wpcom-proxy-request';
+import { controls as wpcomRequestControls } from '../wpcom-request-controls';
+import { createActions, ActionsConfig } from './actions';
+import { STORE_KEY } from './constants';
+import { controls } from './controls';
+import reducer, { State } from './reducer';
+import * as selectors from './selectors';
+import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
+
+export * from './types';
+export type { State };
+
+let isRegistered = false;
+export function register( config: ActionsConfig ): typeof STORE_KEY {
+	if ( ! isRegistered ) {
+		isRegistered = true;
+
+		requestAllBlogsAccess().catch( () => {
+			throw new Error( 'Could not get all blog access.' );
+		} );
+
+		registerStore< State >( STORE_KEY, {
+			actions: createActions( config ),
+			controls: {
+				...controls,
+				...dataControls,
+				...wpcomRequestControls,
+			} as any,
+			reducer,
+			selectors,
+		} );
+	}
+	return STORE_KEY;
+}
+
+declare module '@wordpress/data' {
+	function dispatch( key: typeof STORE_KEY ): DispatchFromMap< ReturnType< typeof createActions > >;
+	function select( key: typeof STORE_KEY ): SelectFromMap< typeof selectors >;
+}

package/src/auth/reducer.ts

@@ -0,0 +1,103 @@
+import { combineReducers } from '@wordpress/data';
+import { getNextTaskId } from './utils';
+import type { Action } from './actions';
+import type { LoginFlowState } from './types';
+import type { Reducer } from 'redux';
+
+export const loginFlowState: Reducer< LoginFlowState, Action > = (
+	state = 'ENTER_USERNAME_OR_EMAIL',
+	action
+) => {
+	switch ( action.type ) {
+		case 'RESET_LOGIN_FLOW':
+			return 'ENTER_USERNAME_OR_EMAIL';
+
+		case 'RECEIVE_AUTH_OPTIONS_FAILED':
+			return 'ENTER_USERNAME_OR_EMAIL';
+
+		case 'RECEIVE_AUTH_OPTIONS':
+			if ( ! action.response.passwordless ) {
+				return 'ENTER_PASSWORD';
+			}
+			return state;
+
+		case 'RECEIVE_WP_LOGIN':
+			if ( action.response.data.two_step_notification_sent ) {
+				return 'WAITING_FOR_2FA_APP';
+			}
+			return 'LOGGED_IN';
+
+		case 'RECEIVE_WP_LOGIN_FAILED':
+			if ( state === 'WAITING_FOR_2FA_APP' ) {
+				return 'ENTER_PASSWORD';
+			}
+			return state;
+
+		case 'RECEIVE_SEND_LOGIN_EMAIL':
+			if ( action.response.success ) {
+				return 'LOGIN_LINK_SENT';
+			}
+			return state;
+
+		default:
+			return state;
+	}
+};
+
+export const usernameOrEmail: Reducer< string, Action > = ( state = '', action ) => {
+	switch ( action.type ) {
+		case 'RESET_LOGIN_FLOW':
+			return '';
+
+		case 'RECEIVE_AUTH_OPTIONS':
+			return action.usernameOrEmail;
+
+		default:
+			return state;
+	}
+};
+
+export interface ErrorObject {
+	code: string;
+	message: string;
+}
+
+export const errors: Reducer< ErrorObject[], Action > = ( state = [], action ) => {
+	switch ( action.type ) {
+		case 'RESET_LOGIN_FLOW':
+		case 'CLEAR_ERRORS':
+			return [];
+
+		case 'RECEIVE_WP_LOGIN_FAILED':
+			return action.response.data.errors;
+
+		case 'RECEIVE_AUTH_OPTIONS_FAILED':
+		case 'RECEIVE_SEND_LOGIN_EMAIL_FAILED':
+			return [
+				{
+					code: action.response.error,
+					message: action.response.message,
+				},
+			];
+
+		default:
+			return state;
+	}
+};
+
+const pollingTaskId: Reducer< number, Action > = ( state = getNextTaskId(), action ) => {
+	switch ( action.type ) {
+		case 'RESET_LOGIN_FLOW':
+			return getNextTaskId();
+		case 'START_POLLING_TASK':
+			return action.pollingTaskId;
+		default:
+			return state;
+	}
+};
+
+const reducer = combineReducers( { errors, loginFlowState, usernameOrEmail, pollingTaskId } );
+
+export type State = ReturnType< typeof reducer >;
+
+export default reducer;

package/src/auth/selectors.ts

@@ -0,0 +1,12 @@
+import type { State } from './reducer';
+
+export const getErrors = ( state: State ) => state.errors;
+
+export const getFirstError = ( state: State ) =>
+	state.errors.length ? state.errors[ 0 ] : undefined;
+
+export const getLoginFlowState = ( state: State ) => state.loginFlowState;
+
+export const getUsernameOrEmail = ( state: State ) => state.usernameOrEmail;
+
+export const getPollingTaskId = ( state: State ) => state.pollingTaskId;