Building a React Social App with Offline ID - Offline Protocol Docs

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

Email Verify Code

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.