[$70] Error message for My Teams if user not logged in

[sandhiyakavi]

Description:

Error message "Error: Request failed with status code: 401" is displayed in My Teams page if user not logged in. Proper Error message should be displayed.

[maxceem]

Task:

• If the user is not logged-in and tries to access any page inside TaaS App we have to redirect the user to the login page.

• To redirect user to login page we have to reuse a method login():

  import { login } from "@topcoder/micro-frontends-navbar-app";

• To detect if user is logged-in or no, we have to use method getAuthUserTokens

   import { getAuthUserTokens } from "@topcoder/micro-frontends-navbar-app";

• If promise returns tokenV3 then user logged-in, we should not do anything and just show page

• If there is no tokenV3 returned, then user is logged-out, and we have to redirect to login page using login() method

• If the promise is rejected, then some error happens during Authentication. So instead of the page, we have to show an error message.

• This has to be implemented some general way. We should not repeat the same logic again and again. We should be able to enable/disable authentication inside these lines, we should not update components of the pages to enable/disable authentication.

      <MyTeamsList path="/taas/myteams" />
      <MyTeamsDetails path="/taas/myteams/:teamId" />
      <PositionDetails path="/taas/myteams/:teamId/positions/:positionId" />

  • For example, we can wrap these page components in some <Authentication> component, or even set flags like:
    <MyTeamsList path="/taas/myteams" auth /> - to enable authentication.

[maxceem]

Contest https://www.topcoder.com/challenges/30161555 has been created for this ticket.

This is an automated message for maxceem via Topcoder X

[maxceem]

@yoution this is open for pick up now.

[yoution]

@maxceem please assign to me

[maxceem]

Contest https://www.topcoder.com/challenges/30161555 has been updated - it has been assigned to yoution.

This is an automated message for maxceem via Topcoder X

[maxceem]

This ticket was not processed for payment. If you would like to process it for payment, please reopen it, add the tcx_FixAccepted label, and then close it again

This is an automated message for maxceem via Topcoder X

[maxceem]

@yoution I found one edge case.

1. Imagin that Teams List page doesn't have authentication:

   

2. And let's say, authentication takes 10 seconds, so I patch method getAuthUserTokens to simulate delay:

   export const getAuthUserTokens = () => {
     const { auth } = store.getState();
   
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         console.warn("finally got response, but user is logged out");
         resolve({});
       }, 10000);
     });
   };

3. Now I'm trying to open a page of some team like http://localhost:8080/taas/myteams/111 I would see a loading indicator because getAuthUserTokens works to check if the user is logged-in or no. During this time I click to the My Teams menu item and go to the "My Teams" page, which doesn't require authentication. But I'm redirected to the Auth page, because logic that started on the Team Detail page continue here

See demo video https://monosnap.com/file/9XapHTygTuFlkGRnTu4yUmqT83jdmA.

[maxceem]

@sandhiyakavi this is ready for QA. But instead of showing error we've implemented the next logic, which is similar to other Topcoder apps:

• If the user is not logged-in and tries to access any page inside TaaS App we have to redirect the user to the login page.

[sandhiyakavi]

@maxceem If we enter https://platform.topcoder-dev.com/taas , it is not directing to auth0 login page instead its displaying below page

For other below URLs its directing to login page,
https://platform.topcoder-dev.com/taas/myteams
https://platform.topcoder-dev.com/taas/myteams/16685
https://platform.topcoder-dev.com/taas/myteams/16870/positions/d958e19e-0963-4da6-8227-1bc9f44a24cf

[maxceem]

@sandhiyakavi at the moment TaaS App doesn't support such a page as https://platform.topcoder-dev.com/taas. And we don't have any link which leads to this page. What would you expect to see on this page?

[maxceem]

@sandhiyakavi actually on the second thought, I've implemented redirect from https://platform.topcoder-dev.com/taas to https://platform.topcoder-dev.com/taas/myeams. So if someone accidentally types that URL they would be redirected to the Teams List. Could you please have a look if it works good for you.

[sandhiyakavi]

@maxceem Verified. Page is getting redirected to Teams List.

bandicam.2021-01-11.18-13-31-411.mp4

[maxceem]

Thank you @sandhiyakavi.

[maxceem]

Payment task has been updated: https://software.topcoder.com/review/actions/ViewProjectDetails?pid=30161555

This is an automated message for maxceem via Topcoder X