# Debugging this Internet Identity Authentication Repo

**URL:** <https://forum.dfinity.org/t/debugging-this-internet-identity-authentication-repo/17797>\
**Category:** Developers\
**Created:** [January 4, 2023, 4:08pm UTC](https://forum.dfinity.org/t/debugging-this-internet-identity-authentication-repo/17797 "2023-01-04T16:08:49Z")\
**Posts on this page:** 1\
**Showing post:** 13

<div class="post-metadata">

**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\
**Post date:** [January 6, 2023, 8:08am UTC](https://forum.dfinity.org/t/debugging-this-internet-identity-authentication-repo/17797/13 "2023-01-06T08:08:33Z")

</div>

> [@blabagastered](#):
>
> 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)?

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 @anon74414410 sample repo you can see here that a function of the webpack configuration is loading the list of canister ids in `process.env` [https://github.com/krpeacock/auth-client-demo/blob/bf332ad325207bfa614a322169aa943c3dc7556b/webpack.config.js#L96](https://github.com/krpeacock/auth-client-demo/blob/bf332ad325207bfa614a322169aa943c3dc7556b/webpack.config.js#L96)

`process.env` that can then be used in the frontend typescript/javascript code e.g. [https://github.com/krpeacock/auth-client-demo/blob/bf332ad325207bfa614a322169aa943c3dc7556b/src/auth\_client\_demo\_assets/src/index.ts#L46](https://github.com/krpeacock/auth-client-demo/blob/bf332ad325207bfa614a322169aa943c3dc7556b/src/auth_client_demo_assets/src/index.ts#L46)

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.

---

_[View the full topic](https://forum.dfinity.org/t/debugging-this-internet-identity-authentication-repo/17797)._