App runtime unauthorized error

Development - Développement
1

While using the app runtime library without the d2 platform, I am always getting unauthorized errors for DHIS2 UI components like OrganizationUnitTree and hooks that fetch data from an instance.

I followed instructions on app runtime getting started doc, and logged into the instance on a separate browser tab, but still got the issue. Does anyone have experience with this? Is there any separate setup we need to do to achieve working with the app runtime on React Apps with Typescript?

I am using Typescript, React 18, app runtime 3.9.4

2

Hi @kose

Welcome back to the community, and thanks for the post. Could you share the errors that are appearing (without any sensitive info)? Maybe excerpts from the code as well?

Thanks!

3

Yes, I am attaching screenshots of what am facing as an unauthorized error. Note that I have logged onto the DHIS2 instance on another separate browser tab, but the app runtime isn’t still authenticating the app.

  1. Unauthorized error browser console screenshot
    Unauthorized error browser console screenshot

  2. App runtime configuration

    snapshot of app runtime config on main App module
    snapshot of app runtime config on main App module790×544 57.4 KB

  3. Organisation unit tree implementation- which is dependent on the app runtime config triggers the error, also note that any code that triggers data query or mutation from the dhis2 instance generates the unauthorized error.
    Organisation unit tree implementation

4

Hi @kose

I’m not sure if the issue is from the app runtime module itself, but the app needs to be able to connect to the instance you are logged in. Please check that you have configured the cors settings explained here: How to debug common development errors | DHIS2 Developer Portal

5

Hey @kose

Is this an app that you plan to install as a DHIS2 app? If so, I suggest you use the app platform. If you can’t use the app platform, you need to implement a custom way of logging in before the app starts (Just for development). You can take a peek at how the app platform accomplishes that here.

If you are working on a standalone app, one that won’t be installed in a DHIS2 instance then it is a bit tricky to use the app runtime hooks and the OrganisationUnit component. The workaround I know is to have a mediator server between DHIS2 and your app that will authenticate the requests you send to DHIS2. Here is an example of a mediator you can use.

Hope this helps.

Regards.