Ethereum provider authenticates but returns the wrong did and basic profile when a user changes between two accounts. #161
Description
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 };
};