Cookie issue when connecting frontend-app to tutor

Tutor
1

Hello, I am trying to connect a custom front end: https://github.com/edx/frontend-platform to tutor.
I am currently running tutor local quickstart but in a test environment. However, I have the same issues when running in devmode.

In order to enable Cors request from the front end application, I made this plugin:

name: CORS
version: 0.2.0
patches:
    openedx-common-settings: |
        from corsheaders.defaults import default_headers as corsheaders_default_headers
        FEATURES['ENABLE_CORS_HEADERS'] = True
        CORS_ALLOW_CREDENTIALS = True
        CORS_ORIGIN_WHITELIST = ('localhost:8080')
        CORS_ALLOW_HEADERS = corsheaders_default_headers + (
            'use-jwt-cookie',
        )

This seems to fix my issues regarding Cors, however, my main issue is retrieving cookies from the local instance of tutor, running on local.overhang.io:80

This is how I have configured env.development on the frontend:

EXAMPLE_VAR=Example Value
ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
BASE_URL=localhost:8080
CREDENTIALS_BASE_URL=http://localhost:18150
CSRF_TOKEN_API_PATH=/csrf/api/v1/token
DISCOVERY_API_BASE_URL=http://localhost:18381
PUBLISHER_BASE_URL=http://localhost:18400
ECOMMERCE_BASE_URL=http://localhost:18130
LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
LMS_BASE_URL=http://local.overhang.io:80
LOGIN_URL=http://local.overhang.io:80/login
LOGOUT_URL=http://local.overhang.io:80/logout
MARKETING_SITE_BASE_URL=http://localhost:18000
ORDER_HISTORY_URL=localhost:1996/orders
REFRESH_ACCESS_TOKEN_ENDPOINT=http://local.overhang.io:80/login_refresh
SEGMENT_KEY=ul
SITE_NAME=Open edX
USER_INFO_COOKIE_NAME=edx-user-info

I don’t have all of the plugins installed in tutor, but I have tested with and without ecommerce and discovery, but it did not make a difference.

The application is able to communicate with tutor, but unable to retrieve any cookies, once I have logged in. This is causing this error in the application:

1. Error {message: "[frontend-auth] Access token is still null after successful refresh."}

1. {axiosResponse: {…}}

  1. axiosResponse: {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
  2. __proto__: Object

NewRelicLoggingService.js?484b:81 Error: Access token is still null after successful refresh. at _callee$ (AxiosJwtTokenService.js?0c2a:87) at tryCatch (runtime.js?f3a2:65) at Generator.invoke [as _invoke] (runtime.js?f3a2:303) at Generator.prototype.<computed> [as next] (runtime.js?f3a2:117) at asyncGeneratorStep (AxiosJwtTokenService.js:10) at _next (AxiosJwtTokenService.js:12)

1. {axiosResponse: {…}}

  1. axiosResponse: {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
  2. __proto__: Object

This works perfectly when running the latest native devstack version of openedx.
Any help regarding this problem would be greatly appreciated.

1 Like
2

Hi @SigmundGranaas! I don’t know micro frontends so well, but it seems to me that in order to be able to read cookies from one application to another, you’ll need a shared domain name between the LMS and the frontend app. Let me explain: if the LMS runs at local.overhang.io, it will save session cookies with the same domain name. Those cookies will not be readable by applications running on the localhost domain name. Thus, I think that the frontend app should run on a subdomain of local.overhang.io – for instance learn.local.overhang.io.

I’ll be interested in taking a look at your plugin, if you make it work, as I’ll have to integrate micro frontends with Tutor pretty soon.

3

Thanks for the answer @regis!
We seemed to arrive at the same conclusion that the front end needs to share the same domain.
Currently we are trying to build an plugin that will run a react development server on a subdomain of local.overhang.io We haven’t made a lot of headway with the plugin yet, but have integrated it into the nginx reverse proxy.

We’ll post an update as soon as we have made any significant progress!

1 Like
4

We managed to connect the front end through a custom python package plugin. It patches nginx, and runs a docker container with a react devserver containing the official https://github.com/edx/frontend-platform repo. The deployment is not ideal, and we will clean up and fix the plugin before posting the details.

5

That’s great! If you’d like, you can post it online with a big “alpha release not ready for production” sign in bold characters.

6

I finished cleaning up the repo, it’s far from finished but you can take a look at the plugin if you wish: https://github.com/SigmundGranaas/tutor-frontend-plugin The plugin works for what it is supposed to to, but the goal is till to connect a frontend application to tutor on a remote domain, which we will continue working towards

2 Likes
7

That’s great. Feel free to tag me in a github issue in your repo if you’d like some help on some stuff.