> ## Documentation Index
> Fetch the complete documentation index at: https://www.offlineprotocol.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup - React

## Prerequisites

* Node.js version `18.x` or higher
* React version `18.x` or higher
* A package manager: `npm` or `yarn`

## 1. Install the SDK

Run one of the following commands depending on your package manager:

```bash theme={null}
npm install @offline-protocol/id-react
```

or

```bash theme={null}
yarn add @offline-protocol/id-react
```

This will add the Offline Protocol SDK as a dependency to your project.

<Card title="Next Steps" icon="cube" href="/docs/getting-started/sdk-setup">
  SDK Setup
</Card>

## 2. Import the SDK

Then, import the SDK client in your project:

```ts theme={null}
import { OfflineAppProvider } from "@offline-protocol/id-react";
```

## 3. Initialize the React App Provider with your project ID

Finally, wrap your application's root component with OfflineAppProvider and pass in your project id. This project id is required for authenticating all requests made to the Offline Protocol Identity Service.

Once initialized, you can access SDK functionality anywhere in your app using the provided hooks.

```ts theme={null}
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { OfflineAppProvider } from "@offline-protocol/id-react";

const PROJECT_ID = "your-id-here";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <OfflineAppProvider projectId={PROJECT_ID}>
    <App />
  </OfflineAppProvider>
);
```

## 4. Verify Your Setup

Test your SDK configuration with a simple API call:

```javascript theme={null}
import { useAuth } from "@offlineprotocol/sdk";

function TestComponent() {
  const { user } = useAuth();

  return <>SDK Connected! User: {user?.email || "Not authenticated"}</>;
}
```

## 5. Implement User Authentication

Now let's add authentication to your application using the `loginWithModal` function.
Use the `useAuth` hook to access the `loginWithModal` function:

```jsx theme={null}
import { useAuth } from "@offlineprotocol/sdk";

function LoginButton() {
  const { loginWithModal, user, logout } = useAuth();

  const handleLogin = async () => {
    try {
      await loginWithModal();
      console.log("User logged in successfully!");
    } catch (error) {
      console.error("Login failed:", error);
    }
  };

  if (user) {
    return <p>Welcome, {user.email}!</p>;
  }

  return <>Login with Offline Protocol</>;
}

export default LoginButton;
```