Tanstack Start + Firebase Auth
Hey friends, for the life of me I cannot find the needle in the haystack here. Looking for some hand-holding 
I'm trying to setup Firebase auth with TSS. Unlike supabase, FB auth is only client side, so I'm trying to wrap my RootDocument with a context provider.
I'm setting my root with context
but I never get an updated context on my /_authed.tsx route.
I'm trying to setup Firebase auth with TSS. Unlike supabase, FB auth is only client side, so I'm trying to wrap my RootDocument with a context provider.
function RootComponent() {
const { user } = useAuthContext();
return (
<AuthContextProvider>
<RootDocument>
<Outlet />
</RootDocument>
</AuthContextProvider>
);
}function RootComponent() {
const { user } = useAuthContext();
return (
<AuthContextProvider>
<RootDocument>
<Outlet />
</RootDocument>
</AuthContextProvider>
);
}export const AuthContextProvider = ({ children }: any) => {
const [user, setUser] = React.useState<any>(null);
const [loading, setLoading] = React.useState(false);
React.useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
if (user) {
console.log("USER FOUND!", user);
setUser(user);
} else {
console.log("NO USER FOUND!");
setUser(null);
}
setLoading(false);
});
return () => unsubscribe();
}, []);
return (
<AuthContext.Provider value={{..user }}>
{loading ? <div>Loading...</div> : children}
</AuthContext.Provider>
);
};export const AuthContextProvider = ({ children }: any) => {
const [user, setUser] = React.useState<any>(null);
const [loading, setLoading] = React.useState(false);
React.useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
if (user) {
console.log("USER FOUND!", user);
setUser(user);
} else {
console.log("NO USER FOUND!");
setUser(null);
}
setLoading(false);
});
return () => unsubscribe();
}, []);
return (
<AuthContext.Provider value={{..user }}>
{loading ? <div>Loading...</div> : children}
</AuthContext.Provider>
);
};I'm setting my root with context
export const Route = createRootRouteWithContext<{
user: any;
queryClient: QueryClient;
}>()({export const Route = createRootRouteWithContext<{
user: any;
queryClient: QueryClient;
}>()({but I never get an updated context on my /_authed.tsx route.
export const Route = createFileRoute("/_authed")({
beforeLoad: ({ context }) => {
console.log("Checking if user is authenticated...");
if (!context.user) {
console.log("User is not authenticated!");
throw redirect({ to: "/login" });
}
console.log("User is authenticated!", context.user);
},
errorComponent: ({ error }) => {
throw error;
},
});export const Route = createFileRoute("/_authed")({
beforeLoad: ({ context }) => {
console.log("Checking if user is authenticated...");
if (!context.user) {
console.log("User is not authenticated!");
throw redirect({ to: "/login" });
}
console.log("User is authenticated!", context.user);
},
errorComponent: ({ error }) => {
throw error;
},
});
