Ethereum provider authenticates but returns the wrong did and basic profile when a user changes between two accounts.

[Cali93]

This is a React hook I was working on when I noticed the issue. I tried with another dapp using IDX and it has the same behaviour.
I think that you can reproduce this if you go on https://self.id/ and login with an Ethereum address, then go to your Metamask and switch to another address that has another did, your basic profile name won't update unless you refresh the page.

Logged in with address 1:

Switched to other address:

Expected behaviour(it works if I reload the page):

declare const window: any;
import { useEffect, useMemo, useState } from "react";
import { EthereumAuthProvider, SelfID, WebClient } from "@self.id/web";
import publishedModel from "@d-profiles/schemas/lib/model.json";
import { CERAMIC_TESTNET } from ".";
import Web3 from "web3";
import Web3Modal from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";
import { useEthers } from "@usedapp/core";

export const useSelf = () => {
  const { account } = useEthers();
  const [mySelf, setMySelf] = useState<SelfID>();
  const [basicProfile, setBasicProfile] = useState<any | null>();
  const [address, setAddress] = useState<string | undefined>();
  const [error, setError] = useState<unknown>();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    (async () => {
      try {
        console.log("Account changed", account)
        setIsLoading(true);
        const providerOptions = {
          // Example with injected providers
          injected: {
            display: {
              // logo: "data:image/gif;base64,INSERT_BASE64_STRING",
              name: "Injected",
              description: "Connect with the provider in your Browser",
            },
            package: null,
          },
        };
        const web3Modal = new Web3Modal({
          network: "mainnet", // optional
          cacheProvider: false, // optional
          providerOptions, // required
        });
        const provider = await web3Modal.connect();
        console.log({ provider });
        const web3 = new Web3(provider);
        await (web3?.currentProvider as any).enable();
        // The following configuration assumes your local node is connected to the Clay testnet
        const client = new WebClient({
          ceramic: CERAMIC_TESTNET,
          connectNetwork: CERAMIC_TESTNET,
          model: publishedModel,
        });

        if (account) {
          console.log("my account", account);
          const authProvider = new EthereumAuthProvider(
            window.ethereum,
            account
          );
          // If authentication is successful, a DID instance is returned
          const did = await client.authenticate(authProvider);
          console.log("my did", { did: did.id.toString() });

          // A SelfID instance can only be created with an authenticated DID
          const self = new SelfID({ client, did });
          const bp = await self.get("basicProfile");
          console.log({ bp });
          setMySelf(self);
          setBasicProfile(bp);
          setIsLoading(false);
        }
      } catch (error) {
        setError(error);
        setIsLoading(false);
      }
    })();
  }, [account]);

  return { self: mySelf, basicProfile, error, isLoading };
};

[PaulLeCam]

@Cali93 can you reproduce the issue using 3ID Connect directly (not Self.ID) please?
Self.ID might not be using the latest version of 3ID Connect so that might be part of the problem. Thanks!

[Cali93]

@PaulLeCam Yes I've reproduced it using 3ID Connect on an "older" repo using those versions:

    "@3id/connect": "^0.2.5",
    "@ceramicnetwork/3id-did-resolver": "^1.4.3",
    "@ceramicnetwork/http-client": "^1.3.0",
    "@ceramicstudio/idx": "^0.12.2",
    "@ceramicstudio/idx-tools": "^0.11.0",