WIP: fix: Add studio login check to ensure authenticated

[samuelallan72]

Description

Avoid authentication errors in the case where the LMS is logged in, but Studio is not yet authenticated.

Fixes: #1080

Supporting information

Private-ref: https://tasks.opencraft.com/browse/BB-9549

Testing instructions

1. Log in to the LMS as an admin.
2. Navigate to a course, and open the course in Studio, and navigate to the course outline page. Ensure you're on this Authoring MFE, not the Studio views.
3. Copy or bookmark the direct url to the course outline in Authoring.
4. Log out of the LMS.
5. Log back in to the LMS. Do not visit Studio / CMS. (This results in you being logged in to the LMS, but not directly logged into the CMS; this CMS login only happens on first visit to a CMS web page where you are redirected through the lms oauth process)
6. Directly navigate to the Authoring url from step 3. You may notice the page redirect briefly; this is expected, as it's logging you in to the CMS.
7. Try to perform one of the following actions: click the "New unit" button, click the "New subsection" button, click the "New section" button.
8. Verify the action succeeds.
9. Reload the page.
10. Verify the page loads successfully.
11. Try to perform one of the actions (New unit/subsection/section) again.
12. Verify the action succeeds.

Other information

See also #1080 (comment) . There may be alternate or better methods of implementing this.

• Also to consider and test: the case where the user doesn't have access to the course content in the CMS - this may be out of scope here though.
• Need to find an appropriate api endpoint on the CMS to check if the user is logged in (or an alternate method). The current method is hacky.

Best Practices Checklist

We're trying to move away from some deprecated patterns in this codebase. Please
check if your PR meets these recommendations before asking for a review:

• Any new files are using TypeScript (.ts, .tsx).
• Deprecated propTypes, defaultProps, and injectIntl patterns are not used in any new or modified code.
• Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks)
• Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
• Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
• All new i18n messages in messages.ts files have a description for translators to use.
• Imports avoid using ../. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

[openedx-webhooks]

Thanks for the pull request, @samuelallan72!

This repository is currently maintained by @bradenmacdonald.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

• If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
  • This process (including the steps you'll need to take) is documented here.
• If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

• Dependencies

  This PR must be merged before / after / at the same time as ...

• Blockers

  This PR is waiting for OEP-1234 to be accepted.

• Timeline information

  This PR must be merged by XX date because ...

• Partner information

  This is for a course on edx.org.

• Supporting documentation
• Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Update the status of your PR

Your PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate.

---

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

• Overview of Review Process for Community Contributions
• Pull Request Status Guide
• Making changes to your pull request

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

• The size and impact of the changes that it introduces
• The need for product review
• Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

[mphilbrick211]

Hi @samuelallan72 - thanks for this contribution! Please let me know if you have any questions regarding submitting a CLA form. Thanks!

[bradenmacdonald]

@mphilbrick211 Samuel recently joined OpenCraft and should be part of our CLA.

[mphilbrick211]

@mphilbrick211 Samuel recently joined OpenCraft and should be part of our CLA.

Thanks, @bradenmacdonald and welcome, @samuelallan72!

[samuelallan72]

Is anyone aware of an appropriate cms api endpoint we can call here to check if the user is logged in? It needs to be a readonly (get) request that will return something we can use to check - eg. a 403 if the user isn't logged in.

The /xblock/ endpoint is not good for this purpose, but it's used here in the PoC because it redirects to the login page and the request fails with the CORS error if we're not logged in, otherwise it will return something.

[samuelallan72]

Would it be reasonable to add such an api endpoint to the CMS if one doesn't already exist?

Or we may need to look at other methods, such as checking for a valid studio_session_id cookie locally(?).

[bradenmacdonald]

Authentication is supposed to be abstracted away by frontend-platform so I'd look there for a relevant JS API method, or add one if it doesn't exist (checkAuthStatus() ?).

[bradenmacdonald]

But also there's what I said on the other issue - a cookie should not be required for our MFEs. All APIs should accept a JWT token as auth, and it's easy to check if the JWT is expired or not. If a given API is not accepting a JWT, it should be fixed upstream or we should change to use a proper API endpoint. This would also solve the fake CORS errors, because proper API endpoints will not mask a 403 error with a CORS error.

[samuelallan72]

I'd look there for a relevant JS API method, or add one if it doesn't exist (checkAuthStatus() ?).

I did check there, and found that it does have the method for this, which is called in the init phase if requireAuthenticatedUser is true. However, that appears to go through the LMS, and it uses the login_refresh endpoint to refresh the JWT. This endpoint does actually exist on the CMS - but if that's for setting the JWT, and if the JWT is shared between the LMS and CMS, and we should be updating the CMS APIs to use JWTs, then it shouldn't be needed at all. I think. I need to learn more about how auth is set up here. :)