SIWA: Make sure we have sent the apple user info to the server before redirecting

client/me/social-login/action-button.jsx

@@ -28,6 +28,7 @@ class SocialLoginActionButton extends Component {
 		connectSocialUser: PropTypes.func.isRequired,
 		disconnectSocialUser: PropTypes.func.isRequired,
 		socialServiceResponse: PropTypes.object,
+		redirectUri: PropTypes.string,
 	};
 
 	state = {
@@ -85,7 +86,7 @@ class SocialLoginActionButton extends Component {
 	};
 
 	render() {
-		const { service, isConnected, isUpdatingSocialConnection, translate } = this.props;
+		const { service, isConnected, isUpdatingSocialConnection, redirectUri, translate } = this.props;
 
 		const { fetchingUser } = this.state;
 
@@ -121,8 +122,6 @@ class SocialLoginActionButton extends Component {
 
 		if ( service === 'apple' ) {
 			const uxMode = config.isEnabled( 'sign-in-with-apple/redirect' ) ? 'redirect' : 'popup';
-			const redirectUri =
-				typeof window !== 'undefined' ? window.location.origin + window.location.pathname : null;
 			return (
 				<AppleLoginButton
 					clientId={ config( 'apple_oauth_client_id' ) }

client/me/social-login/index.jsx

@@ -41,7 +41,9 @@ class SocialLogin extends Component {
 	};
 
 	renderContent() {
-		const { translate, errorUpdatingSocialConnection } = this.props;
+		const { translate, errorUpdatingSocialConnection, path } = this.props;
+
+		const redirectUri = typeof window !== 'undefined' ? window.location.origin + path : null;
 
 		return (
 			<div>
@@ -64,6 +66,7 @@ class SocialLogin extends Component {
 					<SocialLoginService
 						service="apple"
 						icon={ <AppleIcon /> }
+						redirectUri={ redirectUri }
 						socialServiceResponse={
 							this.props.socialService === 'apple' ? this.props.socialServiceResponse : null
 						}

client/me/social-login/service.jsx

@@ -16,6 +16,7 @@ const SocialLoginService = ( {
 	service,
 	icon,
 	isConnected,
+	redirectUri,
 	socialConnectionEmail,
 	socialServiceResponse,
 } ) => (
@@ -29,6 +30,7 @@ const SocialLoginService = ( {
 
 			<div className="social-login__header-action">
 				<SocialLoginActionButton
+					redirectUri={ redirectUri }
 					service={ service }
 					isConnected={ isConnected }
 					socialServiceResponse={ socialServiceResponse }

server/api/sign-in-with-apple.js

@@ -26,12 +26,18 @@ function loginWithApple( request, response, next ) {
 	}
 
 	const idToken = request.body.id_token;
-	const user = request.body.user || {};
+	const user = JSON.parse( request.body.user || '{}' );
 	const userEmail = user.email;
 	const userName = user.name
 		? `${ user.name.firstName || '' } ${ user.name.lastName || '' }`.trim()
 		: undefined;
 
+	request.user_openid_data = {
+		id_token: idToken,
+		user_email: userEmail,
+		user_name: userName,
+	};
+
 	// An `id_token` is not enough to log a user in (one might have 2FA enabled or an existing account with the same email)
 	// Thus we need to return `id_token` to the front-end so it can handle all sign-up/sign-in cases.
 	// However Apple sends the user data only once,
@@ -41,20 +47,25 @@ function loginWithApple( request, response, next ) {
 			.undocumented()
 			.usersSocialNew( {
 				...loginEndpointData(),
-				id_token: idToken,
-				user_email: userEmail,
-				user_name: userName,
+				...request.user_openid_data,
 			} )
 			.catch( () => {
 				// ignore errors
-			} );
+			} )
+			.finally( next );
+	} else {
+		next();
+	}
+}
+
+function redirectToCalypso( request, response, next ) {
+	if ( ! request.user_openid_data ) {
+		return next();
 	}
 
 	const originalUrlPath = request.originalUrl.split( '#' )[ 0 ];
 	const hashString = qs.stringify( {
-		id_token: idToken,
-		user_email: userEmail,
-		user_name: userName,
+		...request.user_openid_data,
 		client_id: config( 'apple_oauth_client_id' ),
 		state: request.body.state,
 	} );
@@ -66,6 +77,7 @@ module.exports = function( app ) {
 	return app.post(
 		[ '/log-in/apple/callback', '/start/user', '/me/security/social-login' ],
 		bodyParser.urlencoded(),
-		loginWithApple
+		loginWithApple,
+		redirectToCalypso
 	);
 };