Shopify
Unexpected Server Error: atob() called with invalid base64-encoded data. in authorize->getNonce->decodeJwt
What is the location of your example repository?
No response
Which package or tool is having this issue?
Hydrogen
What version of that package or tool are you using?
2024.7.5
What version of Remix are you using?
No response
Steps to Reproduce
login with ngrok or production domain and new login method.
Expected Behavior
login input fields page (account.domain.com)
Actual Behavior
Error: atob() called with invalid base64-encoded data. (Only whitespace, '+', '/', alphanumeric ASCII, and up to two terminal '=' signs when the input data length is divisible by 4 are allowed.)
at decodeJwt (/home/user/dev/Shopify/Hydrogen/storefront/node_modules/@shopify/hydrogen/dist/development/index.js:263:7)
at getNonce (/home/user/dev/Shopify/Hydrogen/storefront/node_modules/@shopify/hydrogen/dist/development/index.js:258:9)
at Object.authorize (/home/user/dev/Shopify/Hydrogen/storefront/node_modules/@shopify/hydrogen/dist/development/index.js:454:19)
at callRouteLoader (/home/user/dev/Shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:3146:16)
at /home/user/dev/Shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:2019:21
at callLoaderOrAction (/home/user/dev/Shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:2079:16)
at async Promise.all (index 1)
at callDataStrategyImpl (/home/user/dev/Shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:1973:17)
at callDataStrategy (/home/user/dev/Shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:1868:19)
at loadRouteData (/home/user/dev/Shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:1850:19)
/Shopify/Hydrogen/storefront/node_modules/@shopify/hydrogen/dist/development/index.js:
2428 function decodeJwt(token) {
2429 const [header, payload, signature] = token.split(".");
2430: const decodedHeader = JSON.parse(atob(header));
2431: const decodedPayload = JSON.parse(atob(payload));
header
shcit_eyJraWQiOiIwIiwiYWxnIjoiRUQyNXXXXXXX
payload
eyJzaG9wSWQiOjUxMTk2ODg3MjA2LCJjaWQiOiJzaHBfMTRmZGQ5MjAtMGU4Yi00NGRkLTg2NzctZjU3MmY5YTU3NWJlIiwiaWF0IjoxNzI1NTAwNzQwLCJleHAiOjE3MjU1MDEzNDAsImlzcyI6Imh0dHBzOlwvXC9zaG9waWZ5LmNvbVwvYXV0aGVudGljYXRpb25cLzUxMTk2ODg3MjA2Iiwic3ViIjo0NjcxNDAzMzYwNDIyLCJzaWQiOiIwMUo2WjE4OVZOS1FWUzRXWkZZM0pZNVc5USIsImVtYWlsIjoiTWFudWVsYS5zY2htaWRiYXVlckBrb2thZGkuZGUiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwibm9uY2UiOiI2YWUyMzU3ZTlhMzU1ZmY4NDU0NTYxZmVhMDc5ZXXXXXXX
signature
ozQ4Uq9tc-OAMDSLr4PeAyin5jJsGpJjeWP2UoyJJgVt-waYiMQXOgy-jUUoxZV3uLvN4_WB5HDzdcvXXXXXXX"
replaced last 7 chars with X
why there in the header is a _ (underscore)?
Not part of Hydrogen fix - It was happening at customer account api endpoint where we apply the fix
/account/login?return_to=/account/orders /account/authorize?code=shcac_aGQvRmZyNWh2cXhSZjR...&state=172651...09xzola
Unexpected Server Error
SyntaxError: Unexpected token '<', "<head>
<"... is not valid JSON
at exchangeAccessToken (/home/shopify/Hydrogen/storefront/node_modules/@shopify/hydrogen/dist/development/index.js:243:1)
at Object.authorize (/home/shopify/Hydrogen/storefront/node_modules/@shopify/hydrogen/dist/development/index.js:463:23)
at callRouteLoader (/home/shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:3146:16)
at /home/shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:2019:21
at callLoaderOrAction (/home/shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:2079:16)
at async Promise.all (index 1)
at callDataStrategyImpl (/home/shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:1973:17)
at callDataStrategy (/home/shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:1868:19)
at loadRouteData (/home/shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:1850:19)
at queryImpl (/home/shopify/Hydrogen/storefront/node_modules/.vite/deps_ssr/@remix-run_server-runtime.js:1716:20)
mmm .. something is weird with your setup. The request should never return a html payload. The few possibility that you would get an html payload is that your app is not authorized/prevented to get an access token. Can you see what that payload looks like in the network tab?
@HH-SW I'll be closing this issue since I am not getting more replies from you. I'm going to assume you have figure it out.