Currently, I am using a combination of local storage and public key to managing the private-public route. But this approach fails when user decides to revoke access to this application

const PrivateRoutes: FC<Props> = ({ children }) => {
  const router = useRouter();
  const pathIsProtected = !nonProtecedRoute.includes(router.pathname);
  const { publicKey } = useWallet();

  useEffect(() => {
    const data = window.localStorage.getItem("walletName");
    const isUserAuthenticated = Boolean(data || publicKey);

    if (!isUserAuthenticated && pathIsProtected) {
    } else if (isUserAuthenticated && !pathIsProtected) {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [publicKey]);

  return <>{children}</>;

export default PrivateRoutes;

Thanks for the help

1 Answer 1


There is no good way to manage this at present.

Because the authorizedness of an app is not synchronized with your web frontend, let alone your web server, it’s impossible to know on initial load whether a prior authorization is still valid.

The best you can do is to optimistically try to access resources that you presume the user still owns or is still authorized to sign for, and invalidate their cached authorization if you discover that to no longer be the case.

  • I have many thoughts on technologies we could develop to (re)authorize people on initial load, but those are going to take some time to materialize as prototypes. Aug 14, 2022 at 3:40
  • I guessed so. The only way I figured we could have it is to authenticate via backend with cookies and start polling to detect wallet change or disconnect
    – dtandon
    Aug 14, 2022 at 10:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.