Debugging this Internet Identity Authentication Repo

I’m trying to run this repo: GitHub - krpeacock/auth-client-demo: Example demo of how to use to make authenticated calls to an IC app

But the instructions include

Copy the canister ID fom the Internet Identity canister, and paste it into webpack.config.js in this project on the LOCAL_II_CANISTER variable on line 8.

and webpack.config.js doesn’t have that line.

There is this line:


but if I place the canister id like this, is still doesn’t work:

LOCAL_II_CANISTER:http://${canisterEnvVariables[" renrk-eyaaa-aaaaa-aaada-cai"]}.localhost:${REPLICA_PORT}/#authorize,


repo is outdated, give me 5 to provide a PR

1 Like

There you go @blabagastered :point_right: feat: bing back to life by peterpeterparker · Pull Request #10 · krpeacock/auth-client-demo · GitHub

Process has been simplified:

cd auth-client-demo/
dfx start --background --clean
dfx deploy
npm run start

That should be it. Let me know if it works out.


Thank you.

There’s probably something wrong with my webpack installation because it keeps telling me to install it, but once I do that, I changed this line in the dfx.json

And then it does deploy and run, but when I go to (in my case) http://localhost:8082/

I see

And then on Log In, it takes me to

I wonder if I’m breaking something when I change the line on dfx.json?

If I don’t change that line on dfx.json I get

% dfx deploy

**Deploying all canisters.**

**All canisters have already been created.**

**Building canisters...**

**Shrink WASM module size.**

**Executing** 'bash -c 'test -f internet_identity.wasm || curl -sSL -o internet_identity.wasm; test -f internet_identity.did || curl -sSL -o internet_identity.did''

**Building frontend...**

Error: Failed while trying to deploy canisters.

Caused by: Failed while trying to deploy canisters.

Failed to build call canisters.

Failed while trying to build all canisters.

The post-build step failed for canister 'rrkah-fqaaa-aaaaa-aaaaq-cai' (auth_client_demo_assets) with an embedded error: Failed to assert source paths.: Unable to determine canonical location of asset source path /Users/black/icp/auth-client-demo/dist/auth_client_demo_assets/: No such file or directory (os error 2)

My PR has been merged, so you can give it a try with main ?

I don’t think the line you pointed out needs to be modified, it just worked fine for me. On the contrary I think the sample is only meant to run on post 8080 so if you want to use 8082, you should try to find all occurences and replace these.

Following step by step works for me:

git clone
cd auth-client-demo
npm ci
dfx start --background --clean
dfx deploy
npm run start
# here open browser http://localhost:8080

As I mentioned also in Discord, the Readme instructions are out of date after I incorporated @peterparker 's II canister installation strategy, simplifying the local deployment and making the canister id known to dfx


I tried it again now without changing dfx.json and with this added command and it now worked. Thank you both.

1 Like

Glad to hear that, have fun :+1:

1 Like

I have an app with a frontend and a backend canisters that I need to add Internet Identity functionality to.

Kyle’s repo is running fine but I’m having trouble fusing that repo with mine.

My repo already has other integrations so I’m not sure if I should try bringing the auth repo into mine, or try to bring mine into the auth repo (though mine has several .mo files and so on), and what the best and simplest way to do it is.

I’ve tried fusing dfx.json and package.json and so on but I’m getting a bit dizzy.

Would it be easier to try integrating this? internet-identity/demos/using-dev-build at main · dfinity/internet-identity · GitHub

I integrated that last one I think but I’ve only managed to use it with the real Internet Identity, which I think is incompatible with locally run projects, so I’m getting the anonymous principal back despite seemingly correctly authenticating.

As in Kyle’s repo, regardless of the frontend dapps and when it comes to me, adding locally II goes with adding the following in dfx.json

