Error: Invalid certificate: Signature verification failed while using NFiD

Developers
1

I am using NFiD as an authentication method for my project, and I am getting this error every time I try interacting with my backend canister.

Registration error: 
Error: Invalid certificate: Signature verification failed
    at _Certificate.verify (chunk-HH4QRYL5.js?v=9600c847:3179:13)
    at async _Certificate.create (chunk-HH4QRYL5.js?v=9600c847:3160:5)
    at async pollForResponse (@dfinity_agent.js?v=6afb291b:711:16)
    at async caller (@dfinity_agent.js?v=6afb291b:971:29)
    at async handleEmailRegistration (InvestorRegisterPopUp .jsx:73:24)

The funny thing is that the whole thing was working at first, then all of a sudden it just stopped.

Here’s how my code currently looks like. This is the handleEmailRegistration function:

const handleEmailRegistration = async () => {
    if (!investorName.trim()) {
      toast.error("Please enter your name");
      return;
    }

    setLoading(true);
    try {
      const authClient = await initAuth();
      const actor = await createActorInstance(authClient);
      
      const newInvestor = { name: investorName };
      const response = await actor.register_investor(newInvestor);

      if (response.Ok) {
        dispatch(setinvestor(true));
        navigate('/investor-dashboard');
        toast.success('Investor registered successfully!');
      } else if (response.Err) {
        toast.error(`Error: the principal ID has already been registered!`);
      } else {
        toast.error('An unknown error occurred');
      }
    } catch (error) {
      console.error("Registration error:", error);
      toast.error(`Error: ${error.message || 'An unexpected error occurred'}`);
    } finally {
      setLoading(false);
    }
  };

Here is the initAuth function that initializes my authclient and logs in using NFiD:

const initAuth = async () => {
    const authClient = await AuthClient.create();
    console.log("Authclient is: ", authClient); 
    const isAuthenticated = await authClient.isAuthenticated();
    
    if (!isAuthenticated) {
      const APP_NAME = "Investa Farm";
      const APP_LOGO = "https://nfid.one/icons/favicon-96x96.png";
      const CONFIG_QUERY = `?applicationName=${APP_NAME}&applicationLogo=${APP_LOGO}`;
      const identityProvider = `https://nfid.one/authenticate${CONFIG_QUERY}`;

      return new Promise((resolve) => {
        authClient.login({
          identityProvider,
          onSuccess: () => resolve(authClient),
          windowOpenerFeatures: `
            left=${window.screen.width / 2 - 525 / 2},
            top=${window.screen.height / 2 - 705 / 2},
            toolbar=0,location=0,menubar=0,width=525,height=705
          `,
        });
      });
    }

    return authClient;
  };

Here’s my createActor function that creates an actor instance from the initialized authclient and createActor function from the declarations

  const createActorInstance = async (authClient) => {
    const identity = authClient.getIdentity();
    const agent = new HttpAgent({ identity });
    const actor = createActor(canisterID, { agent }); // Use mainnetCanisterID for mainnet and localCanisterID for local testing
    return actor;
  };
2

I suggest doing adding an await in front of the function that gets the identity that you use to instantiate the agent.

const identity = await authClient.getIdentity();

This error usually occurs when a required argument value in the agent is not passed in.