How to reuse Keycloak session/token in embedded React SPA via oidc-spa?

[alefduarte]

I’m working with a WPF application that embeds a React client inside a WebView.
The WPF app authenticates with Keycloak directly, and I would like to reuse the same authentication session/token inside the embedded React client.

With a previous provider, our workaround was:

1. The WPF app generated a temporary token after authenticating.
2. It loaded the React client in the WebView, passing the token as a query parameter.
3. On the React side, the client exchanged that temporary token with the authentication service to obtain a valid JWT token.

Now I would like to migrate this flow to oidc-spa.

Question

• What is the recommended approach with oidc-spa to support this scenario?
• Is there a standard way to initialize the SPA client with a token obtained externally (from the WPF host)?
• Or should the React client always start its own OIDC flow (authorization code with PKCE), even when embedded in a native host?

Notes

I’m not entirely sure if this is more related to Keycloak configuration than to oidc-spa, but the end goal is to integrate it properly with the OIDC standard using this library.

Thank you in advance!

[garronej]

Hello @alefduarte,

If I understand correctly, you’d like to do something along these lines:

In this setup, you’d handle the first session restoration separately, launch your app in a webview, and post a message containing the refreshToken that oidc-spa could use to skip the initial restoration phase.

---

This isn’t supported at the moment. That said, I do see the value, it’s been requested before, and it would create a strong use case for mobile/desktop wrapper apps built on web technologies like Electron.

However, mobile/desktop support is not on my immediate roadmap. My current priorities are:

• Replacing keycloak-js with oidc-spa in the Keycloak Admin and Account apps. (This requires a lot of lobbying and convincing, but we’re making progress.)
• Adding TanStack Start support to ensure a solid fullstack framework story.
• Removing <OidcProvider /> in favor of React Suspense, allowing apps to render during session restoration with better skeleton states.
• Closing the remaining attack vectors so we can confidently claim that oidc-spa protects tokens against XSS and supply-chain attacks (no other adapter does this).
• Providing adapters not only for React but also for Angular, Vue, and Svelte.

Mobile/desktop support would come only after those milestones.

That said, if you’d like to bump this request in priority, I have a $250 one-time donation tier on my GitHub Sponsors page:
👉 https://github.com/sponsors/garronej?frequency=one-time&sponsor=garronej

With that support, I can likely deliver the feature within a week.

Otherwise, I’ll leave the issue open, but realistically it would probably be addressed in the 6-month range.

Let me know if you’re interested!

[alefduarte]

Thanks for the detailed response, @garronej.
I completely understand your current priorities and the roadmap for the project.
Since this feature isn’t supported yet, I’ll explore alternative approaches on the WPF side to see what can be achieved in the meantime.