Skip to main content

​
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: 
npm install @offline-protocol/id-react
or 
yarn add @offline-protocol/id-react
This will add the Offline Protocol SDK as a dependency to your project.

Next Steps

SDK Setup

​
2. Import the SDK

Then, import the SDK client in your project: 
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. 
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: 
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: 
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;