@mrbd/auth

Client helpers for adding MRBD-hosted auth to Meta Ray-Ban Display web apps.

This package is the public SDK only. It talks to MRBD-owned auth services over HTTPS plus SSE or WebSocket. It does not contain Supabase credentials, admin logic, token minting, OTP verification internals, or private infrastructure code.

Install

npm install @mrbd/auth

Usage

import { createMrbdAuth } from "@mrbd/auth";

const auth = createMrbdAuth({
  appId: "com.example.my-app",
});

const request = await auth.startSignIn({
  onEvent: (event) => {
    if (event.type === "email_submitted") {
      void auth.sendOtp(event.email);
    }
  },
});

console.log(`Go to ${request.verificationUrl} and enter ${request.userCode}`);

After the email has been submitted on the phone or computer, send the OTP from the glasses browser:

const session = await auth.verifyOtp("123456");

The resulting session belongs to the glasses browser. The phone or computer is only used as a keyboard proxy for email entry.

Direct email sign-in (web and phone)

On a surface that has its own keyboard (a phone web app or desktop companion), skip device pairing and run a straight email-OTP flow:

await auth.sendEmailOtp("[email protected]");
// collect the 6-digit code the user received by email
const session = await auth.verifyEmailOtp("123456");

The session is bound to the same appId and the same MRBD user as the glasses, so signing in on the phone shares one identity (and one set of managed data) with the glasses app.

Convenience flow

Apps that want to orchestrate the default flow can use signInWithCode():

const session = await auth.signInWithCode({
  onRequest: (request) => {
    showCodeOnGlasses(request.verificationUrl, request.userCode);
  },
  getOtp: async () => {
    return showOtpNumpadOnGlasses();
  },
});

React

@mrbd/auth/react ships drop-in components for React apps (React 18+ peer dependency). Wrap your app in MrbdAuthProvider and gate protected UI with MrbdAuthGate:

import { MrbdAuthProvider, MrbdAuthGate, useMrbdAuth } from "@mrbd/auth/react";

function App() {
  return (
    <MrbdAuthProvider appId="com.example.my-app">
      <MrbdAuthGate>
        <SignedInApp />
      </MrbdAuthGate>
    </MrbdAuthProvider>
  );
}

function SignedInApp() {
  const { session, signOut } = useMrbdAuth();
  return <button onClick={() => void signOut()}>Sign out {session?.userId}</button>;
}

MrbdAuthGate renders the built-in MrbdSignInScreen when signed out. That screen shows the verification URL and code, then collects the email OTP with the 600x600, D-pad-navigable MrbdOtpNumpad. On keyboard surfaces (web/phone), pass MrbdEmailSignInScreen as the gate's fallback to collect the email and code directly. All of these (MrbdSignInScreen, MrbdEmailSignInScreen, MrbdOtpNumpad, MrbdAuthGate) can also be used directly, and useMrbdAuth() exposes the underlying client for custom flows.

Sessions

By default, sessions are stored in localStorage under an app-specific key. Pass storage: null to disable persistence or provide a custom storage object for tests.

const session = await auth.getSession();
const refreshed = await auth.refreshSession();
await auth.signOut();

Security model

• The glasses app never talks directly to Supabase.
• The visible pairing code is not treated as the only secret.
• The SDK generates a high-entropy device secret and sends a SHA-256 challenge to the backend.
• Sensitive session credentials are fetched over HTTPS, not delivered over realtime events.
• The private MRBD auth backend owns pairing, rate limits, app registration, Supabase OTP, token exchange, and audit logging.