# Internet Computer Authetication

**URL:** <https://forum.dfinity.org/t/internet-computer-authetication/33772>\
**Category:** internet-identity\
**Created:** [July 31, 2024, 6:57pm UTC](https://forum.dfinity.org/t/internet-computer-authetication/33772 "2024-07-31T18:57:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nailer](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/nailer/32/18496_2.png) [@Nailer](https://forum.dfinity.org/u/Nailer)\
**Post date:** [July 31, 2024, 6:57pm UTC](https://forum.dfinity.org/t/internet-computer-authetication/33772/1 "2024-07-31T18:57:03Z")

</div>

Please I want to integrate Internet Identity and NFID in my project using React but docs I got from dfinity websites is full of bugs and not basically on React

Please anyone with resources that can help with the internet computer integration - I’m a developer and a straight forward doc will really be helpful

---

<div class="post-metadata">

**Author:** ![b3hr4d](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/b3hr4d/32/9755_2.png) [@b3hr4d](https://forum.dfinity.org/u/b3hr4d)\
**Post date:** [August 1, 2024, 9:34am UTC](https://forum.dfinity.org/t/internet-computer-authetication/33772/2 "2024-08-01T09:34:54Z")

</div>

If you want to integrate Internet Identity into your React project, I recommend using the [`ic-reactor`](https://forum.dfinity.org/t/introduction-ic-reactor-react-for-react-developers/27930) library. It’s a library I’ve been developing that is designed to simplify authentication and interaction with canisters on the Internet Computer platform. Here’s a quick example to get you started:

### Installation

First, install `ic-reactor` by running:

```bash
npm install @ic-reactor/react

```

Or, if you’re using Yarn:

```bash
yarn add @ic-reactor/react

```

### Example Usage

**Wrap your `App` component with the `AgentProvider`:**

```javascript
import { AgentProvider } from "@ic-reactor/react";
import App from './App';

const Root = () => (
  <AgentProvider withLocalEnv>
    <App />
  </AgentProvider>
);

export default Root;

```

**Use the `Login` component for handling authentication in your `App` component:**

```javascript
import { useAuth } from "@ic-reactor/react";

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

  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()} disabled={authenticating}>
            Login
          </button>
        </div>
      )}
    </>
  );
};

export default Login;

```

For a complete example, you can check out the [ic-reactor examples](https://github.com/B3Pay/ic-reactor/tree/main/examples). Additionally, detailed documentation is available [here](https://b3pay.github.io/ic-reactor/modules/react.html).

Feel free to explore these resources, and if you have any questions, don’t hesitate to reach out!