How to bind network to Identity Provider

Developers
1

I cannot direct my implemented Internet Identity button to the correctly formatted link.

When I click on this button, it directs me to http://127.0.0.1:4943/?canisterId=rdmx6-jaaaa-aaaaa-aaadq-cai#authorize (which has several errors including not being able to load sars.js) instead of http://localhost:4943?canisterId=rdmx6-jaaaa-aaaaa-aaadq-cai#authorize.

I have implemented the following button in my NextJS application:

import { AuthClient } from "@dfinity/auth-client";
import { HttpAgent, Identity } from "@dfinity/agent";
import { useState } from "react";

export default function IIButton() {

    const [newIdentity, setNewIdentity] = useState<Identity | undefined>();

    async function InternetIdentityLogin(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
        e.preventDefault();
    
        let authClient = await AuthClient.create();
        await new Promise((resolve) => {
            authClient.login({
                identityProvider:
                    process.env.DFX_NETWORK === "ic"
                        ? "https://identity.ic0.app"
                        : `http://localhost:4943/?canisterId=rdmx6-jaaaa-aaaaa-aaadq-cai`,
                onSuccess: () => resolve,
            });
        });
        const identity = authClient.getIdentity();
        if (identity) {
            setNewIdentity(identity);
        }
        const agent = new HttpAgent({ identity });
        return agent;
    }
    

    return (
        <div className="flex w-1/2 mb-4">
            {!newIdentity ? <button onClick={async (e) => { await InternetIdentityLogin(e) }} className="btn btn-primary">Login to Internet Identity</button> :
                <span className="badge">{newIdentity.toString()}</span>}
        </div>
    );
};

I have also updated my dfx.json so that the local servers are bind to localhost:4943:

"networks": {
      "local": {
          "bind": "localhost:4943",
          "type": "ephemeral"
      }
  }

What am I doing wrong?

2

I made a library called @ic-reactor/react its sweet for react development.

installation:

npm install @ic-reactor/react

usage:

"use client"
import { createReActor } from "@ic-reactor/react"
import { canisterId, idlFactory, todo } from "declarations/todo"

export const {
  useActorStore,
  useAuthStore,
  useAuthClient,
  useQueryCall,
  useUpdateCall
} = createReActor<typeof todo>({
  idlFactory,
  canisterId,
  withDevtools: true
})

then on your Login component use

import { useAuthClient } from "service/todo"

interface LoginProps {}

const Login: React.FC<LoginProps> = ({}) => {
  const {
    login,
    logout,
    loginLoading,
    loginError,
    identity,
    authenticating,
    authenticated
  } = useAuthClient()

  return (
    <>
      <div>
        {loginLoading && <div>Loading...</div>}
        {loginError ? <div>{JSON.stringify(loginError)}</div> : null}
        {identity && <div>{identity.getPrincipal().toText()}</div>}
      </div>
      {authenticated ? (
        <div className="flex flex-col align-center">
          <button onClick={() => logout()}>Logout</button>
        </div>
      ) : (
        <div>
          <button
            onClick={() =>
              login({
                identityProvider:
                  process.env.DFX_NETWORK === "ic"
                    ? "https://identity.ic0.app/#authorize"
                    : "http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:4943/#authorize"
              })
            }
            disabled={authenticating}
          >
            Login
          </button>
        </div>
      )}
    </>
  )
}

export default Login
3

Thank you for this - did you build this as part of a grant?

4

I was able to resolve my issue. The NextJS application was expecting the bind to be http://127.0.0.1:4943/?canisterId=rdmx6-jaaaa-aaaaa-aaadq-cai#authorize because I had conflicting CSP configurations.

I removed CSP configurations on NextJS that I tried to implement as part of trying to resolve Fixing CSP errors related to Internet Identity on NextJS and reverted next.config.js to:

/** @type {import('next').NextConfig} */
const nextConfig = { 
  output: 'export' 
}

module.exports = nextConfig

Thank you everyone for reading!

5

No, I made it as part of my organization and used on my main project B3Wallet.