Invalidating router context cache with supabase integration

Hello, I face a problem to reinvalidate router context when going to login page via URL. The issue is caused by lack of reinvalidation of react router context. In my setup I have an Auth context provider with effect

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user)
      setIsAuthenticated(!!session?.user)
    })

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user)
      setIsAuthenticated(!!session?.user)
    })

    return () => subscription.unsubscribe()
  }, [])

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user)
      setIsAuthenticated(!!session?.user)
    })

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user)
      setIsAuthenticated(!!session?.user)
    })

    return () => subscription.unsubscribe()
  }, [])

Sadly here I cannot revalidate context after setting the user state - this provider lives outside of router provider.

Do you know how possibly I could make the context revalide after the user session is checked so that the Login component is not rendered?

export const Route = createFileRoute('/login')({
  component: LoginPage,
  beforeLoad: ({ context: { auth }, search }) => {
    if (auth.isAuthenticated) {
      throw redirect({ to: '/' })
    }
  },
})

export const Route = createFileRoute('/login')({
  component: LoginPage,
  beforeLoad: ({ context: { auth }, search }) => {
    if (auth.isAuthenticated) {
      throw redirect({ to: '/' })
    }
  },
})

TanStack•6mo ago•

10 replies

moderate-tomato

Invalidating router context cache with supabase integration

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user)
      setIsAuthenticated(!!session?.user)
    })

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user)
      setIsAuthenticated(!!session?.user)
    })

    return () => subscription.unsubscribe()
  }, [])

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user)
      setIsAuthenticated(!!session?.user)
    })

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user)
      setIsAuthenticated(!!session?.user)
    })

    return () => subscription.unsubscribe()
  }, [])

export const Route = createFileRoute('/login')({
  component: LoginPage,
  beforeLoad: ({ context: { auth }, search }) => {
    if (auth.isAuthenticated) {
      throw redirect({ to: '/' })
    }
  },
})

export const Route = createFileRoute('/login')({
  component: LoginPage,
  beforeLoad: ({ context: { auth }, search }) => {
    if (auth.isAuthenticated) {
      throw redirect({ to: '/' })
    }
  },
})

Invalidating router context cache with supabase integration

Similar Threads

Invalidating router context cache with supabase integration

Similar Threads

Similar Threads

Similar Threads