The script has an unsupported MIME type ('text/html'). DOMException: Failed to register a ServiceWorker

[Mastanka]

Issue and Steps to Reproduce

When loading framework libraries "The script has an unsupported MIME type ('text/html')." is written to console.

When accessing protected React component error happen. And page is displayed: "Authentification erreur Une erreur est survenu lors de l'authentification"

This happens only if I'm using:

  service_worker_relative_url:'/helpers/authentication/OidcServiceWorker.js',
  service_worker_only:true

in oidcConfiguration. Without ServiceWorker everything is fine.

I want to use service worker as a event entry point after login/silentLogin to update user context with name of logged user. (i dont want to create authentication/callback page and do it there)

Versions

4.2.8

Screenshots

Expected

Redirect to oidc authentication endpoint.

Actual

Error is displayed.

Additional Details

Has anyone run into this issue since migration v3 -> v4? I've done all steps according to the manual. And I'm getting this error.

• Installed packages: "@axa-fr/react-oidc-context": "^4.2.8", "react": "17.0.2", "react-dom": "17.0.2"

[Mastanka]

And by any chance, does anyone know why "callbackSuccessComponent" is not initiated after login? <OidcProvider configuration={oidcConfiguration} callbackSuccessComponent={Callback} authenticating={Callback}>

I'm trying to implement update of UserName after user is authenticated, but when I set component to the OidcProvider, the component is never called. Not even when I set it as "authenticating" component...

Thanks a lot!

[guillaume-chervet]

Hi @Mastanka , Thank you for your issue,

About your first message, it is routing server configuration problem, because your are inside a SPA (or may be CORS problem that hide the real message).

Look the content of the response of the/helpers/authentication/OidcServiceWorker.js it migth be your index.htm or something else.

Here is an example web.config file that i use in order to make server routing work on Azure WebApp => https://github.com/AxaGuilDEv/ml-cli/blob/feature/auth/src/Ml.Cli.WebApp/ClientApp/public/web.config

Regards,

[guillaume-chervet]

For your second message,

If I were your I would use a custom hooks or pure functions that will map to a UserA to a new UserB.

You Won't be able to modify user information given by the library.

What do you think?

[Mastanka]

Thanks a lot for you response! For the first issue, you're absolutely right. It seems to be the CORS problem in my code.

Regarding the updating UserInfo: I only need to read UserInfo, not modify it. This will happen in my custom function. The thing is that I need event, that will trigger when the user is authenticated either from normal or silent callback. Just as a trigger for my functions to update context. :)

Once again, thanks a lot!

[guillaume-chervet]

May we close that issue?

[LuchoTurtle]

Hi @Mastanka , Thank you for your issue,

About your first message, it is routing server configuration problem, because your are inside a SPA (or may be CORS problem that hide the real message).

Look the content of the response of the/helpers/authentication/OidcServiceWorker.js it migth be your index.htm or something else.

Here is an example web.config file that i use in order to make server routing work on Azure WebApp => https://github.com/AxaGuilDEv/ml-cli/blob/feature/auth/src/Ml.Cli.WebApp/ClientApp/public/web.config

Regards,

@guillaume-chervet thanks for the reply, thoroughly appreciated! Could you just update the link you sent? It's 404ing 😄

[guillaume-chervet]

it was merge on main branch => https://github.com/AxaGuilDEv/ml-cli/blob/master/src/Ml.Cli.WebApp/ClientApp/public/web.config

:)

[guillaume-chervet]

Thank you for your feeback :)

[TeckTn]

I have the same issue regarding triggring authentication success event. Any possible fix?

[guillaume-chervet]

Do you have any error in the console? Do you have more information about your configuration. I have fixed today a bug like this on the very first connection with service worker.

[TeckTn]

the package version is 4.3.0

I have a simple Provider using a success Callback Component. Every thing is working fine but the AuthSuccess Component is not called after a successfull login.

My Provider :

 <OidcProvider
          configuration={props.configuration.auth.authOpenId}
          callbackSuccessComponent={() => <AuthSuccess />}
        > ...

My AuthSuccess Component :

import { useEffect } from 'react';

export const AuthSuccess = () => {
  useEffect(() => {
    console.log('I am authenticated');
  }, []);

  return <span> I am conneted</span>;
};

[guillaume-chervet]

Thank you very much again for the feedback. The last version fix that.

[guillaume-chervet]

May we close that issue?

[Mastanka]

Yes please :) And thanks a lot

[guillaume-chervet]

Thank you @Mastanka for your help.