I am getting some weird behavior and errors in my projects I just switched from webpack to vite, using react.
When I authenticate for the first time with II in the project, everything is working fine, all the functions are being called well. But when I refresh then I’m getting this error:
Some times I’m also getting this one:
It’s behaving so weird, like I can stop dfx and start everything afresh, it works for moment, even after refreshing the page, and then when I stop and start dfx again and deploy everything again, the error is back, it’s behaving so randomly.
I have this context wrapper:
const Context: FC<LayoutProps> = ({ children }) => {
const [identity, setIdentity] = useState<Identity | null>(null);
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [backendActor, setBackendActor] = useState<ActorSubclass | null>(null);
const [ws, setWs] = useState<IcWebSocket<_SERVICE, AppMessage> | null>(null);
const login = async () => {
await authClient.login({
identityProvider:
process.env.DFX_NETWORK === "ic"
? "https://identity.ic0.app"
: `http://127.0.0.1:4943/?canisterId=${iiCanId}`,
onSuccess: () => {
checkAuth();
},
onError: (err) => alert(err),
});
};
const checkAuth = async () => {
try {
if (await authClient.isAuthenticated()) {
const _identity = authClient.getIdentity();
setIdentity(_identity);
let agent = new HttpAgent({
host: network === "local" ? localhost : host,
identity: _identity,
});
agent.fetchRootKey();
const _backendActor = Actor.createActor(idlFactory, {
agent,
canisterId: canisterId,
});
setBackendActor(_backendActor);
const _ws = new IcWebSocket(gatewayUrl, undefined, {
canisterId: canisterId,
canisterActor: backend,
identity: _identity as SignIdentity,
networkUrl: icUrl,
});
setWs(_ws);
setIsAuthenticated(true);
}
} catch (error) {
console.log("Error in checkAuth", error);
}
};
const logout = async () => {
await authClient.logout();
setIsAuthenticated(false);
setIdentity(null);
};
return (
<ContextWrapper.Provider
value={{
identity,
backendActor,
isAuthenticated,
ws,
login,
logout,
checkAuth,
}}
>
{children}
</ContextWrapper.Provider>
);
};
export default Context;
And then in another component I am accessing the context info like this:
const { isAuthenticated, login, checkAuth, backendActor } = useAuth();
useEffect(() => {
checkAuth();
}, []);
useEffect(() => {
if (isAuthenticated) {
callBackend();
}
}, [isAuthenticated]);
const callBackend = async () => {
const result = await backendActor.getAllConnectedClients();
console.log(result);
};
This same implementation in webpack it’s working fine, here in vite it’s working soon after login in, and some other few random times. What could be causing this?
