Decoding token - atob() fails if I include user's picture

[kkrp1]

I use a post-login action to add some user meta to the token.

Here’s how I receive and handle the token:

	const isAuthenticated = await client.isAuthenticated();
	let token;
	if (isAuthenticated) {
		try {
			token = await client.getTokenSilently({aud: 'https://example'});
			return {
				token,
				header: JSON.parse(atob(token.split('.')[0])),
				payload: JSON.parse(atob(token.split('.')[1]))
			}
		} catch(e) { window.location.reload(); }
	}

This has always worked, but fails if I add the user’s picture to the custom claim:

const customClaim = {        
    picture: event.user.picture
};
api.accessToken.setCustomClaim('example.user', customClaim);

That results in an error from atob() about an invalid character. Why should this be so?

I can solve the problem by URL-encoding the picture URL, but I’m interested what’s up here.

Thank you in advance.

[marybeth.hunter]

Hi @kkrp1,

I did a quick test and observed the following:

This is the value of user.picture in my JWT after adding the custom claim: https://s.gravatar.com/avatar/c7db9afc482ae35a04dd7f31f78814b1?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fma.png

Running that value through atob() gives me an error that says that the string is not correctly encoded. Fully encoding the user.picture value works because the string is correctly encoded for use with atob().

Ultimately, the user.picture value from Auth0 is incompatible out-of-the-box with atob() and you will have to encode it first.

Let me know if you have any additional questions!

Thanks,

Mary Beth

[kkrp1]

Thanks Mary Beth, much appreciated. I simply didn’t realise that you had to URL-encode before feeding things to atob() so that’s something learned.