Offline Protocol React Native SDK Usage

This guide explains how to integrate Offline Protocol authentication into a React Native or Expo app using the @offline-protocol/id-react-native package. It covers setting up the OfflineAppProvider and using the loginWithModal() function for user authentication.

Installation

Install the SDK:

npm install @offline-protocol/id-react-native

or

yarn add @offline-protocol/id-react-native

Setup – OfflineAppProvider

Wrap your app with the OfflineAppProvider. This initializes the Offline SDK and makes authentication state available across your app.

import { OfflineAppProvider } from "@offline-protocol/id-react-native";

export default function App() {
  return (
    <OfflineAppProvider projectId="your-project-id">
      {/* Your app content goes here */}
    </OfflineAppProvider>
  );
}

Note: Replace "your-project-id" with your actual project ID from the Offline Dashboard

Authentication – loginWithModal()

The SDK provides a convenient loginWithModal() method to open a prebuilt modal for logging in. You can access it using the useOfflineIdentity() hook.

import { useAuth } from "@offline-protocol/id-react-native";

export default function Example() {
  const { loginWithModal, user, logout } = useAuth();

  const handleLogin = async () => {
    try {
      const result = await loginWithModal();
      console.log("User logged in:", result);
    } catch (error) {
      console.error("Login failed:", error);
    }
  };

  return <>{/* Call handleLogin on button press */}</>;
}