Error Fetching Username in ICRC Authentication

Developers Rust
1

Problem Description
I am encountering an issue where an error appears once but disappears upon refreshing. The error message is:

Error: Error fetching username: AgentQueryError: Error while making call: Invalid certificate: Signature verification failed

Code Snippets That Might Be Causing the Issue
In the authentication process, I am using the following code to fetch the username:
const { isAuthenticated, login, logout, principal, kycActor } = useAuth();
const [username, setUsername] = useState(“”);
const [initial, setInitial] = useState(“”);

useEffect(() => {
const fetchUsername = async () => {
if (isAuthenticated && principal) {
try {
const exists = await kycActor.has_username_for_principal(principal);
console.log(“User exists:”, exists);

    if (exists) {
      const fetchedUsername = await kycActor.get_username_by_principal(principal);
      console.log("Fetched username:", fetchedUsername);

      setUsername(fetchedUsername?.Ok || "Unknown User");

      const username1 = fetchedUsername.Ok;
      console.log("Extracted username:", username1);

      const userInitial = username1.charAt(0).toUpperCase();
      setInitial(userInitial);
      console.log("Initial:", userInitial);

    } else {
      setUsername("Unknown User");
      setInitial("U");
    }
  } catch (error) {
    console.error("Error fetching username:", error);
  }
} else {
  console.log("Not authenticated or no principal yet.");
}

};

fetchUsername();
}, [isAuthenticated, principal]);

Authentication Logic (useAuthClient.js):
import { AuthClient } from “@dfinity/auth-client”;
import React, { createContext, useContext, useEffect, useState } from “react”;
import { canisterId as MercxId, createActor as createMercxActor } from “…/…/declarations/mercx_backend”;
import { canisterId as kycCanisterId, createActor as createKycActor } from “…/…/declarations/kyc”;

// Create Authentication Context
const AuthContext = createContext();

export const getIdentityProvider = () => {
if (typeof window !== “undefined”) {
const isLocal = process.env.DFX_NETWORK !== “ic”;
if (isLocal) {
return http://${process.env.CANISTER_ID_INTERNET_IDENTITY}.localhost:8001;
}
}
};

export const defaultOptions = {
createOptions: {
idleOptions: {
disableIdle: true,
},
},
loginOptions: {
identityProvider: getIdentityProvider(),
},
};

// Custom Hook for Authentication
export const useAuthClient = (options = defaultOptions) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [authClient, setAuthClient] = useState(null);
const [identity, setIdentity] = useState(null);
const [principal, setPrincipal] = useState(null);
const [kycActor, setKycActor] = useState(null);

useEffect(() => {
AuthClient.create(options.createOptions).then(async (client) => {
updateClient(client);
});
}, );

const login = () => {
authClient.login({
…options.loginOptions,
onSuccess: () => updateClient(authClient),
});
};

async function updateClient(client) {
const isAuthenticated = await client.isAuthenticated();
setIsAuthenticated(isAuthenticated);

const identity = client.getIdentity();
setIdentity(identity);

const principal = identity.getPrincipal();
setPrincipal(principal);

setAuthClient(client);

// Initialize KYC Actor
const KycActor = createKycActor(kycCanisterId, {
  agentOptions: { identity },
});
setKycActor(KycActor);

}

async function logout() {
await authClient?.logout();
await updateClient(authClient);
}

return { isAuthenticated, login, logout, authClient, identity, principal, kycActor };
};

// Authentication Provider Component
export const AuthProvider = ({ children }) => {
const auth = useAuthClient();
return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
};

// Custom Hook to Access Auth Context
export const useAuth = () => useContext(AuthContext);