Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded

[shawnatxapp]

Hi.

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:
  
  

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

[shawnatxapp]

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