Bug: atob invalid character exception

• Review the documentation: https://docs.clerk.dev/
• Search for existing issues: https://github.com/clerkinc/javascript/issues
• Go through package changelog files.
• Provide the Frontend API key from your application dashboard.

Package + Version

• @clerk/clerk-js
• @clerk/clerk-react
• @clerk/nextjs
• @clerk/remix
• @clerk/types
• @clerk/themes
• @clerk/clerk-expo
• @clerk/backend-core
• @clerk/clerk-sdk-node
• @clerk/edge
• other:

Version:

4.5.2 also tested on latest 4.6.5

Browser/OS

If applicable e.g. Chrome latest

Description

When using a custom session claims with profile_image the Clerk getAuth function breaking on invalid character using atob function. Getting the session token and unwrapping the image url is set to "profile_image": "https://www.gravatar.com/avatar?d=mp" and we think the = is probably breaking it. Here is the stack trace

Here is our custom claims object

{
	"email": "{{user.primary_email_address}}",
	"user_id": "{{user.id}}",
	"last_name": "{{user.last_name}}",
	"first_name": "{{user.first_name}}",
	"email_verfied": "{{user.email_verified}}"
}

Stack trace error on login

error - DOMException [InvalidCharacterError]: Invalid character
    at atob (node:buffer:1247:13)
    at parseRequest (/Users/arashsoheili/Code/caredge-app/node_modules/@clerk/nextjs/dist/server/utils/getAuth.js:49:38)
    at /Users/arashsoheili/Code/caredge-app/node_modules/@clerk/nextjs/dist/server/utils/getAuth.js:24:61
    at eval (webpack-internal:///(api)/./src/api/common/handler/method.ts:67:83)
    at resolver (webpack-internal:///(api)/./src/api/common/handler/index.ts:109:19)
    at Object.apiResolver (/Users/arashsoheili/Code/caredge-app/node_modules/next/server/api-utils/node.ts:522:11)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async DevServer.runApi (/Users/arashsoheili/Code/caredge-app/node_modules/next/server/next-server.ts:789:5) {
  page: '/api/auth/vehicles-owned'
}

Have tested removing the profile_image from custom session and we then have no issues.

The atob function is deprecate. Here is the docs from nodejs

This function is only provided for compatibility with legacy web platform APIs and should never be used in new code, because they use strings to represent binary data and predate the introduction of typed arrays in JavaScript. For code running using Node.js APIs, converting between base64-encoded strings and binary data should be performed using Buffer.from(str, 'base64') and buf.toString('base64').

[SokratisVidros]

Thanks. The fix will be live by the end of this week via https://github.com/clerkinc/javascript/pull/610.

[arash-yaa]

Hi @arash-yaa we couldn’t reproduce this issue with a new JWT that contained the default gravatar URL. Can you please share am expired JWT that brakes so that we can use it in our tests?

eyJhbGciOiJSUzI1NiIsImtpZCI6Imluc18yRTVxYW43VzFPMm5ER1VxQU5icWJGT2J5UGUiLCJ0eXAiOiJKV1QifQ.eyJhenAiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJlbWFpbCI6ImF3cy5zdGFnaW5nQGNhcmVkZ2UuY29tIiwiZW1haWxfdmVyZmllZCI6dHJ1ZSwiZXhwIjoxNjcwNjg0MjM2LCJmaXJzdF9uYW1lIjoiQXJhc2giLCJpYXQiOjE2NzA2ODQxNzYsImlzcyI6Imh0dHBzOi8vY2xlcmsucGxlYXNpbmcuYWxiYWNvcmUtMzkubGNsLmRldiIsImp0aSI6IjQ1M2VkZTUxYzA0Mjc4ZjdiMWZlIiwibGFzdF9uYW1lIjoiU29oZWlsaSIsIm5iZiI6MTY3MDY4NDE2NiwicHJvZmlsZV9pbWFnZXMiOiJodHRwczovL3d3dy5ncmF2YXRhci5jb20vYXZhdGFyP2Q9bXAiLCJzaWQiOiJzZXNzXzJJZ2lzSDZLYnBYNEx4eFlQRHRCR1Axb3NNaSIsInN1YiI6InVzZXJfMklnaTh1cW5HaER6RHh3aG44QnlRdHVkRzRRIiwidXNlcl9pZCI6InVzZXJfMklnaTh1cW5HaER6RHh3aG44QnlRdHVkRzRRIn0.GT4h80a-hXWdB51laWHLNunkwVliECqLIJsTBJ3NQcFmxId9pt0UQpbJraptBJ8h5mIPPq2t8r7Tb_IkXwPnKEuNfU31ZhdeqXAFf4mXeHb-K0asVPKj3SXz4PNlx8uBq9dGYTHMq7qwva15pXIPrkmVYbTVZSvmKy90ECBNn8UAg10a_FOL5hD4cs5sN4IvultrQs2tjkVgDG0SJ72jC_6gEtMJ2vv-Ym2jk4ZfG1cqec6f5vq_P5mAQQrnayVpZLaXlbA-B2L6NLEZiRYpH3czCticn1VhlzGlzyDQ3aOhpjahZYg51OUTXTpcNHieLNqRk_Gb0RY3z27ob5Tk2Q