DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. Payload size a problem?

Question

EDIT: It works when I reduce the payload size... Why?

What the hell is going on? Why did it suddenly stop working?

I am trying to decode a JWT token and I get an error. Even VS Code displays one.

The signature '(data: string): string' of 'atob' is deprecated.

How is it possible that atob works in another project, and not in this one?

let payload = tokenRaw.split(".")[1];
let decoded = atob(payload);
let token = JSON.parse(decoded);

Here's the JWT creation.

NOT working

let token = jwt.sign(
    {
        username: req.body.username,
        companyKey: user.companyKey,
        companyName: user.companyName,
        discountGroup: user.discountGroup,
        isAdmin: false,
    },
        config.tokenSecret,
    {
        expiresIn: tokenExpirationSeconds,
    }
);

working

let token = jwt.sign(
    {
        username: req.body.username,
        companyKey: user.companyKey,
    },
        config.tokenSecret,
    {
        expiresIn: tokenExpirationSeconds,
    }
);

Answer 1

It seems there are two issues in your post actually. The one showed by VS Code...

The signature '(data: string): string' of 'atob' is deprecated.

... has nothing to do with runtime and, hence, is constant. The root cause of this is described in a ticket opened at the Mothership itself :

The problem is that the two "overloads" are identical in signature, and the deprecated one from node is being picked because it was loaded last. If you're writing DOM code, you should really try to avoid having node typings in your program, but we are painfully aware this is much easier said than done, and sometimes impossible.

Suggested solution is using window.atob() instead, so that TS will clearly know the Node's signature shouldn't be applicable.

---

The issue which actually made a title -

The string to be decoded is not correctly encoded.

... is not a static one, and depends on how exactly payload is prepared. It seems to be somewhat related to the issue described in this thread , but without having an exact input, it's hard to tell. It might as well be related to improper processing of request parameters, for example.

So the suggestion is to wrap this block of code into try-catch one way or another. For example, if it's a function...

function decodeRawToken(tokenRaw) {
  try {
    let payload = tokenRaw.split(".")[1];
    let decoded = atob(payload);
    let token = JSON.parse(decoded);
    return token;
  }
  catch(e) {
    console.error(`Failed to process token: ${tokenRaw}`);
    // you can send this token to some server-side logger instead
  }
}

... so that you can always detect which tokens gave your code issues - and negotiate what's going wrong with their generation with their originators.