I was able to solve this by copying this file directly into the dApp project, then modifying some functions to return an auto-generated Identity based on a local config setting (the idea came from this post ).
# mainnet environment variables
# for local development, create a .env.local file with replacement values
# for local development, use one or both of the following 2 variables
# II_PROVIDER_USE_FAKE overrides II_PROVIDER_URL
# local value: "http://<locally deploy Internet Identity canister id>.localhost:8000/#authorize"
II_PROVIDER_URL="https://identity.ic0.app/#authorize"
# local value: "true"
II_PROVIDER_USE_FAKE="false"
}, []);
return (
<InternetIdentityProvider
authClientOptions={{
onSuccess: (identity) => console.log(
"Successful Login", {identity}
),
identityProvider: `${process.env.II_PROVIDER_URL}`,
}}
fakeProvider={process.env.II_PROVIDER_USE_FAKE == 'true'}
>
<header>
<h1>Verified Giveaways</h1>
</header>
<div className="layout-center">
<main className="layout-main">
<Outlet/>
</main>
<nav className="layout-nav">
<ul>
const [authClient, setAuthClient] = React.useState<AuthClient | null>(null)
const [isAuthenticated, setIsAuthenticated] = React.useState(false)
const [error, setError] = React.useState<string | null>(null)
const identityProvider = (
authClientOptions.identityProvider || 'https://identity.ic0.app/#authorize'
).toString()
const createAuthClient = React.useCallback(async () => {
var authClient: React.SetStateAction<AuthClient | null>;
if (fakeProvider) {
authClient = await AuthClient.create({ identity: Ed25519KeyIdentity.generate() });
} else {
authClient = await AuthClient.create({});
}
setAuthClient(authClient)
}, [])
React.useEffect(() => {
createAuthClient()
}, [createAuthClient])
(error) => {
setError(error)
onError && onError(error)
},
[onError]
)
const authenticate = React.useCallback(async () => {
if (authClient) {
if (fakeProvider) {
handleOnSuccess(authClient);
} else {
await authClient.login({
onSuccess: () => handleOnSuccess(authClient),
onError: handleOnError,
identityProvider,
...authClientOptions
});
}
}
}, [
authClient,
authClientOptions,
handleOnError,
handleOnSuccess,
identityProvider
])
const signout = React.useCallback(async () => {
if (authClient) {
if (!fakeProvider) {
await authClient.logout();
}
setIsAuthenticated(false);
}
}, [authClient])
return {
error,
authClient,
identityProvider,
When developing locally, login just works by using a generated Identity instead of connecting to an II provider.
When deploying to mainnet, login uses the actual mainnet II provider.
1 Like