Still can redirect to public route even when logged in

[huy1999dnnk]

I am developing an app with tanstack and jwt (access, refresh token). I am following this example.
Step:

1. Login successfully (/auth/login, public route)
2. Redirect to '/' (protected route)
3. Manually visit /auth/login using the address bar. At this point, it should stay on / because we are already logged in, but instead, it still redirects to /auth/login.

Here is my code
_auth.tsx (layout for login page)

export const Route = createFileRoute('/(auth)/auth')({
  component: RouteComponent,
  validateSearch: z.object({
    redirect: z.string().optional().catch(''),
  }),
  beforeLoad: ({ context, location, search }) => {
    if (context.auth.statusAuth === 'authenticated') {
      throw redirect({ to: search.redirect || '/', replace: true })
    }
    if (location.pathname === '/auth' || location.pathname === '/auth/') {
      throw redirect({ to: '/auth/login', replace: true })
    }
  },
  notFoundComponent: () => {
    return (
      <div className="flex h-full w-full items-center justify-center">
        <h1 className="text-2xl font-bold">Page Not Found</h1>
      </div>
    )
  },
})

_auth.tsx (layout for protected page)

export const Route = createFileRoute('/(dashboard)/_auth')({
  beforeLoad: ({ context, location }) => {
    if (context.auth.statusAuth === 'pending') {
      return
    }
    if (context.auth.statusAuth === 'unauthenticated') {
      throw redirect({
        to: '/auth/login',
        search: {
          redirect: location.href,
        },
      })
    }
  },
  component: RouteComponent,
  notFoundComponent: () => (
    <div className="w-full h-full flex items-center justify-center">
      <h1 className="text-2xl font-bold">Page Not Found</h1>
    </div>
  ),
})

and the auth context

export const AuthProvider = ({ children }: AuthProviderProps) => {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  const statusAuth = isLoading
    ? 'pending'
    : !user
      ? 'unauthenticated'
      : 'authenticated'

  // Initialize auth state from localStorage
  useEffect(() => {
    const initializeAuth = async () => {
      try {
        const accessToken = authStore.getAccessToken()

        if (accessToken) {
          // Verify token is still valid by fetching user profile
          try {
            console.log('Initializing auth state with access token')
            await refreshUser()
          } catch (error) {
            // Token is invalid, clear storage (already handled in refreshUser)
            console.error('Auth initialization failed:', error)
          }
        } else {
          setUser(null)
        }
      } catch (error) {
        console.error('Auth initialization failed:', error)
        setUser(null)
      } finally {
        setIsLoading(false)
      }
    }

    initializeAuth()
  }, [])

  const login = async (email: string, password: string): Promise<void> => {
    try {
      setIsLoading(true)
      await authApi.login({ email, password })
      // Then refresh user to get complete user data from /auth/me
      await refreshUser()
    } catch (error) {
      throw error
    } finally {
      setIsLoading(false)
    }
  }

  const register = async (
    email: string,
    password: string,
    firstName?: string,
    lastName?: string,
  ): Promise<void> => {
    try {
      setIsLoading(true)
      await authApi.register({
        email,
        password,
        firstName,
        lastName,
      })
      // Then refresh user to get complete user data from /auth/me
      await refreshUser()
    } catch (error) {
      throw error
    } finally {
      setIsLoading(false)
    }
  }

  const logout = async (): Promise<void> => {
    try {
      setIsLoading(true)
      await authApi.logout()
      setUser(null)
    } catch (error) {
      // Even if API call fails, clear local state
      setUser(null)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

  const refreshUser = async (): Promise<void> => {
    try {
      if (!authStore.getAccessToken()) {
        setUser(null)
        return
      }

      const currentUser = await authApi.getMe()
      setUser(currentUser)
    } catch (error) {
      setUser(null)
      authStore.logout()
      throw error
    }
  }

  return (
    <AuthContext.Provider
      value={{
        user,
        statusAuth,
        isLoading,
        login,
        register,
        logout,
        refreshUser,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

export const useAuth = () => {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider')
  }
  return context
}

To add more context, i am using axios interceptor to get the new jwt token when old access token is expired. I am using tanstack router version 1.114.3. I would be very grateful if someone could help me resolve this issue.
Thanks