Add SIWA support

[jaclync]

Fixes #2643 Fixes #2654

• [x] Make sure WordPressAuthenticator PR is merged: https://github.com/wordpress-mobile/WordPressAuthenticator-iOS/pull/373

There are design changes in this PR now that we're also using the prologue screen from WPAuthenticator. We're updating the design of the empty store screen per p91TBi-38l-p2#comment-1534, so the design changes in this PR are likely just for release 4.9. We originally wanted to target this for 4.8, but there are two new strings and we've passed the translation window for 4.8 so Aaron thought it'd be nicer to just target develop for 4.9.

Changes

• Enabled SIWA in project's "Signing & Capabilities" tab
• Updated WordPressAuthenticator pod to include the changes to enable customizations of the prologue screens in this PR
• In AppDelegate, in case the app presents the empty stores screen when it remembers the last login, added storePickerCoordinator?.onDismiss to display the authenticator login flow when the user taps to try with another account
• Added a new semantic color authPrologueBottomBackgroundColor, and updated the styles in AuthenticationManager for the prologue screens now that we're reusing the screens in the authenticator library. Our current design has the same colors for the bottom buttons container UI in both light and dark mode so we're passing the colors in light mode (previously, we forced the bottom buttons container UI to be light mode only). https://github.com/woocommerce/woocommerce-ios/blob/74d9f5b92b55fc9fa51336e4d72e1d3c0831bcf7/WooCommerce/Classes/Authentication/Prologue/LoginPrologueViewController.swift#L120-L123
• In AuthenticationManager, also passed in our LoginPrologueViewController to be the child view controller of the prologue top container view. Some more options are updated/added to support the prologue screens without sign up UX and with SIWA enabled. The code to display authentication was updated to show the sign in flow from WPAuthenticator library.
  • Sign up is a special case for SIWA, since the backend creates a WP.com account for the user if there's no WP.com account linked to the Apple ID yet. In this case, we sync the credentials and present the store picker screen (likely empty).
