Repository navigation
[HOLD for payment 2024-02-26] [$500] Add support for redirecting user to a target URL(via exitTo query param) when they click on the magic link code #36325
Description
Activity
- addedDailyKSv2KSv2BugSomething is broken. Auto assigns a BugZero manager.Something is broken. Auto assigns a BugZero manager.
on Feb 12, 2024 Triggered auto assignment to @bfitzexpensify (
Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.- changed the title
[-]Add support for redirecting user to a target URL(via exitTo query param) when they are already logged in and click on a deep link with magic code[/-][+]Add support for redirecting user to a target URL(via exitTo query param) when they click on the magic link code[/+]on Feb 12, 2024 - addedExternalAdded to denote the issue can be worked on by a contributorAdded to denote the issue can be worked on by a contributorHelp WantedApply this label when an issue is open to proposals by contributorsApply this label when an issue is open to proposals by contributors
on Feb 12, 2024 Job added to Upwork: https://www.upwork.com/jobs/~01a6d9657733b55abf
- changed the title
[-]Add support for redirecting user to a target URL(via exitTo query param) when they click on the magic link code[/-][+][$500] Add support for redirecting user to a target URL(via exitTo query param) when they click on the magic link code[/+]on Feb 12, 2024 Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (
External)Proposal
Please re-state the problem that we are trying to solve in this issue.
Add support for redirecting user to a target URL(via exitTo query param) when they click on the magic link code
What is the root cause of that problem?
new feature
What changes do you think we should make in order to solve the problem?
we need to modify the follwoing
useEffectto check if theexitTois present then it will navigate to it instead of the goBackApp/src/pages/ValidateLoginPage/index.tsx
Lines 16 to 28 in 484116c
useEffect(() => { // Wait till navigation becomes available Navigation.isNavigationReady().then(() => { if (session?.authToken) { // If already signed in, do not show the validate code if not on web, // because we don't want to block the user with the interstitial page. Navigation.goBack(); } else { Session.signInWithValidateCodeAndNavigate(Number(accountID), validateCode); } }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); additionaly we need to add another param
exitToin the signInWithValidateCodeAndNavigate functionand use it in the navigation:App/src/libs/actions/Session/index.ts
Lines 507 to 510 in 207385a
function signInWithValidateCodeAndNavigate(accountID: number, validateCode: string, twoFactorAuthCode = '') { signInWithValidateCode(accountID, validateCode, twoFactorAuthCode); Navigation.navigate(ROUTES.HOME); } function signInWithValidateCodeAndNavigate(accountID: number, validateCode: string, twoFactorAuthCode = '', exitTo = ROUTES.HOME) { signInWithValidateCode(accountID, validateCode, twoFactorAuthCode); Navigation.navigate(exitTo); }
Proposal
Please re-state the problem that we are trying to solve in this issue.
Add support for redirecting user to a target URL(via exitTo query param) when they click on the magic link code
What is the root cause of that problem?
New feature
What changes do you think we should make in order to solve the problem?
we should add the new
exitToparam here:
App/src/libs/Navigation/types.ts
Lines 443 to 446 in 72ffe93
[SCREENS.VALIDATE_LOGIN]: { accountID: string; validateCode: string; };
and here:
App/src/pages/ValidateLoginPage/index.website.tsx
Lines 16 to 18 in 72ffe93
route: { params: {accountID, validateCode}, },
and here:App/src/pages/ValidateLoginPage/index.tsx
Line 12 in 72ffe93
params: {accountID, validateCode}, we should check if an
exitToparam is provided, in this case, we should navigate to it. here, and here.
for native, we should replace heresignInWithValidateCodeAndNavigatewithsignInWithValidateCodeand check if anexitToparam is provided, in this case, we should navigate to it, here, and here.here is a draft PR with code changes for testing : #36390
here is the result recordings:
If the user is not logged in (and initiated the login process on the same browser)
1.Recording.2024-02-13.015036.mp4
If the user is not logged in (and initiated the login process in another browser)
3.Recording.2024-02-13.015229.mp4
If the user is already logged in
2.Recording.2024-02-13.015620.mp4
What alternative solutions did you explore? (Optional)
N/A
Reacted by Vivek KumarI was already playing with changes similar to above, can you please add a branch for testing in your proposal, thanks.
25 remaining items
@rayane-djouah Another improvement that we can make here is that the magic code page appears for a moment. QA team shared this video.
306718766-3c0f57f0-a683-4849-a2c3-4ea77b84d505.mp4
Can you look into it and see if we can improve this.
Reacted by rayane-dReminder set to pay
- addedReviewingHas a PR in reviewHas a PR in reviewWeeklyKSv2KSv2DailyKSv2KSv2and removedDailyKSv2KSv2WeeklyKSv2KSv2
on Feb 25, 2024 @techievivek just checking in on your comment here - do you consider this a regression from the solution used in this issue?
No, we can't classify it as a regression because it doesn't cause any general breakage. It would simply contribute to a smoother transition.
Reacted by Ben FitzpatrickGotcha, thanks for clarifying.
Payment summary:
C+: $500 to be paid to @allroundexperts through NewDot Manual Requests
Contributor: $500 to be paid to @rayane-djouah via Upwork - complete ✅@allroundexperts, a reminder to complete the BZ checklist when you get a chance - thanks!
Reacted by rayane-dBump on the BZ checklist @allroundexperts - thank you!
Reacted by Sibtain Ali@bfitzexpensify This is a new feature and checklist isn't needed here.
Reacted by Ben FitzpatrickCool - closing this out. Thanks everyone!
$500 approved for @allroundexperts based on summary.
Part of #34166
Please go through the description of the above issue carefully before you post any questions.
We aim to enhance user experience by allowing first-time users to directly access our product feature without a need to manually go through the login process. This enhancement involves embedding a magic code in the offline activity email sent to users.
Magic Link Format: https://new.expensify.com/v//?exitTo=valid_target_path_in_newDot
https://new.expensify.com/v/123/000000?exitTo=r/12345
Functional Requirements:
If the user is not logged in, the magic code should trigger the sign-in process automatically and redirect the user to the target URL specified in the exitTo parameter of the link once the sign-in logic is successfully executed.
If the user is already logged in, the magic code sign-in should be skipped, and the user should be directly redirected to the exitTo URL.
Resources:
You will probably need to play with ValidateLoginPage logic
Website file: https://github.com/Expensify/App/blob/main/src/pages/ValidateLoginPage/index.website.tsx
Other platform: https://github.com/Expensify/App/blob/main/src/pages/ValidateLoginPage/index.tsx
Let me know if anything is unclear or if you need help with anything. Thanks.
CC @MitchExpensify
Upwork Automation - Do Not Edit