T
TanStack8mo ago
helpful-purple

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, }); } }, });
No description
20 Replies
unwilling-turquoise
unwilling-turquoise8mo ago
this needs more context. can you provide this as a complete minimal example?
helpful-purple
helpful-purpleOP8mo 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
unwilling-turquoise8mo ago
a github repo would be best stackblitz does not support all features (namely async local storage) that we need
helpful-purple
helpful-purpleOP8mo ago
GitHub
GitHub - chaocwu/tanstack-start-example
Contribute to chaocwu/tanstack-start-example development by creating an account on GitHub.
unwilling-turquoise
unwilling-turquoise8mo ago
ok and which steps trigger the problem?
helpful-purple
helpful-purpleOP8mo ago
When I click the login button to request OAuth authentication github The steps in the image
unwilling-turquoise
unwilling-turquoise8mo ago
where should it redirect to?
helpful-purple
helpful-purpleOP8mo ago
unwilling-turquoise
unwilling-turquoise8mo ago
and where in your code is it redirecting to the external site?
helpful-purple
helpful-purpleOP8mo 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-purple
helpful-purpleOP8mo ago
No description
unwilling-turquoise
unwilling-turquoise8mo ago
ok but how is that related to router ?
helpful-purple
helpful-purpleOP8mo ago
I am uncertain whether the issue is caused by the beforeLoad event being retriggered on the route path after the click.
helpful-purple
helpful-purpleOP8mo ago
No description
helpful-purple
helpful-purpleOP8mo ago
No description
unwilling-turquoise
unwilling-turquoise8mo ago
it redirects me out to github i tried in firefox
helpful-purple
helpful-purpleOP8mo 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.
No description
unwilling-turquoise
unwilling-turquoise8mo ago
cc @Eric Chernuka
eastern-cyan
eastern-cyan7mo 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
foreign-sapphire7mo ago
I might be experiencing something similar, see this issue.

Did you find this page helpful?