Will beforeLoad prevent the OAuth authorization page from redirecting?
I have three key configurations, and when I click the login button, the page fails to redirect to the OAuth authorization page. The log shows that all paths' beforeLoad are executed again, which is described as normal in the documentation, but I don't understand why the authorization cannot redirect.
// root.tsx
const getUser = createServerFn({ method: "GET" }).handler(async () => {
const { headers } = getWebRequest()!;
const session = await auth.api.getSession({ headers });
return session?.user || null;
});
export const Route = createRootRoute({
beforeLoad: async () => {
console.log("root beforeLoad");
const user = await getUser();
return { user };
},
...
// index.tsx
export const Route = createFileRoute("/")({
component: () => {},
beforeLoad: ({ context, location }) => {
console.log("index beforeLoad");
if (!context.user) {
throw redirect({
to: "/login",
search: {
redirect: location.href,
},
});
} else {
throw redirect({ to: "/project" });
}
},
});
// login.tsx
export const Route = createFileRoute("/login")({
component: LoginPage,
beforeLoad: async ({ context }) => {
console.log("login beforeLoad");
if (context.user) {
throw redirect({
to: REDIRECT_URL,
});
}
},
});

20 Replies
unwilling-turquoise•8mo ago
this needs more context. can you provide this as a complete minimal example?
helpful-purpleOP•8mo ago
I'm new to StackBlitz and just imported my project. Although it's not running properly, you can view the minimal complete use case here.https://stackblitz.com/~/github.com/chaocwu/tanstack-start-example
unwilling-turquoise•8mo ago
a github repo would be best
stackblitz does not support all features (namely async local storage) that we need
helpful-purpleOP•8mo ago
GitHub
GitHub - chaocwu/tanstack-start-example
Contribute to chaocwu/tanstack-start-example development by creating an account on GitHub.
unwilling-turquoise•8mo ago
ok and which steps trigger the problem?
helpful-purpleOP•8mo ago
When I click the login button to request OAuth authentication
github
The steps in the image
unwilling-turquoise•8mo ago
where should it redirect to?
helpful-purpleOP•8mo ago
GitHub
Build software better, together
GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over 420 million projects.

unwilling-turquoise•8mo ago
and where in your code is it redirecting to the external site?
helpful-purpleOP•8mo ago
/login
here: <button
type="button"
className="btn btn-secondary"
disabled={loading}
onClick={() => {
signIn.social({
provider: "github",
callbackURL: REDIRECT_URL,
});
}}
>
<GithubLogo className="h-5 w-5" weight="duotone" />
Github
</button>
helpful-purpleOP•8mo ago

unwilling-turquoise•8mo ago
ok but how is that related to router ?
helpful-purpleOP•8mo ago
I am uncertain whether the issue is caused by the beforeLoad event being retriggered on the route path after the click.
helpful-purpleOP•8mo ago

helpful-purpleOP•8mo ago

unwilling-turquoise•8mo ago
it redirects me out to github
i tried in firefox
helpful-purpleOP•8mo ago
Yes, Firefox can redirect to GitHub, but strangely, Edge and Chrome can't. I've even disabled all browser extensions, and it's the first time I've encountered such an issue.

unwilling-turquoise•8mo ago
cc @Eric Chernuka
eastern-cyan•7mo ago
Odd suggestion. In the thrown redirect, does it work if you do href and reloadDocument rather than to? Pretty sure I was looking recently and the logic to do a location assignment to an external url needed reloadDocument. In theory, you may not need the href instead of the “to” since the logic will build the href if not present.
Ya this definitely seems like a WebKit/chrome like bug of sorts from what I was trying to accomplish.
Spent a bit of time trying to figure out why Chrome was being odd here. Haven't figured this out. Haven't dug into
history
possibly being where the issue is, but not sure until I ran rule out router
foreign-sapphire•7mo ago