@mentra/react 0.2.0

package/README.md

@@ -0,0 +1,179 @@
+# MentraOS React Auth Library (`@mentra/react`)
+
+This library simplifies authentication for React-based webviews running within the MentraOS manager application. It handles the extraction and verification of the `aos_signed_user_token` provided by the MentraOS system and makes user information available through a React Context and Hook.
+
+Check out the full [MentraOS React Documentation](https://docs.mentra.glass/react-webviews) for more details.
+
+## Prerequisites
+
+-   React 16.8+
+-   Your webview must be opened by the MentraOS manager application, which will append the `aos_signed_user_token` to the URL.
+
+## Installation
+
+```bash
+bun add @mentra/react
+# or
+npm install @mentra/react
+# or
+yarn add @mentra/react
+```
+
+## Usage
+
+### 1. Wrap your application with `MentraAuthProvider`
+
+In your main application file (e.g., `src/main.tsx` or `src/index.tsx`):
+
+```tsx
+// src/main.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { MentraAuthProvider } from '@mentra/react';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <MentraAuthProvider>
+      <App />
+    </MentraAuthProvider>
+  </React.StrictMode>
+);
+```
+
+### 2. Access authentication state using `useMentraAuth`
+
+In any component that needs user information:
+
+```tsx
+// src/MyComponent.tsx
+import React from 'react';
+import { useMentraAuth } from '@mentra/react';
+
+const MyComponent = () => {
+  const { userId, frontendToken, isLoading, error, isAuthenticated, logout } = useMentraAuth();
+
+  if (isLoading) {
+    return <p>Loading authentication...</p>;
+  }
+
+  if (error) {
+    return (
+      <div>
+        <p>Authentication Error: {error}</p>
+        <p>Please ensure you are opening this page from the MentraOS app.</p>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated || !userId) {
+    return <p>Not authenticated. Please open from the MentraOS manager app.</p>;
+  }
+
+  // You are authenticated!
+  return (
+    <div>
+      <h1>Welcome, MentraOS User!</h1>
+      <p>User ID: {userId}</p>
+      {/* frontendToken is a JWT. Displaying it directly is usually for debugging. */}
+      <p>Your Frontend Token (for backend calls): <small>{frontendToken ? frontendToken.substring(0, 20) + '...' : 'N/A'}</small></p>
+      <button onClick={logout}>Logout</button>
+      {/* Add your webview content here */}
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+## How It Works
+
+1.  When your webview is loaded by the MentraOS manager, it appends an `aos_signed_user_token` (a JWT) as a URL query parameter.
+2.  The `MentraAuthProvider` attempts to find this token.
+3.  It verifies the token's signature against the MentraOS Cloud public key and checks its claims (like issuer and expiration).
+4.  If valid, it extracts the `userId` (from the `sub` claim) and a `frontendToken` (another JWT from the payload).
+5.  These `userId` and `frontendToken` are then stored in `localStorage` and made available via the `useMentraAuth` hook.
+6.  If the token is not found in the URL (e.g., on a page refresh within the webview), the provider attempts to load the `userId` and `frontendToken` from `localStorage`.
+
+## Making Authenticated Calls to Your App Backend
+
+The `frontendToken` obtained from `useMentraAuth` is a JWT. You should send this token in the `Authorization` header as a Bearer token when making requests from your webview to **your app's backend API**.  The MentraOS SDK will automatically verify this token.
+
+```typescript
+// Example of an authenticated API call
+const { frontendToken } = useMentraAuth();
+
+async function fetchDataFromMyBackend(): Promise<void> {
+  if (!frontendToken) {
+    console.error("No frontend token available for backend call.");
+    return;
+  }
+
+  try {
+    const response = await fetch('https://your-app-backend.example.com/api/data', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${frontendToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Backend request failed: ${response.status}`);
+    }
+
+    const data = await response.json();
+    console.log('Data from backend:', data);
+    // Process data
+  } catch (error) {
+    console.error('Error fetching data from backend:', error);
+  }
+}
+```
+
+> **Note:**
+> If your app webview is hosted on a different domain or port than your backend API, make sure your backend's CORS (Cross-Origin Resource Sharing) policy allows requests from the webview's origin.
+> For example, if your backend is at `https://your-app-backend.example.com` and your webview is loaded from `https://some-other-frontend.com`, your backend must explicitly allow cross-origin requests from `https://some-other-frontend.com` (or use a wildcard for development, but restrict in production).
+>
+> **Example in the backend:**
+> ```typescript
+> import cors from 'cors';
+>
+> // Allow only your webview's origin in production
+> app.use(cors({
+>   origin: 'https://some-other-frontend.com', // Replace with your actual webview origin
+>   credentials: true, // If you use cookies
+> }));
+> ```
+>
+> Failing to set the correct CORS policy will result in browser errors when your webview tries to call your backend API.
+
+
+## TypeScript Support
+
+This library includes full TypeScript support. The `useMentraAuth` hook returns a typed object with the following interface:
+
+```typescript
+interface MentraAuthContextType {
+  userId: string | null;
+  frontendToken: string | null;
+  isLoading: boolean;
+  error: string | null;
+  isAuthenticated: boolean;
+  logout: () => void;
+}
+```
+
+## Troubleshooting
+
+*   **"Token validation failed" / "Token expired":**
+    *   Ensure the clock on the device running the MentraOS manager is synchronized.
+    *   The `gracePeriod` in `authCore.ts` (currently 120 seconds) can be adjusted if clock skew is a persistent issue, but large grace periods reduce security.
+    *   The MentraOS manager app should be providing a fresh token.
+*   **"MentraOS signed user token not found":**
+    *   Make sure your webview is being launched from the MentraOS manager app.
+    *   Verify the manager app is correctly appending `?aos_signed_user_token=...` to your webview URL.
+*   **`jsrsasign` errors:** Ensure `jsrsasign` is correctly installed and accessible in your frontend build.
+*   **Backend Authentication Issues:**
+    *   Ensure you're using `Authorization: Bearer ${frontendToken}` header format, not query parameters.
+    *   Verify your backend allows CORS requests from the domain of your frontend.

package/dist/AuthProvider.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { AuthState } from './lib/authCore';
+export interface MentraAuthContextType extends AuthState {
+    isLoading: boolean;
+    error: string | null;
+    logout: () => void;
+    isAuthenticated: boolean;
+}
+export declare const MentraAuthContext: React.Context<MentraAuthContextType | undefined>;
+export declare const MentraAuthProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuthProvider.d.ts.map

package/dist/AuthProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthProvider.d.ts","sourceRoot":"","sources":["../src/AuthProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAsC,SAAS,EAAe,MAAM,OAAO,CAAC;AAC1F,OAAO,EAAmC,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE5E,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,kDAA8D,CAAC;AAE7F,eAAO,MAAM,kBAAkB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAyCvE,CAAC"}

package/dist/AuthProvider.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// augmentos-react/src/AuthProvider.tsx
+import { createContext, useState, useEffect, useCallback } from 'react';
+import { initializeAuth, clearStoredAuth } from './lib/authCore';
+export const MentraAuthContext = createContext(undefined);
+export const MentraAuthProvider = ({ children }) => {
+    const [userId, setUserId] = useState(null);
+    const [frontendToken, setFrontendToken] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const loadAuth = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const auth = await initializeAuth();
+            setUserId(auth.userId);
+            setFrontendToken(auth.frontendToken);
+        }
+        catch (e) {
+            console.error("Augmentos Auth Initialization Error:", e);
+            setError(e.message || 'Unknown authentication error');
+            clearStoredAuth(); // Clear any potentially bad stored state
+            setUserId(null);
+            setFrontendToken(null);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        loadAuth();
+    }, [loadAuth]);
+    const logout = useCallback(() => {
+        clearStoredAuth();
+        setUserId(null);
+        setFrontendToken(null);
+    }, []);
+    const isAuthenticated = !!userId && !!frontendToken;
+    return (_jsx(MentraAuthContext.Provider, { value: { userId, frontendToken, isLoading, error, logout, isAuthenticated }, children: children }));
+};
+//# sourceMappingURL=AuthProvider.js.map

package/dist/AuthProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthProvider.js","sourceRoot":"","sources":["../src/AuthProvider.tsx"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,OAAc,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAa,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,eAAe,EAAa,MAAM,gBAAgB,CAAC;AAS5E,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAoC,SAAS,CAAC,CAAC;AAE7F,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IAC1E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACxE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAExD,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACtC,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,cAAc,EAAE,CAAC;YACpC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACvB,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACvC,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,sCAAsC,EAAE,CAAC,CAAC,CAAC;YACzD,QAAQ,CAAE,CAAW,CAAC,OAAO,IAAI,8BAA8B,CAAC,CAAC;YACjE,eAAe,EAAE,CAAC,CAAC,yCAAyC;YAC5D,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,eAAe,EAAE,CAAC;QAClB,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,aAAa,CAAC;IAEpD,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,YACpG,QAAQ,GACkB,CAC9B,CAAC;AACJ,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { MentraAuthProvider } from './AuthProvider';
+export { useMentraAuth } from './useMentraAuth';
+export type { AuthState } from './lib/authCore';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+// augmentos-react/src/index.ts
+export { MentraAuthProvider } from './AuthProvider';
+export { useMentraAuth } from './useMentraAuth';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/lib/authCore.d.ts

@@ -0,0 +1,12 @@
+export interface AuthState {
+    userId: string | null;
+    frontendToken: string | null;
+}
+/**
+ * Initializes authentication by checking for tokens in URL parameters or localStorage
+ * @returns Promise that resolves to the current authentication state
+ */
+export declare function initializeAuth(): Promise<AuthState>;
+export declare function getStoredAuth(): AuthState;
+export declare function clearStoredAuth(): void;
+//# sourceMappingURL=authCore.d.ts.map

package/dist/lib/authCore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"authCore.d.ts","sourceRoot":"","sources":["../../src/lib/authCore.ts"],"names":[],"mappings":"AAmCA,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AA0DD;;;GAGG;AACH,wBAAsB,cAAc,IAAI,OAAO,CAAC,SAAS,CAAC,CAkCzD;AAED,wBAAgB,aAAa,IAAI,SAAS,CAIzC;AAED,wBAAgB,eAAe,IAAI,IAAI,CAGtC"}

package/dist/lib/authCore.js

@@ -0,0 +1,111 @@
+// augmentos-react/src/lib/authCore.ts
+import { KEYUTIL, KJUR } from 'jsrsasign'; // Assuming jsrsasign is available
+// This should be the AugmentOS Cloud's public key for verifying aos_signed_user_token
+// It's a public key, so embedding it is generally fine.
+const userTokenPublicKeyPEM = `-----BEGIN PUBLIC KEY-----
+MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0Yt2RtNOdeKQxWMY0c84
+ADpY1Jy58YWZhaEgP2A5tBwFUKgy/TH9gQLWZjQ3dQ/6XXO8qq0kluoYFqM7ZDRF
+zJ0E4Yi0WQncioLRcCx4q8pDmqY9vPKgv6PruJdFWca0l0s3gZ3BqSeWum/C23xK
+FPHPwi8gvRdc6ALrkcHeciM+7NykU8c0EY8PSitNL+Tchti95kGu+j6APr5vNewi
+zRpQGOdqaLWe+ahHmtj6KtUZjm8o6lan4f/o08C6litizguZXuw2Nn/Kd9fFI1xF
+IVNJYMy9jgGaOi71+LpGw+vIpwAawp/7IvULDppvY3DdX5nt05P1+jvVJXPxMKzD
+TQIDAQAB
+-----END PUBLIC KEY-----`;
+const USER_ID_KEY = 'augmentos_userId';
+const FRONTEND_TOKEN_KEY = 'augmentos_frontendToken';
+/**
+ * Verifies and parses a signed user token using the AugmentOS Cloud public key
+ * @param signedUserToken - The JWT token to verify and parse
+ * @returns Promise that resolves to the parsed payload or null if invalid
+ */
+async function verifyAndParseToken(signedUserToken) {
+    try {
+        const publicKeyObj = KEYUTIL.getKey(userTokenPublicKeyPEM);
+        // verifyJWT will check signature, nbf, exp.
+        // It will also check 'iss' if provided in the options.
+        const isValid = KJUR.jws.JWS.verifyJWT(signedUserToken, publicKeyObj, {
+            alg: ['RS256'], // Specify expected algorithms
+            iss: ['https://prod.augmentos.cloud'], // Specify expected issuer
+            // jsrsasign's verifyJWT checks 'nbf' and 'exp' by default.
+            // Grace period for clock skew
+            gracePeriod: 120, // 2 minutes in seconds
+        });
+        if (!isValid) {
+            // Parse the token to get header and payload for debugging
+            const parsedJWT = KJUR.jws.JWS.parse(signedUserToken);
+            if (parsedJWT) {
+                console.warn('Token validation failed. Header:', parsedJWT.headerObj, 'Payload:', parsedJWT.payloadObj);
+                // Check expiration manually for more detailed logging if needed
+                const payload = parsedJWT.payloadObj;
+                if (payload && payload.exp) {
+                    const now = KJUR.jws.IntDate.get('now');
+                    if (payload.exp < now - 120) { // Check with grace period
+                        console.warn(`Token expired at ${new Date(payload.exp * 1000).toISOString()}`);
+                    }
+                }
+            }
+            return null;
+        }
+        const parsedJWT = KJUR.jws.JWS.parse(signedUserToken);
+        if (!parsedJWT || !parsedJWT.payloadObj) {
+            console.error('Failed to parse JWT payload.');
+            return null;
+        }
+        const payload = parsedJWT.payloadObj;
+        if (!payload.sub || !payload.frontendToken) {
+            console.error('Parsed payload missing sub (userId) or frontendToken.');
+            return null;
+        }
+        return payload;
+    }
+    catch (e) {
+        console.error('[verifyAndParseToken] Error verifying token:', e);
+        return null;
+    }
+}
+/**
+ * Initializes authentication by checking for tokens in URL parameters or localStorage
+ * @returns Promise that resolves to the current authentication state
+ */
+export async function initializeAuth() {
+    const params = new URLSearchParams(window.location.search);
+    const tokenFromUrl = params.get('aos_signed_user_token');
+    if (tokenFromUrl) {
+        const payload = await verifyAndParseToken(tokenFromUrl);
+        if (payload) {
+            localStorage.setItem(USER_ID_KEY, payload.sub);
+            localStorage.setItem(FRONTEND_TOKEN_KEY, payload.frontendToken);
+            // Remove the token from URL to prevent it from being bookmarked or shared.
+            params.delete('aos_signed_user_token');
+            window.history.replaceState({}, document.title, `${window.location.pathname}?${params.toString()}`);
+            return { userId: payload.sub, frontendToken: payload.frontendToken };
+        }
+        else {
+            // Token from URL was invalid, clear any stored ones
+            clearStoredAuth();
+            return { userId: null, frontendToken: null };
+        }
+    }
+    // If no token in URL, try to load from localStorage
+    const storedUserId = localStorage.getItem(USER_ID_KEY);
+    const storedFrontendToken = localStorage.getItem(FRONTEND_TOKEN_KEY);
+    if (storedUserId && storedFrontendToken) {
+        // For SPAs, if the token was already verified and its parts stored,
+        // we might trust these for the current session.
+        // A full re-verification of a stored *signedUserToken* would be more secure
+        // but adds complexity if the signed token isn't always re-provided.
+        // The current approach: verify once from URL, then use stored parts.
+        return { userId: storedUserId, frontendToken: storedFrontendToken };
+    }
+    return { userId: null, frontendToken: null };
+}
+export function getStoredAuth() {
+    const userId = localStorage.getItem(USER_ID_KEY);
+    const frontendToken = localStorage.getItem(FRONTEND_TOKEN_KEY);
+    return { userId, frontendToken };
+}
+export function clearStoredAuth() {
+    localStorage.removeItem(USER_ID_KEY);
+    localStorage.removeItem(FRONTEND_TOKEN_KEY);
+}
+//# sourceMappingURL=authCore.js.map

package/dist/lib/authCore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"authCore.js","sourceRoot":"","sources":["../../src/lib/authCore.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAU,MAAM,WAAW,CAAC,CAAC,kCAAkC;AAErF,sFAAsF;AACtF,wDAAwD;AACxD,MAAM,qBAAqB,GAAG;;;;;;;;yBAQL,CAAC;AAE1B,MAAM,WAAW,GAAG,kBAAkB,CAAC;AACvC,MAAM,kBAAkB,GAAG,yBAAyB,CAAC;AAwBrD;;;;GAIG;AACH,KAAK,UAAU,mBAAmB,CAAC,eAAuB;IACxD,IAAI,CAAC;QACH,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,qBAAqB,CAAW,CAAC;QAErE,4CAA4C;QAC5C,uDAAuD;QACvD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,eAAe,EAAE,YAAY,EAAE;YACpE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,8BAA8B;YAC9C,GAAG,EAAE,CAAC,8BAA8B,CAAC,EAAE,0BAA0B;YACjE,2DAA2D;YAC3D,8BAA8B;YAC9B,WAAW,EAAE,GAAG,EAAE,uBAAuB;SAC1C,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,0DAA0D;YAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;YACtD,IAAI,SAAS,EAAE,CAAC;gBACd,OAAO,CAAC,IAAI,CAAC,kCAAkC,EAAE,SAAS,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;gBAExG,gEAAgE;gBAChE,MAAM,OAAO,GAAG,SAAS,CAAC,UAA8B,CAAC;gBACzD,IAAI,OAAO,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;oBAC3B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;oBACxC,IAAI,OAAO,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC,0BAA0B;wBACvD,OAAO,CAAC,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;oBACjF,CAAC;gBACH,CAAC;YACH,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QACtD,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;YACxC,OAAO,CAAC,KAAK,CAAC,8BAA8B,CAAC,CAAC;YAC9C,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,OAAO,GAAG,SAAS,CAAC,UAAoC,CAAC;QAE/D,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;YAC3C,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC;YACvE,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,OAAO,CAAC;IAEjB,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,8CAA8C,EAAE,CAAC,CAAC,CAAC;QACjE,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,cAAc;IAClC,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC3D,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;IAEzD,IAAI,YAAY,EAAE,CAAC;QACjB,MAAM,OAAO,GAAG,MAAM,mBAAmB,CAAC,YAAY,CAAC,CAAC;QACxD,IAAI,OAAO,EAAE,CAAC;YACZ,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;YAC/C,YAAY,CAAC,OAAO,CAAC,kBAAkB,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;YAChE,2EAA2E;YAC3E,MAAM,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;YACvC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YACpG,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,CAAC,aAAa,EAAE,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,oDAAoD;YACpD,eAAe,EAAE,CAAC;YAClB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,oDAAoD;IACpD,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACvD,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAErE,IAAI,YAAY,IAAI,mBAAmB,EAAE,CAAC;QACxC,oEAAoE;QACpE,gDAAgD;QAChD,4EAA4E;QAC5E,oEAAoE;QACpE,qEAAqE;QACrE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAC;IACtE,CAAC;IAED,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACjD,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC/D,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IACrC,YAAY,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAC9C,CAAC"}

package/dist/useMentraAuth.d.ts

@@ -0,0 +1,16 @@
+import { MentraAuthContextType } from './AuthProvider';
+/**
+ * Custom hook to access the Augmentos authentication context.
+ *
+ * @returns {MentraAuthContextType} The authentication context containing user state,
+ * loading status, error information, and authentication methods.
+ *
+ * @throws {Error} When used outside of an MentraAuthProvider component.
+ *
+ * @example
+ * ```tsx
+ * const { userId, isAuthenticated, logout, isLoading } = useMentraAuth();
+ * ```
+ */
+export declare const useMentraAuth: () => MentraAuthContextType;
+//# sourceMappingURL=useMentraAuth.d.ts.map

package/dist/useMentraAuth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMentraAuth.d.ts","sourceRoot":"","sources":["../src/useMentraAuth.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqB,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAE1E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,QAAO,qBAMhC,CAAC"}

package/dist/useMentraAuth.js

@@ -0,0 +1,24 @@
+// augmentos-react/src/useMentraAuth.ts
+import { useContext } from 'react';
+import { MentraAuthContext } from './AuthProvider';
+/**
+ * Custom hook to access the Augmentos authentication context.
+ *
+ * @returns {MentraAuthContextType} The authentication context containing user state,
+ * loading status, error information, and authentication methods.
+ *
+ * @throws {Error} When used outside of an MentraAuthProvider component.
+ *
+ * @example
+ * ```tsx
+ * const { userId, isAuthenticated, logout, isLoading } = useMentraAuth();
+ * ```
+ */
+export const useMentraAuth = () => {
+    const context = useContext(MentraAuthContext);
+    if (context === undefined) {
+        throw new Error('useMentraAuth must be used within an MentraAuthProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=useMentraAuth.js.map

package/dist/useMentraAuth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMentraAuth.js","sourceRoot":"","sources":["../src/useMentraAuth.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,iBAAiB,EAAyB,MAAM,gBAAgB,CAAC;AAE1E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAA0B,EAAE;IACvD,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;IAC7E,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@mentra/react",
+  "version": "0.2.0",
+  "description": "React hooks and providers for MentraOS webviews, allowing you to create frontends for smartglasses apps.",
+  "author": "Mentra Labs",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && bun x tsc -p tsconfig.json",
+    "dev": "bun x tsc -p tsconfig.json --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "@types/jsrsasign": "^10.5.15",
+    "@types/react": "^19.1.6",
+    "jsrsasign": "^11.1.0",
+    "react": "^19.1.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "augmentos",
+    "react",
+    "mentra",
+    "mentraos"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}