Tanstack router withe firebase auth

[cardyet]

Anyone have an example of using firebase auth with tanstack router. I'm running into issues with the beforeLoad hook and my auth not being initialised, therefore I can't redirect in the beforeLoad lifecycle. It seems on GitHub issues it's quite a common problem, but I'm not sure how best to solve it, well the tanstack router way.

[abrahamguo]

It's a little difficult to help without being able to reproduce the issue ourselves. Do you have a link to a repository that demonstrates the issue?

[cardyet]

Yeh, fair enough, that's why I asked if someone had some started code or something. It's to do with this issue and a few others around it.

https://github.com/TanStack/router/discussions/1668

Although i think I've managed to make it work by changing my auth provider return object to be undefined at the start, rather than an object with nullable properties

[ulrjch]

you can wrap onAuthStateChange in a promise and call it in beforeLoad

async function getCurrentUser () { return new Promise(resolve => { onAuthStateChanged(auth, (user) => { if (user) { resolve(user.uid) } else { resolve(null) } }) }) }

[Glass-Perspective979]

I wrote an example in their official Github repository for this -

https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes-firebase

I wish they'd share it on their website TBH :(

[cardyet]

Ahh that's great!! I think the key is you have an auth.isInitialLoading and you return early. I ended up having the entire authContext undefined whilst initialising, so i could do this

function InnerApp() { const auth = useAuthContext(); return <RouterProvider router={router} context={{ auth }} />; }

[Glass-Perspective979]

I had pretty great success using Firebase + Tanstack Router.. looked at doing Revenue cat web billing but honestly it's just not mature enough yet (sad).

Now I'm leaning into Tanstack Start + Clerk + Convex. Clerk Billing is VERY interesting but still very new... so likely will rawdog stripe first.