"internet_identity": {
      "type": "custom",
      "candid": "",
      "wasm": "",
      "shrink": false,
      "remote": {
        "candid": "internet_identity.did",
        "id": {
          "ic": "rdmx6-jaaaa-aaaaa-aaadq-cai"

With that present I still see (having integrated the basic UI from internet-identity/demos/using-dev-build at main · dfinity/internet-identity · GitHub to the app)

and then having entered the local internet identity canister id as shown, I see

Should the steps just be: adding the above to dfx.json, adding the login button and so on to index.html, and adding the logic from index.ts into the target project’s index.ts, and (in my case) adding the whoami function to my backend canister (with the corresponding change to index.ts so that it calls that canister for whoami)?

Or is there something else I should be doing?

the whoami canister is just for demonstration purposes. You may have an easier time dropping in the new web component <ii-login-button>, by simply installing @dfinity/ii-login-button and importing it in your application

1 Like

Yes that would work but once piece of the puzzle is missing in this list: the webpack.config or other bundler configuration.

When you deploy canister locally, they receive a canister id. These are the ids you should use in your frontend app (or else) to execute calls and queries (like the whoami).

Without any configuration, your frontend app does not know these generated ids.

So one way to tell your app which IDs to use is to hardcode these but, that isn’t really handy because if you don’t deploy your canister always in the same order they get different ids and also, when you gonna deploy on mainnet (production) canisters might also have other ids.

That’s why, the most handy way is to handle these IDs with environment variables that are generated automatically.

e.g. in @kpeacock sample repo you can see here that a function of the webpack configuration is loading the list of canister ids in process.env

process.env that can then be used in the frontend typescript/javascript code e.g.

Note that process.env is the example of the react app, of course there are other ways. e.g. in my svelte app I use vite so I end up loading these in with .env.

Hopes this makes a bit more clear how things works out currently.

1 Like

Oh, knowing this exists is very helpful.

Is there a place with all the things and resources people should know about when working on a production app for the IC?

In particular, my next steps after authentication is integrating minting and burning an ICRC token into the app, and reading from HTTP outcalls in regular intervals (though I’m hoping this can be done just with some sort of while loop with a sleep() inside it in a canister function?).


I still haven’t managed to fully integrate this repo with my project.

My project is able to get an identity, up to and including

const identity = await authClient.getIdentity();

But then when I try to create an actor, the createActor function is not defined and if I try to import it from declarations by simply placing the whoami declarations folder in my project’s directory, I get this deprecation error:

What steps am I missing to be able to create an actor and call my backend canister’s functions as an authenticated user?

My problem is not in running the auth-demo repo, but in integrating the demo’s auth capabilities into my repo.

I have the feeling, since you are porting your app manually, that the actor and did files are missing.

To create an actor on the frontend side to communicate with the backend, you need few things:

  • the IDs of the canister, which seems now to be fixed
  • the agent-js dependencies, which I guess you have installed (npm i ...)
  • the function, the createActor iself
  • the definition of the backend API, the candid files (also called the did files)

These last two things are the things I guess which are missing in your project. They can be created manually but commonly they are generated automatically.

If you open the package.json of a sample starter project, you should find a scripts named generate. This is the one you need to copy in your app so that you can run npm run generate.

This should generate function and definitions in a new folder src/declarations.

From there, the import should be resolved.

I might be wrong, it is just an assumption and you are maybe also already aware of this but just in case. Let me know.

I did use a starter pack at the very beginning. It now has other integrations on top of it.

The repo already had .did files, but I came across these videos by Kyle (IC Avatar Episode #5: Integrating with a Frontend - YouTube) and tried

dfx generate name_of_my_backend_canister

at the root folder, the same place where I run dfx start, and it seems to have generated additional did files somewhere else, but I still get

process.env.CANISTER_ID is: undefined


index.js:22276 Uncaught (in promise) ReferenceError: createActor is not defined
    at handleAuthenticated (index.js:22276:22)

This is my package.json

  "name": "app_name_frontend",
  "version": "0.1.0",
  "description": "Internet Computer starter application",
  "keywords": [
    "Internet Computer",
  "scripts": {
    "build": "webpack",
    "prebuild": "npm run generate",
    "start": "webpack serve --mode development --env development",
    "prestart": "npm run generate",
    "generate": "dfx generate app_name_backend"
  "devDependencies": {
    "@dfinity/agent": "0.15.1",
    "@dfinity/candid": "0.15.1",
    "@dfinity/principal": "0.15.1",
    "assert": "2.0.0",
    "buffer": "6.0.3",
    "copy-webpack-plugin": "^11.0.0",
    "events": "3.3.0",
    "html-webpack-plugin": "5.5.0",
    "process": "0.11.10",
    "stream-browserify": "3.0.0",
    "terser-webpack-plugin": "^5.3.3",
    "util": "0.12.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.8.1"
  "engines": {
    "node": "^12 || ^14 || ^16 || ^18"
  "browserslist": [
    "last 2 chrome version",
    "last 2 firefox version",
    "last 2 safari version",
    "last 2 edge version"
  "dependencies": {
    "@dfinity/auth-client": "^0.15.1"

I wonder if it would be easier to move the files from my repo to the auth-client-demo instead.

It seems like a lot of automated configuration is going on and I’m not sure how easy it is to actually use it other than directly building on top of it.

But then I’m not sure how straightforward it would be to move everything in that direction.

The demo video is only like 15 minutes so I assume adding auth is not meant to be a complicated process.

I’m happy with whatever works.

To be clear, the project already communicates fine between front and backend for other purposes, including for example making http outcalls to fetch data and then display it in the frontend. The problem is only in integrating authentication, specifically in making authenticated calls to the backend.

What’s the content of your src/declarations folder?