Get `access_token` outside React

[amir-ziaei]

Issue

I would like to have the access_token available outside React too. Is there a reliable mechanism for that?

My use case

I have a fetch wrapper that is defined outside React and is being used across the codebase outside React's scope. The wrapper requires the access_token. I could read that from the store (sessionStorage or localStorage) but I would prefer if the library naturally supported that. In addition, I use the same token for my Websocket authentication. So it's not only about fetch.

Note

I know that the worker automatically injects the token, but I'm targeting old browsers too where Service Worker isn't available.

[guillaume-chervet]

Hi @amir-ziaei , thank you for the issue. I will post here a sample to explain how to do that tommorrow morning. It is possible to access the vanilla api.

[guillaume-chervet]

You can do like in that file https://github.com/AxaGuilDEv/react-oidc/blob/master/packages/react/src/oidc/ReactOidc.tsx

[amir-ziaei]

@guillaume-chervet, Thanks. I got it working nicely. However, there's still an issue but I don't know if I should raise another issue or continue here. I use SockJS alongside @stomp/stompjs for WS. The connection is on the main thread and it requires access_token. When I disable the Service Worker, the access_token is available and everything works. However, when the worker is enabled, the access_token is obviously hidden and my WS connection breaks. The worker intercepts the fetch requests and injects the token, however, it doesn't do that with XHR (probably that's a limitation and can't be achieved). Do you have any idea how to work around this? Ideally, I want to keep the worker running to have the security benefits, but also I want my WS to continue functioning as well.

[guillaume-chervet]

Hi @amir-ziaei,

Thank you for the feedback. It seems it is not possible for the moment. https://stackoverflow.com/questions/37741185/is-it-possible-to-intercept-and-cache-websocket-messages-in-a-service-worker-lik I will continue to search. I really would like to see wesocket working with the service worker mode.

[DavidErben]

Hi @amir-ziaei,

Thank you for the feedback. It seems it is not possible for the moment. https://stackoverflow.com/questions/37741185/is-it-possible-to-intercept-and-cache-websocket-messages-in-a-service-worker-lik I will continue to search. I really would like to see wesocket working with the service worker mode.

Hey Guillaume, any news on this? Your library is working great, but unfortunately we cannot use GraphQL subscriptions with Relay right now because the tokens are not injected. I could inject the token in the Relay environment manually, but then I cannot use the service worker.

Right now the only working way is to use SSE instead of WebSocket as transport protocol. Do you have any idea how to make it work or is there nothing we can do about it since it is just a browser limitation?

[guillaume-chervet]

hi @DavidErben,

Unfortunately i do not have solution :(

ServiceWorker mode is not usable with WebSocket at all for now. I hope ServiceWorker will evolve in the future to catch WebSocket stream.

[guillaume-chervet]

Hi @amir-ziaei , i forget to say that the library is compatible with Web socket if you disable service worker mode. But you are loosing a lot of security.

I close the issue since the initial problem is solved. Feel free to reopen or create a new one if needed.