T
TanStack•2y ago
metropolitan-bronze

OAuth redirect causing route to run loader twice

I've been beating my head against this for a couple days now. I'm trying to implement the oAuth flow but my callback route's life cycle methods are being called twice when I come back from the google login page. Inspecting the devtools with preserve logs on shows the route is only loaded once, yet my beforeLoad and loader functions are called twice - even with nothing but console.logs in them. I redirect back to auth/google/callback and I have a route setup under routes/auth_.$provider.tsx that has the following code in it: 
const loginSearchSchema = z.object({
  code: z.string(),
});

export const Route = new FileRoute('/auth/$provider').createRoute({
  beforeLoad: ({ context }) => {
    console.log("before load");
    // if (context.auth.isAuthed()) {
    //   throw redirect({
    //     to: "/",
    //   });
    // }
  },
  loaderDeps: ({ search }) => ({ code: search.code }),
  loader: async ({ context, cause, deps: { code } }) => {
    console.log("loading", code, context, cause);
  }
  validateSearch: loginSearchSchema,
});
const loginSearchSchema = z.object({
  code: z.string(),
});

export const Route = new FileRoute('/auth/$provider').createRoute({
  beforeLoad: ({ context }) => {
    console.log("before load");
    // if (context.auth.isAuthed()) {
    //   throw redirect({
    //     to: "/",
    //   });
    // }
  },
  loaderDeps: ({ search }) => ({ code: search.code }),
  loader: async ({ context, cause, deps: { code } }) => {
    console.log("loading", code, context, cause);
  }
  validateSearch: loginSearchSchema,
});
Refreshing the page calls the loader only once, it's redirecting back from the Google SSO form that causes it to run twice. I've tried removing strict mode, checking the cause (it's enter for both calls), checking if it's preload for the first call (it's not) and have tinkered with various routes and code setups, but nothing changes the fact the life cycle methods for this route are called twice. ANY suggestions on avenues I can explore for a solution here would be hugely appreciated as i've reached a complete dead end and this is blocking me from progressing
2 Replies
sensitive-blue
sensitive-blue•2y ago
Hey, not sure if this helps your case, but I'm sharing it here since it worked for me. I checked for both the preload state or if the destination route wasn't actually my callback and short circuited the loader.
Simple early return in my callback route - https://github.com/SeanCassiere/nv-rental-clone/blob/e88cabf0f790240655fa27e99bbfe2c6883bb3ef/src/routes/_public/oidc-callback.route.tsx#L29
GitHub
nv-rental-clone/src/routes/_public/oidc-callback.route.tsx at e88ca...
Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.
metropolitan-bronze
metropolitan-bronzeOP•2y ago
Thanks for sharing, and thanks for the public repo! Always great to see other implementations! Unfortunately even if I check both those cases, it still falls through as both instances of the function call are identical

Did you find this page helpful?