[$375] [HOLD for payment 2024-08-01] [Wave Collect] [Xero] Add 2FA requirement in Authorization flow

[francoisl]

Problem

In order to remain compliant with Xero's third-party app requirements, we need to force workspace admins to enable 2FA before they can use the connection.

Additional internal context

• #whatsnext post
• https://github.com/Expensify/Expensify/issues/397316

Solution

• For new connections:

  • Before starting the OAuth flow, make sure the admin has 2FA enabled. If they don't, show the 2FA enablement page. After they finish setting it up, automatically resume the Xero auth flow.
  • See mockups in this comment below

• For existing connections:

  • If a user signs in and they're admin on a workspace that is connected to Xero but don't have 2FA enabled, show them the 2FA setup steps upon signing in
  • See mockups from this comment

cc @lakchote @zanyrenney

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f129776196b2ac5f
• Upwork Job ID: 1821257266596661328
• Last Price Increase: 2024-08-07

[melvin-bot]

Triggered auto assignment to @sakluger (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[francoisl]

I'll add a few mockups when I have edit access to Figma again.

[dannymcclain]

@francoisl let me know if you need me to mock anything up or take care of anything in Figma! 🤝

[francoisl]

Thanks. I got an email from Figma saying that Jon gave me edit access but I still can't seem to edit anything.

Basically I was trying to edit the Initial Setup part of the Xero mockups and add the 2FA flow in between. I was thinking of making two variations:

• one where we show the Two-factor authentication flow directly after you click Set up
• one with an intermediary modal with additional context, with text like "To connect to Xero, please enable Two-factor authentication first [Continue]"

[dannymcclain]

Super weird. I see that you were upgraded yesterday, but when I went into the file it still said you were requesting access (I gave it to you). I wonder if that file just hadn't been refreshed or something since Jon upgraded you. Anyways, try it again if you want, or I'm happy to do some jammin'.

[dannymcclain]

Added a little flow here in Figma.

I think it's better to tell people "Hey you need to enable 2fa to use xero" so I like including the intermediary modal.

[francoisl]

That's great, thanks Danny!

Looks like I was wrong about the sign-in flow and <ValidateLoginPage> doesn't do what I expected, so we'll also need to make some changes to make people enable 2FA when they sign in. I'm thinking we add an extra step after entering the magic code. Here's a rough draft - Figma here:

I changed the text description, but we can also make it more generic to accommodate the case when people sign in and they need to enable 2FA because they're on a domain group with that requirement.