When I am trying to use Internet Identity in my web website, it is showing me this error on the browser
Failed to load resource: the server responded with a status of 400 (Bad Request)
and here is the js code in the frontend
import { useState, useEffect } from "react";
import { AuthClient } from "@dfinity/auth-client";
import { Actor, HttpAgent } from "@dfinity/agent";
import { idlFactory } from "declarations/tripdrive_app_backend";
import Navbar from "./components/Navbar";
const env = process.env.DFX_NETWORK || "local";
const localhost = "http://localhost:4943";
const livehost = "https://icp0.io";
function App() {
const [greeting, setGreeting] = useState("");
const [isAuthenticated, setIsAuthenticated] = useState(false);
const login = async () => {
const authClient = await AuthClient.create({
idleOptions: {
idleTimeout: 1000 * 60 * 30,
disableDefaultIdleCallback: true,
},
});
await authClient.login({
identityProvider:
env === "local"
? `http://localhost:4943?canisterId=${process.env.CANISTER_ID_INTERNET_IDENTITY}`
: "https://identity.ic0.app/#authorize",
onSuccess: () => {
checkAuth();
},
});
};
const checkAuth = async () => {
try {
const authClient = await AuthClient.create();
if (await authClient.isAuthenticated()) {
setIsAuthenticated(true);
}
} catch (error) {
console.log("Error on check auth ", error);
}
};
const logout = async () => {
const authClient = await AuthClient.create();
await authClient.logout();
setIsAuthenticated(false);
};
useEffect(() => {
checkAuth();
}, []);
const [identity, setIdentity] = useState(null);
useEffect(() => {
const initializeAuthClient = async () => {
const client = await AuthClient.create();
const id = client.getIdentity();
setIdentity(id);
};
initializeAuthClient();
}, []);
const principal = identity?.getPrincipal().toString();
console.log(`Principal Id: ${principal}`);
let agent = new HttpAgent({
host: env === "local" ? localhost : livehost,
identity: identity,
});
//Only use agent.fetchRootKey() in development mode, in production remove this line
agent.fetchRootKey();
const backendActor = Actor.createActor(idlFactory, {
agent,
canisterId: process.env.CANISTER_ID_TRIPDRIVE_APP_BACKEND,
});
function handleSubmit(event) {
event.preventDefault();
const name = event.target.elements.name.value;
backendActor.greet(name).then((greeting) => {
setGreeting(greeting);
});
return false;
}
return (
<>
<Navbar {...{ login, logout, isAuthenticated }} />
<Main
onClick={handleSubmit}
isAuthenticated={isAuthenticated}
greeting={greeting}
/>
</>
);
}
Dfx Internet Identity Setup
"internet_identity": {
"type": "custom",
"candid": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did",
"wasm": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm.gz",
"remote": {
"id": {
"ic": "rdmx6-jaaaa-aaaaa-aaadq-cai"
}
},
"frontend": {}
},
I am using dfx version 0.18 for development.