Need help setting up Luigi's OIDC auth on React

[kkasinrerk2]

Hi guys, I'm new to Luigi and React in general. I started my code exactly like this react example https://github.com/SAP/luigi/tree/main/core/examples/luigi-example-react. It works well as expected.
But when I followed this OIDC and auth document (https://docs.luigi-project.io/docs/auth-oidc and https://docs.luigi-project.io/docs/authorization-configuration), I started to get a bunch of errors.

I installed the plugin npm install @luigi-project/plugin-auth-oidc and npm i -save-dev oidc-client, and changed my webpack.config.js plugins to

plugins: [
      // copy luigi core resources to runtime directory
      new CopyWebpackPlugin({
        patterns: [
          {
            context: 'public',
            to: 'index.html',
            from: 'index.html'
          },
          {
            context: 'public',
            to: 'luigi-config.js',
            from: 'luigi-config.js'
          },
          {
            from: 'node_modules/@luigi-project/core',
            to: './luigi-core'
          },
          {
            from: 'node_modules/@luigi-project/plugin-auth-oidc/plugin.js',
            to: './assets/auth-oidc'
          },
          {
              from: 'node_modules/oidc-client/dist/oidc-client.min.js',
              to: './assets/auth-oidc'
          }
        ]
      }),

Because the https://docs.luigi-project.io/docs/auth-oidc document does not specifically say where to put import OpenIdConnect from '@luigi-project/plugin-auth-oidc';, I just put it in public/luigi-config.js.

I run the app and got this error

Uncaught SyntaxError: Cannot use import statement outside a module (at luigi-config.js:1:1)

which makes sense as I use <script src="/luigi-config.js"></script> from index.html.

I tried changing it to <script type="module" src="/luigi-config.js"></script> and got this error instead

Uncaught TypeError: Failed to resolve module specifier "@luigi-project/plugin-auth-oidc". Relative references must start with either "/", "./", or "../".

I have also tried changing the import paths to, for example, import OpenIdConnect from './assets/auth-oidc/plugin.js';, and it got other errors.

Could someone please provide some example code or snippet of how to properly setting up this OIDC auth on a React project? I'm so stuck 😭.

[hardl]

Hi @kkasinrerk2,

maybe some remarks before I start explaining how to solve your issue:

• As a micro frontend framework, luigi is supposed to run in an environment with distributed systems.
• To lower the barrier for an easy start to try it out, we decided to add examples which can be started by a "single command" rather than setting up and running the different parts independently.
• Therefore the examples we provide should be considered as demonstration how luigi works and how it can be used in combination with existing ui frameworks (and here we talk mainly about the client/micro frontend part) and not as templates to start your production-ready project with.

Now to your issue:
You can't use import as described in our documentation because the part that contains luigi core, so your main application, is not part of the bundling process of the project but served as static asset. The oidc plugin is bundled as umd module. So in order to still use it, just add a script tag in index.html like that:

and in luigi-config.js you can access it via the prop 'LuigiPlugin-auth-oidc' at the window object

Final notes:

• Consider using https://docs.luigi-project.io/docs/auth-oidc-pkce rather than the older OIDC plugin, as implicit grant flow is not recommended anymore
• Check out https://docs.luigi-project.io/docs/application-setup?section=application-setup-for-react for information how to add the config file to the webpack bundling process to use normal import syntax.

[kkasinrerk2]

Works like a charm! 👍

Thank you so much for the notes and the solution @hardl.

A bit of note, I actually have a separated project that is going to be my production project. I just wanted to minimize the scope of the code to make a bit easier to explain in the question. ✌️