添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

I am trying to roll my own login page with React. When the root component of the app mounts, this method is fired:

    initializeWebAuth() {
        let config  = JSON.parse(
            decodeURIComponent(escape(window.atob('@@config@@')))
        const params = Object.assign({
            overrides: {
                __tenant: config.auth0Tenant,
                __token_issuer: process.env.REACT_APP_CUSTOM_DOMAIN
            domain: config.auth0Domain,
            clientID: config.clientID,
            redirectUri: config.callbackURL,
            responseType: 'token'
        }, config.internalOptions);
        this.webAuth = new window.auth0.WebAuth(params);

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

  •