thirdweb-dev / js

Best in class web3 SDKs for Browser, Node and Mobile apps
https://thirdweb.com
Apache License 2.0
447 stars 361 forks source link

wallet.disconnect() doesnt emits logout logic from auth #4704

Closed ITR20-08 closed 1 month ago

ITR20-08 commented 1 month ago

I'm currently migrating to V5 and running into an issue with wallet.disconnect.

When I use the ConnectButton modal with my custom auth, it successfully removes the JWT from the cookies upon disconnect, like this:

<ConnectButton client={client} auth={auth} />

However, when I disconnect via the hook, the JWT isn't removed from the cookies:

const wallet = useActiveWallet(); wallet?.disconnect();

In the previous version, there was a useLogout hook that handled this I think. I'm unsure of the best approach to remove the JWT from the cookies when using the hook instead of the disconnect button on the ConnectModal. Any suggestions on how to handle this?

jnsdls commented 1 month ago

hey @ITR20-08 - it looks like there's something missing in your question:

When I use the ConnectButton modal with my custom auth, it successfully removes the JWT from the cookies upon disconnect, like this:

is missing the "this" part showing how you're doing it.


In general in v5 we do not handle cookies for you, v5 expects you to manage cookies or bearer tokens or however you would like to handle tokens for SIWE auth yourself:

  1. I assume you have a backend that sets the cookies (they should be set http only, secure)
  2. on logout / disconnect I would suggest you call an endpoint on your server that removes the cookie

Let me know if that helps, happy to dive deeper into your exact setup to help debug this.

ITR20-08 commented 1 month ago

I’m encountering an issue with ConnectEmbed after manually calling auth.doLogout. When I try to reconnect, the wallet connection works, but the sign-in view does not appear. This issue doesn’t happen when using the connect button.

As you can see in the code, I'm printing "Hi" to ensure that the component is rendering. The "Hi" always appears when the jwt is not present, but the ConnectEmbed component doesn't render. This issue only happens when I manually trigger auth.doLogout. When using the connect button, everything works as expected.

 if (!jwt) {
    return (
      <Box
        onMouseMove={resetTimer}
        onKeyDown={resetTimer}
        overflowY="hidden"
        bg="bg.dark"
        height="100vh"
        backgroundImage={`url(${isNillionCurrentPath ? nillionBackground.src : background.src})`}
        backgroundSize="cover"
        backgroundPosition="center"
        backgroundRepeat="no-repeat"
        zIndex="0"
      >
        <Center height="100vh">
          Hi
          <ConnectEmbed
            client={client}
            showAllWallets
            showThirdwebBranding={false}
            privacyPolicyUrl={`${domain}/privacy-policy`}
            termsOfServiceUrl={`${domain}/terms-and-conditions`}
            theme={darkTheme({
              colors: {
                accentText: "#FF2091",
                accentButtonBg: "#FF2091",
              },
            })}
            auth={auth}
          />
        </Center>
      </Box>
    );
  }
gregfromstl commented 1 month ago

Hey @ITR20-08, when logging out, you'll want to also disconnect your wallet to make the ConnectEmbed appear again. You can use the useDisconnect hook to do this

ITR20-08 commented 1 month ago

I am disconnecting the wallet as well

await auth.doLogout() disconnect(wallet!);

The ConnectEmbed appears after logout, then I connect the wallet and when the Sign in button should appear the ConnectEmbed disappears (this happens not always) but with the ConnectButton instead always works fine

jnsdls commented 1 month ago

hm this is interesting, my best guess is that the connect embed may still have a value for isLoggedIn and does not re-fetch it in between these state switches since you are logging out outside of the "expected" flow...

could you try the following:

import { useSiweAuth, useActiveWallet, useActiveAccount } from "thirdweb/react";

// inside your component where you are doing the logout
const activeWallet = useActiveWallet();
const activeAccount = useActiveAccount();
const { doLogout } = useSiweAuth(activeWallet, activeAccount , {/* the auth object you are also passing to the connect embed */});

// ...

and then calling doLogout when you want to do the logout?

this should the force a revalidation of the isLoggedIn state

note to self: document this flow better / potentially simplify it

ITR20-08 commented 1 month ago

It worked calling it like this, Thanks