Tutorials for the Implementation of Internet Identity with React

Question

I am new to smart-contract development and also new to IC development. I have already followed the motoko tutorials and the introduction to development in IC. My next step was to implement a simple login form (with a react interface) using Internet Identity.

I looked at some tutorials, which were not very satisfying and I came across this repository on github: https://github.com/krpeacock/auth-client-demo but just running the dfx deployment I got this error:

Stderr:
Building canisters before generate for 
Motoko
Shrink WASM module size.
Generating type declarations for canister 
whoami:
  src/declarations/whoami/whoami.did.d.ts
  src/declarations/whoami/whoami.did.js
  src/declarations/whoami/whoami.did
sh: webpack: command not found

In fact, I just need a good start example, without errors, to guide me to implement the local Internet identity with react as a frontend.

Are there any good repositories to start with?

Answer 1

Anyone gets stuck, here's a working example with multiple frameworks:

https://github.com/krpeacock/auth-client-demo

In particular, you can now add:

    "internet_identity": {
      "type": "custom",
      "candid": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did",
      "wasm": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm.gz",
      "shrink": false,
      "remote": {
        "candid": "internet_identity.did",
        "id": {
          "ic": "rdmx6-jaaaa-aaaaa-aaadq-cai"
        }
      },
    },

To your dfx.json to include it in your own project, while it will also automatically resolve between your local replica ("local testnet") and mainnet when deploying. Then by adding the @dfinity/auth-client dependency, you can then add the necessary logic to your frontend:

import { AuthClient } from '@dfinity/auth-client';
// These are generated by dfx from your backend canister code so you can instantiate a "backend" canister instance in your frontend environment (or wherever else).
import { canisterId, createActor } from "../../../declarations/backend";

// Assuming index.html is loading and makes the script call:

async function init() {
  const authClient = await AuthClient.create({/*options can go here */});
  const loginButton = document.getElementById("login-button");

  loginButton.onclick = () => {
    authClient.login({
      identityProvider:
        process.env.DFX_NETWORK === "ic"
        ? "https://identity.ic0.app/#authorize"
        : `http://localhost:4943?canisterId=${process.env.CANISTER_ID_INTERNET_IDENTITY}#authorize`,
      onSuccess: async () => {
        handleAuthenticated(authClient);
      },
    });
  };
};

// other initialization code, etc

init();

// other initialization code, etc

async function handleAuthenticated(authClient) {
  // Gets the identity of the authenticated user as its stored in IndexDb 
  // (can get the principal, which is ~hash of public key) to display it the user, etc. 
  const identity = (await authClient.getIdentity());
  // Now the authenticated identity can be used to create an instance of the backend canister:
  const backend = createActor(canisterId, {
    agentOptions: {
      identity,
    },
  });
  // This backend instance will now have a `caller` that's not anonymous, but of the user.
  const result = await backend.makeSomeCallLikeHelloWorldOrCRUDOrMintOrSendBtcEtc(). 
  // Update the ui accordingly...
  updateUi(result);
}

Note if using Vite, you'll want to probably use import.meta.env instead of process.env; just verify you've got your project's environmental variables configured correctly.