• Removed the Log In CTA at the bottom from LoginPrologueViewController, and updated the colors to use the new semantic color authPrologueBottomBackgroundColor
• Updated EmptyStoresTableViewCell - however, this cell will be removed when we implement the updated design soon (p91TBi-38l-p2#comment-1534) since it doesn't work in the new design anymore.
• Added func restartAuthentication() to StorePickerViewControllerDelegate when the user taps to try signing in with another account from the store picker screen (restarting the auth process). Implemented this in StorePickerCoordinator to dismiss the controller based on how it's presented in the first place in showStorePicker.
• Removed unused outlets/views in StorePickerViewController and its xib, and presented the Jetpack setup webview when the user taps on the "Connect the store with Jetpack" CTA
• Updated unit tests

Testing

• Log out from the store
• Tap on the Log In button --> should see a sheet with 3 sign in methods: WP.com, Google, and Apple. There is also a link below to enter site address first. Make sure the event login_prologue_jetpack_login_button_tapped is fired in the console as well.
• Make sure each login method works, especially the Apple one

Example screenshots

Prologue screen

\	light	dark
develop
PR branch
PR branch - sign in sheet

Empty stores screen

light	dark

Update release notes:

• [x] I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[rachelmcr]

I tested and found one issue:

When I try to log in with an Apple ID that isn't connected to a WordPress.com account, and the email doesn't match a WordPress.com account email (so there's no related WordPress.com account at all — I'd need a new account) the login silently fails.

I can see that a new WordPress.com account was created behind the scenes, but I'm not logged in to the new account in the app — the spinner just disappears and I'm left on the prologue screen.

I don't see any informative errors in the console when that happens, only a couple stats-related errors:

⚠️ Could not convert WPAnalyticsStat with value: 45
⚠️ Could not convert WPAnalyticsStat with value: 443

Steps to reproduce:

1. Ensure you are using an Apple ID with an email address that is not being used on a WordPress.com account.
2. Ensure your Apple ID is not linked to a WordPress.com account.
3. Ensure the WordPress app is not listed among the apps using your Apple ID in your Apple ID Password & Security settings (to ensure an entirely clean slate when you try to log in).
4. Open the WooCommerce app.
5. Select Log In.
6. Select Continue with Apple.
7. Go through the Apple ID screens to share your Apple ID details with the app.
8. Notice the spinner that appears, and then disappears. Result: Silent failure.
9. At this point you can try again to log in with Apple (steps 5-7) and notice that this time it logs you in to the new account, and you end up on the empty stores screen.

[rachelmcr]

Another small comment, just subjective feedback:

On the empty stores screen, the button says "Connect your app with Jetpack." I don't think of it as "my app" in this context. Since the text above the button says "Unable to find WooCommerce stores connected to your account" would it make sense to say "Connect your store with Jetpack" (as in "connect your store to your account")? Alternately, maybe it could say "Connect to the app with Jetpack"?

[rachelmcr]

I can also confirm that I tested the following scenarios with expected results:

• WordPress.com email login flow (completed login with password, no 2FA)
• Google account with 2FA (already connected to WordPress.com)
• Google account without 2FA (already connected to WordPress.com)
• Unconnected Google account (matches WordPress.com account email but not connected via social login yet)
• Google account but no matching WordPress.com account (didn't log in but got expected explanatory screen)
• Apple ID without 2FA (already connected to WordPress.com, no Woo sites)
• Apple ID with 2FA (already connected to WordPress.com, no Woo sites)
• Unconnected Apple ID (matches WordPress.com account email but not connected via social login yet)
• Site address login flow (from prologue screen)
• Site address login flow (from WordPress.com email screen)

[peril-woocommerce[bot]]

You can trigger an installable build for these changes by visiting CircleCI here.

[peril-woocommerce[bot]]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[astralbodies]

Nice catch, @rachelmcr! I've updated the PR to show the site picker for newly signed up users. It's a bit of a hack because the Authenticator normally synchronizes credentials after creating the wpcom account, but not for us in SIWA. Our sync code is not called after signup, so I force the call between signup and showing the site list picker.

[jaclync]

Thanks a lot for testing SIWA so thoroughly @rachelmcr! Great catch on the first-time SIWA scenario, I actually saw it once but couldn't reproduce it after I disconnected the app from my Apple ID (I was missing your steps 1 and 2 since a WP.com was already created).

I just tested Aaron's change and it worked and created a new WP.com account after I updated the email of the previous WP.com account associated with the Apple ID. I also tried deleting my WP.com account with the private Apple email but that didn't seem to work (SIWA still linked to that deleted WP.com account for me to enter the password). This is probably an edge case 😅

Also thanks for the feedback on the empty stores screen! "Connect your store with Jetpack" does sound more clear, I updated the copy and screenshots in the PR description.

@woocommerce/ios-developers would any of you take a look at the WPAuthenticator PR first so I can wrap up there and focus on the PR here?

[shiki]

Thank you for working on this, Jaclyn! 🙏

I reviewed https://github.com/wordpress-mobile/WordPressAuthenticator-iOS/pull/373 and that looks good to me. I assume we will be reviewing this draft PR later, right? I noticed that there are some design issues in dark mode that we'd probably need to fix.

Tested:

• Login with WP ✅
• Login using a site address ✅
• Login with Google ✅
• Sign in with Apple ✅
• Sign in with Apple on an account with stores ✅

⚠️ PSA: I ran the UI tests and they expectedly failed. 🙂

[jaclync]

@shiki nice catch on the failing UI test, I fixed it here: https://github.com/woocommerce/woocommerce-ios/pull/2644/commits/2cbb52006cf9637ce6a6fbb6eae4fed3cb732c76 (passed locally and on CI now!)

and yes, the PR will be updated to be a formal PR when the design changes are finalized with G's input.

[jaclync]

Hey @Garance91540! Here are some screenshots with the color constants that you can find in AuthenticationManager and our semantic colors for further lookup (dark/light mode):

prologue	sign in method sheet

[jaclync]

Looks like the status bar isn't showing properly in light mode. I thought this was a pre-existing condition but based on your PR screenshots, it's introduced by this PR.

great catch @astralbodies! it's fixed in https://github.com/woocommerce/woocommerce-ios/pull/2644/commits/2fd21ce6f755a0655fc5091b6a528d008546ef8a by passing statusBarStyle as .default (auto adjustment based on the view color) since the default value in WPiOS is set to light style :)

[Garance91540]

Hi @jaclync, I'll P2 official updates tomorrow, but in the meantime tagged you in the Figma file with the updated designs.

Let me know if it's possible to:

1. update the button colors with the ones designed
2. update the "jetpack needed" screen

[jaclync]

@woocommerce/ios-developers @Garance91540 the PR is finally ready for review now! I've update the PR to target develop and we'd like to have it for 4.9 (code freeze next Monday). I also updated the PR description to include the latest screenshots of the affected screens. After this PR is wrapped up, I will start working on the updated design for the empty store screen in p91TBi-38l-p2#comment-1534.

[jaclync]

I didn't notice the black background behind the apple logo on dark mode. https://d.pr/i/DvSWGJ Is that something we can't change? If not for the next iterations I'll share designs with all secondary CTAs black on these screens

@Garance91540 I took a look at how the Apple icon was setup, and like you said it is using different icons based on dark/light mode in the authenticator library because it's assuming the secondary button has a dark background in dark mode like in WPiOS. Updating the design to have a dark background for secondary CTAs would be great, and we can try removing the black/white background for the assets (apple-white.pdf and apple-black.pdf)

https://github.com/wordpress-mobile/WordPressAuthenticator-iOS/blob/0b3af0ff19b60e304e02cc82b058d4a57b18e01a/WordPressAuthenticator/Extensions/UIImage+Assets.swift#L45-L47

[jaclync]

I ran into this when testing with no Apple account signed in and when I had to verify my Apple ID email.

@shiki Great point on the generic error! An easy improvement could be to update the copy of the error message:

it doesn't look the prettiest, but it's a small change to make. feel free to suggest other copy too! (cc @Garance91540) if it looks fine to you all, I'll make a PR to WPAuthenticator and update this PR or in a separate PR.

also, since SIWA is only iOS 13+ I added a check to enable SIWA only for iOS 13+ in this commit https://github.com/woocommerce/woocommerce-ios/pull/2644/commits/881d91467f9dc46e4927df2cb46f4f2baf5e1e0f and the screenshots for iOS 13/12:

iOS 13	iOS 12

[astralbodies]

Item of note: I did notice a weird glitch on the SIWA Apple logo, and filed it in the Authenticator repo. https://github.com/wordpress-mobile/WordPressAuthenticator-iOS/issues/392

[jaclync]

Thanks a lot for testing @astralbodies @rachelmcr @shiki and reviewing @shiki @Garance91540 ! I'm going to merge the PR soon, and make a PR in the authenticator library about the SIWA error message (it might not make code freeze by Monday, so possibly targeting the next release)