Why is Router.useSearch() Returning an Incorrect Google ID After Passport.js Authentication in TanStack Router?

[imSamiul]

I am encountering an issue while trying to retrieve the Google ID using Router.useSearch() with TanStack Router. After Google authentication via Passport.js, I am passing the email and Google ID using the following redirect:

return res.redirect(${process.env.FRONTEND_URL}/signup/addOtherInfo?email=${user.email}&googleId=${user.googleId}`);

However, on the frontend, when I attempt to access the Google ID and email using:

const { email, googleId } = Route.useSearch();` 

I can successfully retrieve the email, but the Google ID is incorrect. It shows 216684855340380610000 instead of the expected 216684855340380658625.

After researching the issue, I learned that this might be due to JavaScript's Number type, which uses 64-bit floating-point precision and cannot accurately represent numbers larger than 253−12^{53} - 1253−1.

Could you please guide me on how to retrieve the correct Google ID in my component while using TanStack Router?"

[schiller-manuel]

As you pointed out, you cannot treat this large value as a number in JS. Here is a solution that parses the value as bignumber:

https://stackblitz.com/edit/tanstack-router-2wgeegss?file=src%2Froutes%2Fabout.tsx,src%2Fmain.tsx&preset=node

import JSONBigNumber from 'json-bignumber';

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  parseSearch: parseSearchWith(JSONBigNumber),
});