ServiceWorker.js issue can't be initialized

[antosimi]

Issue and Steps to Reproduce

Hi i added last version of oidc-client : "@axa-fr/react-oidc": "^7.0.1", but i get :

I have in public folder a Service worker.js. This is the config:

I added the oidc provider in App.tsx and it includes all the routes.
This is where i use it in the LoginForm.tsx:

Maybe I am missing something, or it could be a bug ?

P.S. I have 2 more questions for better understanding the flow, is there a default redirect_url I can use in order for the oidc-client package to manage the oauth2 login till I get the token, because I don't want to actually create the requests from scratch, or where in the examples on github is the resirect url treated ? The second question is regarding the OidcTrustedDomains , I see I need to add my localhost:3000. but should I let the others domains in that file, or just complete with mine, and it is mandatory to change that file in order to function ? Thank you.

[guillaume-chervet]

I @antosimi, thank you for your Issue and using react-oidc.

I'am not sure, but I think you service_worker_relative_url should be OidcServiceWorker.js without public folder.

The javascript code try to register the ServiceWorker but does not find it.

[antosimi]

Yes that was the mistake, thank you. But unfortunately now i have the error, if you have any suggestions

Also in the end it says can't load service worker .js.

[guillaume-chervet]

hi @antosimi ,

It is some configuration to configure at google side.

[antosimi]

I understand but there is a strange behaviour, when I use the configuration from the exaple with : https://demo.duendesoftware.com works fine, but when I try just to add the path to google for oauth2 login. I have added in App.tsx where I declared the path routes the OidcProvider. Even tho I the /login page I have a button which should trigger onclick() the login() from useOidc(). Just when I enter the /login page it tries to make a fequest and then there is the above error with CORS issue. The strange behaviour is why is making the request by itself on /login page just because is in OidcProvider, but when I tryed other server it did worked.

[antosimi]

I managed to fixed all : my configuration was not okay : I did not specify the authority_configuration( where i specify all the endpoints)

[antosimi]

Just a quick question I got to the point to get token but the error is :

Seems that the service token is crying because the token is not valid.
But when i got to network in inspect element mode :

Th first /token says : (failed)net::ERR_FAILED , but there is a second /token underneath that responds with exactly what i need access_token an id_token. Is there a posibility to make service worker wait longer for the response ? @guillaume-chervet

[guillaume-chervet]

hi @antosimi , do you have always this error?
I will publish a version with more log detail.

[guillaume-chervet]

hi @antosimi ,

I just publish version 7.2.2 with a lot of more log details to understand your problem.

[antosimi]

yes , i checked a bit and i think the issue is with the is valid() in service worker , right now the google sends me id_token(which can be parsed and it returns info), but the access_token has changed the aspect i guess, like in here:
const extractTokenPayload = (token) => {
try {
if (!token) {
return null;
}
if (countLetter(token, ".") === 2) {
return parseJwt(token);
} else {
return null;
}
} catch (e) {
console.warn(e);
}
return null;
};

The countLetter(token, ".") === 2) is not a valid check since the access_token does not have 2 points. I may be wrong but this is what i guess. I found a person having a similar issue, maybe it helps to update the validating of access token parse-community/parse-server#6849 @guillaume-chervet

[guillaume-chervet]

hi @antosimi ,

this case is managed by the library.

Are you able to display the console message using the version 7.2.2?

[antosimi]

@guillaume-chervet i updated to 7.2.2 but the service Worker keeps reinitializing and makes my page to have a loop of reloading the page. Any suggests ?
Also I think i know how to fix my previous issue, I think you are right and access token hasn't cause the issue, but after more investigation the issuer had a mismatch with the issuer mention in token_id and that shoul fix it.

But my blocker is the service worker acting out.

P.S.
I've noticed that when in unintalled, and then installed the version 7.2.2, no service worker was added to /public folder, version 7.1.0 added my ServiceWorker.js file. This i think will confuse the new users of this package

[antosimi]

Fixed it by multiple tryings to uninstall and install version 7.1.0

[antosimi]

Well now all works, thank you so much for the support! @guillaume-chervet

[antosimi]

My issues were :

• not putting the correct path to OidcServiceWorker, it just needs to be '/OidcServiceWorker.js';
• not having a matching issuer with the one extracted from token_Id;
• some issue with npm when i upgraded to newest version;