# New package - @dfinity/use-auth-client

**URL:** <https://forum.dfinity.org/t/new-package-dfinity-use-auth-client/33947>\
**Category:** JavaScript\
**Created:** [August 6, 2024, 7:29pm UTC](https://forum.dfinity.org/t/new-package-dfinity-use-auth-client/33947 "2024-08-06T19:29:27Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\
**Post date:** [August 6, 2024, 7:29pm UTC](https://forum.dfinity.org/t/new-package-dfinity-use-auth-client/33947/1 "2024-08-06T19:29:27Z")

</div>

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](https://github.com/dfinity/agent-js/tree/main/packages/use-auth-client), and it comes with an [example](https://github.com/dfinity/agent-js/tree/main/packages/use-auth-client/examples/auth-demo) you can reference.

To install, use

```auto
npm install @dfinity/use-auth-client

```

and you can import and set it up like so:

```auto
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/](https://5ibdo-haaaa-aaaab-qajia-cai.icp0.io/)

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

---

<div class="post-metadata">

**Author:** ![dfxjesse](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/dfxjesse/32/17424_2.png) [@dfxjesse](https://forum.dfinity.org/u/dfxjesse)\
**Post date:** [August 6, 2024, 7:32pm UTC](https://forum.dfinity.org/t/new-package-dfinity-use-auth-client/33947/2 "2024-08-06T19:32:28Z")

</div>

Awesome, that’s really handy 👏

Can you pass in multiple actors here?

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

```

---

<div class="post-metadata">

**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\
**Post date:** [August 6, 2024, 7:46pm UTC](https://forum.dfinity.org/t/new-package-dfinity-use-auth-client/33947/3 "2024-08-06T19:46:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dfxjesse](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/dfxjesse/32/17424_2.png) [@dfxjesse](https://forum.dfinity.org/u/dfxjesse)\
**Post date:** [August 6, 2024, 7:49pm UTC](https://forum.dfinity.org/t/new-package-dfinity-use-auth-client/33947/4 "2024-08-06T19:49:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Zeegaths](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/zeegaths/32/19479_2.png) [@Zeegaths](https://forum.dfinity.org/u/Zeegaths)\
**Post date:** [August 8, 2024, 10:26pm UTC](https://forum.dfinity.org/t/new-package-dfinity-use-auth-client/33947/5 "2024-08-08T22:26:35Z")

</div>

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?