Skip to main content

​
1. Download the Offline Protocol SDK

Install the SDK into your React project: 
npm install @offline-protocol/id-react
or 
yarn add @offline-protocol/id-react

​
2. Setup the OfflineProvider

Wrap your app’s root layout (layout.tsx or index.tsx) with the OfflineProvider to enable authentication and connections across the app.
layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <OfflineAppProvider apiKey={your_api_key}>
          {children}
        </OfflineAppProvider>
      </body>
    </html>
  );
}

​
3. Handle Authentication

Use the useAuth hook to check if the user is logged in. If the user object is null, show the login form; otherwise, render the main app. 
import { useAuth } from "@offline-protocol/id-react";

export default function App() {
  const { user } = useAuth();

  if (!user) return <LoginForm />;
  return <Profile />;
}

​
4. Email Login Flow

​
a. Request Login Code

Users enter their email address and a login code is sent to their inbox. Email input

​
b. Verify the Code

Once the code is entered and verified, the user is granted access to the home page. Email Verify Code

​
6. First Login Experience

After signing in, users will land on the home page where their existing profiles and connections are automatically synced from Offline Protocol. Home
⌘I