How to get the Internet Identity ID dynamically?

Developers
,
1

Hello Everyone,

Is there a way to get the Internet Identity ID dynamically in the webpack.config.js?

Below is my current code.

new webpack.EnvironmentPlugin({
      NODE_ENV: "development",
      II_URL: isDevelopment
        ? "http://localhost:4943/?canisterId=" +
          process.env.INTERNET_IDENTITY_CANISTER_ID +
          "#authorize"
        : "https://identity.ic0.app/#authorize",
      ...canisterEnvVariables,
    }),

The “process.env.INTERNET_IDENTITY_CANISTER_ID” seems not to work, it gives me undefined output in URL.

image

Thank you.

2

You can use ChatGPT for these types of questions, and also drill down into details after it answers your initial one, for example ask it for alternative solutions and so on :slight_smile: .
Below its answer to your question:

In order to get the INTERNET_IDENTITY_CANISTER_ID dynamically in your webpack.config.js file, you can try using the dotenv library to load environment variables from a .env file.

To use the dotenv library, you will first need to install it as a dependency:

Copy code

npm install dotenv

Then, create a .env file in the root of your project and add the INTERNET_IDENTITY_CANISTER_ID variable to it:

Copy code

INTERNET_IDENTITY_CANISTER_ID=your_internet_identity_canister_id

Next, you can use the dotenv library to load the variables from the .env file into your Node.js application’s environment by requiring it at the top of your webpack.config.js file:

Copy code

require('dotenv').config();

This will allow you to access the INTERNET_IDENTITY_CANISTER_ID variable using process.env.INTERNET_IDENTITY_CANISTER_ID.

Your webpack.config.js file should then look something like this:

Copy code

const webpack = require('webpack');

require('dotenv').config();

module.exports = {
  // your webpack config here
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: "development",
      II_URL: isDevelopment
        ? "http://localhost:4943/?canisterId=" + process.env.INTERNET_IDENTITY_CANISTER_ID + "#authorize"
        : "https://identity.ic0.app/#authorize",
      ...canisterEnvVariables,
    })
  ]
};

This should allow you to access the INTERNET_IDENTITY_CANISTER_ID variable dynamically in your webpack.config.js file.

1 Like
3

but if you’re doing it in browser and node on server side, you must build your code with all variables rendered into plain text, you can’t query environment variable in the browser because there’s no server-side “process environment” to read this from. So all you can do is make sure to build the distribution of your app with all values included in their correct locations. During CI/CD process people usually bake-in those values, and then in gets deployed to relevant environments (for example in a multi-tenant company where apps get deployed for each enterprise customer separately, all required unique values are written into minified builds during build time). I hope it helps :slight_smile:

1 Like
4

Hi @mystical sorry for the late response, I was out of town and just got back.

About the “process.env.INTERNET_IDENTITY_CANISTER_ID” I got it from the local internet_idenity itself (see screenshot below).

image
image1047×541 95.7 KB

I was hoping if I was able to get the II canister ID from that and use it to webpack to set the ID dynamically instead of typing it.

Just in case the II canister ID was changed, I don’t need to worry since it was set dynamically, not sure thought if that is possible.

Cheers…

1 Like
5

hmm, it’ll need to pull it from some backend then, because you’re working here with a client side code as I understand, the client would never know if something like canister is changing because it’s on remote servers/nodes. But I’m not a developer in ICP so maybe someone with real knowledge will have advice. I just chimed in with my idea of asking the AI for things that are generic (it sometimes comes up with good information actually :smile: I really enjoy using it, can’t wait for GPT-4 public release).

1 Like
6

how it’s done in classic microservice architectures where the addresses of servers that the app should connect to, are unknown or can change any time (mobile game let’s say, or a vpn), is that there’s one “central” service that never changes, and its only job is to “know” what other server addresses exist and operational at this specific moment. So all clients will always first as this “indexer” backend which indexes all other servers and knows everything about them (to which countries to serve it, which client profiles, geo locations, etc’) so it’ll respond with current IP or DNS record of the backend that “can serve, current client needs” (when there are many possible backends to connect to). In your case it’ll be a canister that never-ever changes its ID/address whatever it is, that helps clients to locate it. And this simple canister, will be the location where you always put the correct “new address” of the “real workload canister”, so no matter how frequently you change it, client side code will always pull the correct ID of whatever backend you want them all to point at.
I hope it helps :slight_smile: it’s architecture related, not ICP specific (cos I know nothing about ICP coding :sweat_smile: but the concept should work anywhere).

1 Like
7

@mystical no worries :joy: I heard of it weeks ago and people are enjoying it.

8

Hi @peterparker how are you? I don’t want to mention you here maybe you’re having vacation at the moment and I don’t want to disturb you :sweat_smile:

9

Fine and you? I just took few days and those were spent mostly developing my new side project (which is way too big I slowly realize).

Is your project open source? Can I clone it?

It will be easier to reproduce and debug.

1 Like
10

Hi @peterparker

Yes I push it on GitHub, you can see it on the link below :smile:

In the webpack file, I hard coded the local II Canister ID since the “process.env.INTERNET_IDENTITY_CANISTER_ID” won’t work for me at the moment :sweat_smile:

Cheers…

11

Thanks for the repo. Following worked out for me with your project:

  1. remove the hard coded II canister ID in webpack.config.js 
new webpack.EnvironmentPlugin({
      NODE_ENV: "development",
      ...canisterEnvVariables,
    }),
  1. use process.env.INTERNET_IDENTITY_CANISTER_ID for the auth-client
await authClient?.login({
        onSuccess: async () => {
          initActor(authClient);
          navigate("/");
        },
        // 7 days in nanoseconds
        maxTimeToLive: BigInt(7 * 24 * 60 * 60 * 1000 * 1000 * 1000),
        ...(process.env.NODE_ENV === 'development' && {identityProvider: `http://localhost:4943/?canisterId=${process.env.INTERNET_IDENTITY_CANISTER_ID}#authorize`})
      });
  1. dfx start + dfx deploy + npm run start
  2. test on the browser on http://localhost:8080/

Hope that helps.

2 Likes
12

Hi @peterparker I followed the instructions above and it works perfectly :100:

Thank you so much for your time, I know you’re a very busy person (especially this year because of your special project) but you still give your time to answer our questions, we appreciate that.

Thank you once again :heart:

13

Glad to hear it worked out :partying_face:

No worries, we are all super busy building super stuffs. Happy to help!

I liked the UI of your dapp,nice and clean. Keep going :muscle:

1 Like