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 projectId={your_project_id_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. 
export default function App() {
  const { user, loginWithModal } = useAuth();

  if (!user) {
    return (
      <button
        className="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-all"
        onClick={loginWithModal}
      >
        Get Started
      </button>
    );
  }
  return <UserProfile />;
}
Email input

​
4. Request Login Code and Verify

Email Verify Code

​
5. 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. Display the connections or profiles and other details the way you prefer. Home