From 2d2908df6ad9712b5ce2b09764599bf0771b2de4 Mon Sep 17 00:00:00 2001 From: Frederik Rothenberger Date: Thu, 11 Jan 2024 13:35:12 +0100 Subject: [PATCH 1/2] Update II integration example to work with Chrome and FF again Due to II now having multiple JS bundles, using query parameter based routing no longer works in Chrome and FF. To alleviate this we recommend using Chrome or FF and to use the localhost subdomain approach. --- .../internet_identity_integration/README.md | 24 ++++++++++++++----- .../webpack.config.js | 2 +- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/motoko/internet_identity_integration/README.md b/motoko/internet_identity_integration/README.md index cdf72197e..a0ae88bed 100644 --- a/motoko/internet_identity_integration/README.md +++ b/motoko/internet_identity_integration/README.md @@ -15,10 +15,11 @@ This is a Motoko example that does not currently have a Rust variant. ## Prerequisites -- [x] Install the [IC SDK](https://internetcomputer.org/docs/current/developer-docs/setup/install/index.mdx). -- [x] Install [Node.js](https://nodejs.org/en/download/). -- [x] Download and install the `@dfinity/auth-client` package with the command `npm install @dfinity/auth-client`. -- [x] Download the following project files from GitHub: https://github.com/dfinity/examples/ +- [ ] Install the [IC SDK](https://internetcomputer.org/docs/current/developer-docs/setup/install/index.mdx). +- [ ] Install [Node.js](https://nodejs.org/en/download/). +- [ ] Download and install the `@dfinity/auth-client` package with the command `npm install @dfinity/auth-client`. +- [ ] Download the following project files from GitHub: https://github.com/dfinity/examples/ +- [ ] Chrome or Firefox browser (other browsers also work, but may need a slightly different webpack configuration, see the note on [step 4 below](#step-4-make-the-internet-identity-url-available-in-the-build-process)) ### Step 1: Navigate into the examples folder for this sample and then generate a new project with `dfx new`: @@ -95,9 +96,20 @@ Open the `internet_identity` link in the browser. You should be able to create a ### Step 4: Make the Internet Identity URL available in the build process. We want the sample application to integrate with Internet Identity differently depending on whether we deploy locally or on mainnet: -- Locally the application should use the Internet Identity URL http://127.0.0.1:4943/?canisterId=. +- Locally the application should use the Internet Identity URL http://.localhost:4943/. - On the mainnet it should use https://identity.ic0.app. +> **Note**: If you are using Safari (or any other browser that does not support subdomains on localhost, i.e this URL `http://.localhost:4943/`), you can try to use the following URL instead: `http://localhost:4943/?canisterId=`. This will work for Safari but not Chrome. +> To do so, replace the following line in the `webpack.config.js` file +> ```js +> const internetIdentityUrl = network === "local" ? `http://${canisterEnvVariables["INTERNET_IDENTITY_CANISTER_ID"]}.localhost:4943/` : `https://identity.ic0.app` +> ``` +> with +> ```js +> const internetIdentityUrl = network === "local" ? `http://localhost:4943/?canisterId=${canisterEnvVariables["INTERNET_IDENTITY_CANISTER_ID"]}` : `https://identity.ic0.app` +> ``` +> in the snippet below. + To do so, we can make an environment variable II_URL available using webpack. Open the `webpack.config.js` file and replace the contents with the following: @@ -142,7 +154,7 @@ const canisterEnvVariables = initCanisterEnv(); const isDevelopment = process.env.NODE_ENV !== "production"; -const internetIdentityUrl = network === "local" ? `http://localhost:4943/?canisterId=${canisterEnvVariables["INTERNET_IDENTITY_CANISTER_ID"]}` : `https://identity.ic0.app` +const internetIdentityUrl = network === "local" ? `http://${canisterEnvVariables["INTERNET_IDENTITY_CANISTER_ID"]}.localhost:4943/` : `https://identity.ic0.app` const frontendDirectory = "greet_frontend"; diff --git a/motoko/internet_identity_integration/webpack.config.js b/motoko/internet_identity_integration/webpack.config.js index 13b2d8483..56c062ec4 100644 --- a/motoko/internet_identity_integration/webpack.config.js +++ b/motoko/internet_identity_integration/webpack.config.js @@ -37,7 +37,7 @@ const canisterEnvVariables = initCanisterEnv(); const isDevelopment = process.env.NODE_ENV !== "production"; -const internetIdentityUrl = network === "local" ? `http://localhost:4943/?canisterId=${canisterEnvVariables["INTERNET_IDENTITY_CANISTER_ID"]}` : `https://identity.ic0.app` +const internetIdentityUrl = network === "local" ? `http://${canisterEnvVariables["INTERNET_IDENTITY_CANISTER_ID"]}.localhost:4943/` : `https://identity.ic0.app` const frontendDirectory = "greet_frontend"; From ef766e8a2a95630a9beb0b4aece5970d2cc50a25 Mon Sep 17 00:00:00 2001 From: Frederik Rothenberger Date: Thu, 11 Jan 2024 14:15:50 +0100 Subject: [PATCH 2/2] Use newer dfx --- .../motoko-internet-identity-integration-example.yaml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/motoko-internet-identity-integration-example.yaml b/.github/workflows/motoko-internet-identity-integration-example.yaml index 22bb64a5a..343feca56 100644 --- a/.github/workflows/motoko-internet-identity-integration-example.yaml +++ b/.github/workflows/motoko-internet-identity-integration-example.yaml @@ -18,6 +18,8 @@ jobs: steps: - uses: actions/checkout@v1 - name: Provision Darwin + env: + DFX_VERSION: 0.15.3 run: bash .github/workflows/provision-darwin.sh - name: Motoko Internet Identity Integration Darwin run: | @@ -30,6 +32,8 @@ jobs: steps: - uses: actions/checkout@v1 - name: Provision Linux + env: + DFX_VERSION: 0.15.3 run: bash .github/workflows/provision-linux.sh - name: Motoko Internet Identity Integration Linux run: |