But this is crashing the app with the following error:
DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
Things I can confirm:
process.env.REACT_APP_CUSTOM_DOMAIN is set and correct
window.auth0 is loaded and looks like this: 10%20PM990×276 29.7 KB
My best guess is that it’s a race condition and that the '@@config@@' is waiting to be replaced with the proper payload but have not yet been able to sort that out.
Any insight would be greatly appreciated
So, with the caveat that this is definitely not the best way to work around this issue, here’s how I worked around this issue:
My public/index.html file calls the auth0 scripts like this:
<script src="https://cdn.auth0.com/js/auth0/9.2/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
<script>
var config = JSON.parse(
decodeURIComponent(escape(window.atob('@@config@@')))
var params = Object.assign({
/* additional configuration needed for use of custom domains
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: 'YOUR_CUSTOM_DOMAIN'
}, */
domain: config.auth0Domain,
clientID: config.clientID,
redirectUri: config.callbackURL,
responseType: 'code'
}, config.internalOptions);
window.StentorWebAuth = new auth0.WebAuth(params);
</script>
Webpack then bundles my compiled JS after these blocks.
Note that I am not waiting for the document load event and that I am saving the WebAuth instance to a global variable. Now I can access the WebAuth instance from anywhere inside the React app as window.StentorWebAuth.
Admittedly, it’s pretty jank. But seems to work. If anyone has had success with an alternate solution, I’d love to see it