@offline-protocol/id-react-native

React Native SDK for Offline Protocol identity: email OTP login, session restore, profiles, connections, and optional OfflineID credentials.

License

MIT — see LICENSE.

Install

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

Peer dependencies

Install these in your app:

npm install @offline-protocol/core @react-native-async-storage/async-storage axios react-native-svg

• react ^18 or ^19
• react-native

Setup

Wrap your app with OfflineAppProvider and pass your project / app ID (from the Offline developer portal):

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

export default function App() {
  return (
    <OfflineAppProvider appId="app_xxxxxxxx">
      {/* your screens */}
    </OfflineAppProvider>
  );
}

The provider restores the session from AsyncStorage on launch, sets API headers, and exposes auth state to the tree.

Authentication

Use useAuth() for login, logout, and user state:

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

function SignInScreen() {
  const {
    user,
    token,
    loading,
    loginWithModal,
    logout,
    sendCode,
    verifyCode,
    registerUsername,
    isUsernameAvailable,
    refreshUser,
    sessionRestoreError,
  } = useAuth();

  if (loading) return null;

  if (!user) {
    return <Button title="Log in" onPress={loginWithModal} />;
  }

  return (
    <>
      <Text>Signed in as {user.email}</Text>
      <Button title="Log out" onPress={logout} />
    </>
  );
}

• loginWithModal() — opens the built-in bottom-sheet flow (email → OTP → username if needed).
• sendCode / verifyCode — use directly if you build a custom UI instead of the modal.
• registerUsername — after first login when the account has no username.
• sessionRestoreError — set when a stored token could not be restored (e.g. network or 401).

Headless auth (no modal)

await sendCode("[email protected]");
const account = await verifyCode("[email protected]", "123456");

On success, token and user are updated and the token is persisted.

Manual API setup

If you do not use OfflineAppProvider, call before any API use:

import { setAppId, setAuthToken } from "@offline-protocol/id-react-native";

setAppId("app_xxxxxxxx");
setAuthToken(jwt);

Profiles and connections

import { useProfiles, useConnections } from "@offline-protocol/id-react-native";

const { profiles, profileCount, searchProfile } = useProfiles();
const { connections, addConnection, removeConnection } = useConnections();

OfflineID credential (optional)

Opt-in hook; does not run until you call it:

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

const { getCredential, getIssuerKey, loading, error } = useOfflineIdCredential();
const res = await getCredential();

Session restore without the provider

import { setAppId, fetchSessionFromToken } from "@offline-protocol/id-react-native";

setAppId("app_xxxxxxxx");
const user = await fetchSessionFromToken(storedJwt);

Related packages

• Proof of Location: @offline-protocol/pol — await pol.location.verify({ claim }) (recommended); pass useAuth().token via getSessionToken on init.

Contributing

See CONTRIBUTING.md for building and publishing the package from source.