Cookie issue when connecting frontend-app to tutor

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

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.

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!

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.

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.

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

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