Customise localStorage keys used for useInsecureForRefreshToken between JS and React SDKs
Hello! We're migrating our apps from Auth0 to Kinde (and loving the experience).
We have a React app that has to iframe a legacy app so we've had to use both JS and React SDKs. We were having issues getting the iframed app to use the authenticated Kinde session in local development even though they are on the same domain. We realised that the localStorage key used by the react SDK for the refresh token is
refreshToken0 while the JS SDK is expecting kinde_refresh_token. Is there a way to customise what is used by either SDK to ensure they are the same?4 Replies
Hi there, thank you for reaching out and loving our product 🙏
You can't directly configure the SDKs to use the same key.
Potential workarounds:
1. Use custom domains instead - Both SDKs recommend using Kinde's custom domain feature for production and even development, which sets secure httpOnly cookies instead of localStorage. This would eliminate the key mismatch issue entirely.
2. Synchronize tokens manually - You could write a small utility that listens for storage changes and syncs the refresh token between the two keys (`refreshToken0` and
kinde_refresh_token).
3. Use a single SDK - Consider if you can refactor to use only one SDK throughout your application, even for the iframed content.
Important considerations:
Both SDKs emphasize that localStorage should only be used for local development. The React SDK uses useInsecureForRefreshToken={process.env.NODE_ENV === 'development'}, and the JavaScript SDK uses is_dangerously_use_local_storage: true - both explicitly marked as non-production solutions.
Please let me know if you have any further questions about the above solutions.Thanks for the quick response Patrick. We are considering moving our localhost dev to be true https with custom domains. In production we are not using localStorage :). In the meantime I had been investigating synching localStorage values and have now successfully tested using the window storage event to listen for writing to a key and mirroring it to another.
MDN Web Docs
Window: storage event - Web APIs | MDN
The storage event of the Window interface fires when another document that shares the same storage area (either localStorage or sessionStorage) as the current window updates that storage area. The event is not fired on the window that made the change.
For react here is a first draft of a hook:
import { useEffect } from "react";
const useSyncLocalStorageKeyValue = (sourceKey: string, destinationKey: string) => {
useEffect(() => {
const handleStorageChange = (e: StorageEvent) => {
if (e.key === sourceKey && e.newValue !== e.oldValue) {
localStorage.setItem(destinationKey, e.newValue ?? "");
}
};
window.addEventListener("storage", handleStorageChange);
return () => {
window.removeEventListener("storage", handleStorageChange);
};
}, [sourceKey, destinationKey]);
};
export default useSyncLocalStorageKeyValue;
Awesome, yeah, this solution would work.
Please don't hesitate to ask if you have further questions.
We are here to help.