Subject: Assistance Needed for Invalid Derivation Origin Issue with Locally Deployed Canisters
Hello everyone,
I am building a new project and i am seeking assistance with an issue I am facing with authentication while trying to log in using the Internet Identity canister in my locally deployed project. Below are the details of my setup and the problem I am encountering.
Deployment Overview
I have successfully deployed my Internet Identity, backend, frontend, and other canisters. Here are the deployment results:
╭─green@greenhouse ~/Documents/ICP-WCHL-25/practice/deCentra ‹main*›
╰─➤ dfx deploy
Deploying all canisters.
Created a wallet canister on the "local" network for user "2800791" with ID "bnz7o-iuaaa-aaaaa-qaaaa-cai"
backend canister created with canister id: bkyz2-fmaaa-aaaaa-qaaaq-cai
frontend canister created with canister id: bd3sg-teaaa-aaaaa-qaaba-cai
internet_identity canister created with canister id: rdmx6-jaaaa-aaaaa-aaadq-cai
posts canister created with canister id: be2us-64aaa-aaaaa-qaabq-cai
users canister created with canister id: br5f7-7uaaa-aaaaa-qaaca-cai
Installed code for canister backend, with canister ID bkyz2-fmaaa-aaaaa-qaaaq-cai
WARN: This project does not define a security policy for any assets.
WARN: You should define a security policy in .ic-assets.json5. For example:
WARN: [
WARN: {
WARN: "match": "**/*",
WARN: "security_policy": "standard"
WARN: }
WARN: ]
WARN: To disable the policy warning, define "disable_security_policy_warning": true in .ic-assets.json5.
Installed code for canister frontend, with canister ID bd3sg-teaaa-aaaaa-qaaba-cai
Installed code for canister internet_identity, with canister ID rdmx6-jaaaa-aaaaa-aaadq-cai
Installed code for canister posts, with canister ID be2us-64aaa-aaaaa-qaabq-cai
Installed code for canister users, with canister ID br5f7-7uaaa-aaaaa-qaaca-cai
Deployed canisters.
URLs:
Frontend canister via browser:
frontend:
- http://bd3sg-teaaa-aaaaa-qaaba-cai.localhost:4943/ (Recommended)
- http://127.0.0.1:4943/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai (Legacy)
internet_identity:
- http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:4943/ (Recommended)
- http://127.0.0.1:4943/?canisterId=rdmx6-jaaaa-aaaaa-aaadq-cai (Legacy)
Backend canister via Candid interface:
backend: http://127.0.0.1:4943/?canisterId=bw4dl-smaaa-aaaaa-qaacq-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai
internet_identity: http://127.0.0.1:4943/?canisterId=bw4dl-smaaa-aaaaa-qaacq-cai&id=rdmx6-jaaaa-aaaaa-aaadq-cai
posts: http://127.0.0.1:4943/?canisterId=bw4dl-smaaa-aaaaa-qaacq-cai&id=be2us-64aaa-aaaaa-qaabq-cai
users: http://127.0.0.1:4943/?canisterId=bw4dl-smaaa-aaaaa-qaacq-cai&id=br5f7-7uaaa-aaaaa-qaaca-cai
╭─green@greenhouse ~/Documents/ICP-WCHL-25/practice/deCentra ‹main*›
╰─➤
Successful Login Attempt
I was able to log in directly using the Internet Identity canister via the following URL:
- Internet Identity Canister URL:
http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:4943
Problematic Scenario
However, when I attempt to log in through the frontend canister using this URL:
- Frontend Canister URL:
http://127.0.0.1:4943/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai
I am redirected to the mainnet Internet Identity instance and receive the following error:
Invalid Derivation Origin
"https://decentra.app" is not a valid derivation origin for "http://bd3sg-teaaa-aaaaa-qaaba-cai.localhost:4943"
Error details:
Could not resolve canister id for derivationOrigin "https://decentra.app".
I expected to be directed to my locally deployed Internet Identity canister (rdmx6-jaaaa-aaaaa-aaadq-cai).
Additional Context
Interestingly, when I run my Next.js app and access it on localhost:3000, I can log in successfully using my locally deployed Internet Identity canister. This leads me to wonder if there is an issue with how my app is configured or deployed.
Configuration Snippet
Here is a relevant snippet from my dfx.json file:
"internet_identity": {
"candid": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did",
"type": "custom",
"specified_id": "rdmx6-jaaaa-aaaaa-aaadq-cai",
"remote": {
"id": {
"ic": "rdmx6-jaaaa-aaaaa-aaadq-cai"
}
},
"wasm": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm.gz",
"frontend": {}
}
},
"defaults": {
"build": {
"args": "",
"packtool": "mops sources"
}
},
"output_env_file": ".env",
Environment Configuration
I have also set up my environment variables to configure the frontend app to communicate with the Internet Identity and other canisters:
// ICP and canister configuration aligned with dfx.json
export const icpConfig = {
// Network configuration - use DFX_NETWORK as primary indicator
network: process.env.DFX_NETWORK || (process.env.NODE_ENV === "production" ? "ic" : "local"),
// Canister IDs from environment variables (populated after deployment)
canisters: {
backend: process.env.NEXT_PUBLIC_CANISTER_ID_BACKEND || "",
users: process.env.NEXT_PUBLIC_CANISTER_ID_USERS || "",
posts: process.env.NEXT_PUBLIC_CANISTER_ID_POSTS || "",
},
// Internet Identity configuration
internetIdentity: {
canisterId: process.env.NEXT_PUBLIC_CANISTER_ID_INTERNET_IDENTITY || "",
derivationOrigin: getDerivationOrigin(),
},
// Host configuration
host: process.env.NODE_ENV === "production" ? "https://ic0.app" : "http://localhost:4943",
// Identity provider URL
identityProvider: getIdentityProvider(),
} as const
// Helper function to determine the correct derivation origin
function getDerivationOrigin(): string {
const network = process.env.DFX_NETWORK || (process.env.NODE_ENV === "production" ? "ic" : "local");
if (network === "ic") {
return "https://decentra.app";
}
// In development, use the current origin if available (browser context)
if (typeof window !== "undefined") {
const origin = window.location.origin;
// Handle different local development URLs
if (origin.includes("localhost:3000")) {
return "http://localhost:3000";
}
// Handle canister URLs - always use localhost:3000 as derivation origin
if (origin.includes("localhost:4943") || origin.includes("127.0.0.1:4943")) {
return "http://localhost:3000";
}
return origin;
}
// Fallback for server-side rendering or when window is not available
return "http://localhost:3000";
}
// Helper function to get the correct identity provider URL
function getIdentityProvider(): string {
const network = process.env.DFX_NETWORK || (process.env.NODE_ENV === "production" ? "ic" : "local");
const iiCanisterId = process.env.NEXT_PUBLIC_CANISTER_ID_INTERNET_IDENTITY || "";
if (network === "ic") {
return "https://identity.ic0.app#authorize";
}
return `http://localhost:4943/?canisterId=${iiCanisterId}`;
}
export type ICPConfig = typeof icpConfig
Request for Help
I would greatly appreciate any insights or suggestions on how to resolve the “Invalid Derivation Origin” issue. As I am new to Motoko and Dfinity, any guidance would be immensely helpful.
Thank you for your assistance!
Note: I encountered an additional error while testing:
HTTPConnectionPool(host='bd3sg-teaaa-aaaaa-qaaba-cai.localhost', port=4943): Max retries exceeded with url: / (Caused by NameResolutionError("<urllib3.connection.HTTPConnection object at 0x7fd8016f4710>: Failed to resolve 'bd3sg-teaaa-aaaaa-qaaba-cai.localhost' ([Errno -2] Name or service not known)"))
I look forward to your responses!
Best regards,
Green