Skip to main content

Step 1: Set up your local environment

Clone the following GitHub repository to get started:
git clone https://github.com/Offline-Protocol/id-sdk-react-test-app.git
cd id-sdk-react-test-app
This repository contains the SDK and example code to help you integrate quickly.

Step 2: Run as a Next.js app

  1. Install dependencies:
    npm install
    # or
    yarn install
    
  2. Start the development server:
    npm run dev
    # or
    yarn dev
    
  3. Open http://localhost:3000 to see your app live.

Step 3: Configure your project

Create a project To interact with Offline Protocol, you’ll need an active project on your dev dashboard
  1. Visit the SDK Setup page.
  2. Create a new project.
  3. Add allowed origins to the domain allowlist. 4. Use the projectId to initialize the SDK Provider.
Wrap your app with the OfflineProvider and pass the project ID:
import { OfflineProvider } from "@offline-protocol/id-react";

const OFFLINE_PROJECT_ID = "<your_project_id>"

export default function App({ Component, pageProps }) {
  return (
    <OfflineProvider projectId={OFFLINE_PROJECT_ID}>
      <Component {...pageProps} />
    </OfflineProvider>
  );
}

Step 4: Go live

Deploy your Next.js app” You can deploy your app to any hosting service (e.g. Netlify).
  1. Push your code to GitHub.
  2. Connect your repo to the hosting provider.
  3. Deploy and your app is live!

Next steps

Now that you have Offline Protocol running, check out these features:
Need help? Check out the full documentation or join the community forum.