T
TanStack•3w ago
firm-tan

router.invalidate() and auth history navigation

Hi all! I was trying out some auth patterns and came across this situation where: 1. A user is signed in at /dashboard 2. The user navigates to / 3. The user signs out 4. The user history navigates back to /dashboard /dashboard’s beforeLoad runs but (only __root's beforeLoad runs) - we are still served the cached authenticated version of the route, meaning one might get a glimpse of authenticated content post sign out (the inverse flow of signing in and navigating back to an auth route will also serve the non-authed version first). 5. If the user history navigates forward to / : the user is now signed out, but if we don't call router.navigate({ reloadDocument: true }) on sign out, the authed version of index, with the sign out button, will be served I’m definitely missing something here and was looking for some insight into how to best solve this (maybe editing bfcache related settings? client-side effect?). Route example code in the comments below.
5 Replies
firm-tan
firm-tanOP•3w ago
// __root.tsx
beforeLoad: async ({context}) => {
    const session = await getServerSession()
    return { session }

    // queryClient alternative
    // const session = await context.queryClient.ensureQueryData(sessionQueryOptions())
    // return { session }
}
// __root.tsx
beforeLoad: async ({context}) => {
    const session = await getServerSession()
    return { session }

    // queryClient alternative
    // const session = await context.queryClient.ensureQueryData(sessionQueryOptions())
    // return { session }
}
// index.tsx
function RouteComponent() {
    const { session } = Route.useRouteContext()
    
    return {
        <>
            {session ? (
                <div>
                    Authed
                    <button 
                        onClick={async () => {
                            const { data, error } = await authClient.signOut(
                                {},
                                onSuccess: async (ctx) => {
                                    // await queryClient.resetQueries({ queryKey: [“session”] })
                                    await router.invalidate()
                                    // router.navigate({ reloadDocument: true })
                            })
                        }}>
                        Sign Out
                    </button>
                 </div>
            ) : (
                <div>
                    Not Authed
                    <button 
                        onClick={async () => {
                            const { data, error } = await authClient.signIn.email(
                                {...},
                                onSuccess: async (ctx) => {
                                    // await queryClient.resetQueries({ queryKey: [“session”] })
                                    await router.invalidate()
                                    // router.navigate({ reloadDocument: true })
                            })
                        }}>
                        Sign In
                    </button>
                 </div>
            )}        
    </>
    }
}
// index.tsx
function RouteComponent() {
    const { session } = Route.useRouteContext()
    
    return {
        <>
            {session ? (
                <div>
                    Authed
                    <button 
                        onClick={async () => {
                            const { data, error } = await authClient.signOut(
                                {},
                                onSuccess: async (ctx) => {
                                    // await queryClient.resetQueries({ queryKey: [“session”] })
                                    await router.invalidate()
                                    // router.navigate({ reloadDocument: true })
                            })
                        }}>
                        Sign Out
                    </button>
                 </div>
            ) : (
                <div>
                    Not Authed
                    <button 
                        onClick={async () => {
                            const { data, error } = await authClient.signIn.email(
                                {...},
                                onSuccess: async (ctx) => {
                                    // await queryClient.resetQueries({ queryKey: [“session”] })
                                    await router.invalidate()
                                    // router.navigate({ reloadDocument: true })
                            })
                        }}>
                        Sign In
                    </button>
                 </div>
            )}        
    </>
    }
}
// dashboard.route.tsx
beforeLoad: ({ context: { session }, location }) => {
    if (!session) {
        throw redirect({
            to: “...”,
            search: { redirect: location.href }
        })
    }
}
// dashboard.route.tsx
beforeLoad: ({ context: { session }, location }) => {
    if (!session) {
        throw redirect({
            to: “...”,
            search: { redirect: location.href }
        })
    }
}
@Manuel Schiller any insight on this?
foreign-sapphire
foreign-sapphire•3w ago
not without a complete minimal example
firm-tan
firm-tanOP•3w ago
1. Go to index: https://glgy78-3000.csb.app/ 2. Sign in (hardcoded details), don't mind the sign up button 3. Go to dashboard via URL address bar (do not navigate): https://glgy78-3000.csb.app/dashboard 4. History navigate back to index: / 5. Sign out 6. History navigate forward to dashboard: /dashboard - signed out but served the cached authenticated dashboard 7. History navigate back to index: / - signed out but served the cached authenticated index 8. Reload to fix state If the initial dashboard navigation (step 3) is not done via the url, and instead via the nav or “Go to dashboard” <Link> components, step 6 correctly redirects to the index with search params, as set in the dashboard route’s beforeLoad.
foreign-sapphire
foreign-sapphire•3w ago
where is the code for that?
firm-tan
firm-tanOP•3w ago

Did you find this page helpful?