New package - @dfinity/use-auth-client

Developers JavaScript
1

Introducing @dfinity/use-auth-client! This is a new package for React developers, making it easier to integrate the auth-client with your React application.

You can use it to manage your identity for you, or you can pass it an idlFactory and canisterId and it will construct and manage your entire Actor for you.

This was a quick side project for me, so more documentation will come soon. In the meantime, the code lives at agent-js/packages/use-auth-client, and it comes with an example you can reference.

To install, use

npm install @dfinity/use-auth-client

and you can import and set it up like so:

import {useAuthClient} from '@dfinity/use-auth-client';

...
const App = ()=>{
  const identityProvider =
    // eslint-disable-next-line no-undef
    process.env.DFX_NETWORK === 'local'
      ? // eslint-disable-next-line no-undef
        `http://${process.env.CANISTER_ID_INTERNET_IDENTITY}.localhost:4943`
      : 'https://identity.ic0.app';

  const { isAuthenticated, login, logout, actor } = useAuthClient({
    loginOptions: {
      identityProvider,
    },
    actorOptions: {
      canisterId,
      idlFactory,
    },
  });
  ...
}

There is a live demo at https://5ibdo-haaaa-aaaab-qajia-cai.icp0.io/

Additional generated documentaion is available at https://agent-js.icp.xyz/use-auth-client/index.html

5 Likes
2

Awesome, that’s really handy :clap:

Can you pass in multiple actors here?

  const { isAuthenticated, login, logout, actor } = useAuthClient({
    loginOptions: {
      identityProvider,
    },
    actorOptions: {
      canisterId,
      idlFactory,
    },
  });
3

Not yet, but I’m open to adding that feature! I could easily make the actorOptions field accept something like ActorOptions | ActorOptions & { id: string }[] and return a list of actors

1 Like
4

I think that would be a popular use-case as many projects are multi-canister. I know I would be looking to use this as it would simplify my auth code - great job.

5

does anyone know why im getting this console error:

Uncaught TypeError: Failed to resolve module specifier “@dfinity/use-auth-client”. Relative references must start with either “/”, “./”, or “…/”.
on my import?