@mentra/react 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -13
- package/dist/AuthProvider.d.ts +3 -3
- package/dist/AuthProvider.d.ts.map +1 -1
- package/dist/AuthProvider.js +3 -3
- package/dist/AuthProvider.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/useMentraAuth.d.ts +16 -0
- package/dist/useMentraAuth.d.ts.map +1 -0
- package/dist/useMentraAuth.js +24 -0
- package/dist/useMentraAuth.js.map +1 -0
- package/package.json +1 -1
- package/dist/useMentraosAuth.d.ts +0 -16
- package/dist/useMentraosAuth.d.ts.map +0 -1
- package/dist/useMentraosAuth.js +0 -24
- package/dist/useMentraosAuth.js.map +0 -1
package/README.md
CHANGED
|
@@ -21,7 +21,7 @@ yarn add @mentra/react
|
|
|
21
21
|
|
|
22
22
|
## Usage
|
|
23
23
|
|
|
24
|
-
### 1. Wrap your application with `
|
|
24
|
+
### 1. Wrap your application with `MentraAuthProvider`
|
|
25
25
|
|
|
26
26
|
In your main application file (e.g., `src/main.tsx` or `src/index.tsx`):
|
|
27
27
|
|
|
@@ -30,28 +30,28 @@ In your main application file (e.g., `src/main.tsx` or `src/index.tsx`):
|
|
|
30
30
|
import React from 'react';
|
|
31
31
|
import ReactDOM from 'react-dom/client';
|
|
32
32
|
import App from './App';
|
|
33
|
-
import {
|
|
33
|
+
import { MentraAuthProvider } from '@mentra/react';
|
|
34
34
|
|
|
35
35
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
36
36
|
<React.StrictMode>
|
|
37
|
-
<
|
|
37
|
+
<MentraAuthProvider>
|
|
38
38
|
<App />
|
|
39
|
-
</
|
|
39
|
+
</MentraAuthProvider>
|
|
40
40
|
</React.StrictMode>
|
|
41
41
|
);
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
### 2. Access authentication state using `
|
|
44
|
+
### 2. Access authentication state using `UseMentraAuth`
|
|
45
45
|
|
|
46
46
|
In any component that needs user information:
|
|
47
47
|
|
|
48
48
|
```tsx
|
|
49
49
|
// src/MyComponent.tsx
|
|
50
50
|
import React from 'react';
|
|
51
|
-
import {
|
|
51
|
+
import { UseMentraAuth } from '@mentra/react';
|
|
52
52
|
|
|
53
53
|
const MyComponent = () => {
|
|
54
|
-
const { userId, frontendToken, isLoading, error, isAuthenticated, logout } =
|
|
54
|
+
const { userId, frontendToken, isLoading, error, isAuthenticated, logout } = UseMentraAuth();
|
|
55
55
|
|
|
56
56
|
if (isLoading) {
|
|
57
57
|
return <p>Loading authentication...</p>;
|
|
@@ -89,19 +89,19 @@ export default MyComponent;
|
|
|
89
89
|
## How It Works
|
|
90
90
|
|
|
91
91
|
1. When your webview is loaded by the MentraOS manager, it appends an `aos_signed_user_token` (a JWT) as a URL query parameter.
|
|
92
|
-
2. The `
|
|
92
|
+
2. The `MentraAuthProvider` attempts to find this token.
|
|
93
93
|
3. It verifies the token's signature against the MentraOS Cloud public key and checks its claims (like issuer and expiration).
|
|
94
94
|
4. If valid, it extracts the `userId` (from the `sub` claim) and a `frontendToken` (another JWT from the payload).
|
|
95
|
-
5. These `userId` and `frontendToken` are then stored in `localStorage` and made available via the `
|
|
95
|
+
5. These `userId` and `frontendToken` are then stored in `localStorage` and made available via the `UseMentraAuth` hook.
|
|
96
96
|
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`.
|
|
97
97
|
|
|
98
98
|
## Making Authenticated Calls to Your App Backend
|
|
99
99
|
|
|
100
|
-
The `frontendToken` obtained from `
|
|
100
|
+
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.
|
|
101
101
|
|
|
102
102
|
```typescript
|
|
103
103
|
// Example of an authenticated API call
|
|
104
|
-
const { frontendToken } =
|
|
104
|
+
const { frontendToken } = UseMentraAuth();
|
|
105
105
|
|
|
106
106
|
async function fetchDataFromMyBackend(): Promise<void> {
|
|
107
107
|
if (!frontendToken) {
|
|
@@ -151,10 +151,10 @@ async function fetchDataFromMyBackend(): Promise<void> {
|
|
|
151
151
|
|
|
152
152
|
## TypeScript Support
|
|
153
153
|
|
|
154
|
-
This library includes full TypeScript support. The `
|
|
154
|
+
This library includes full TypeScript support. The `UseMentraAuth` hook returns a typed object with the following interface:
|
|
155
155
|
|
|
156
156
|
```typescript
|
|
157
|
-
interface
|
|
157
|
+
interface MentraAuthContextType {
|
|
158
158
|
userId: string | null;
|
|
159
159
|
frontendToken: string | null;
|
|
160
160
|
isLoading: boolean;
|
package/dist/AuthProvider.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
2
|
import { AuthState } from './lib/authCore';
|
|
3
|
-
export interface
|
|
3
|
+
export interface MentraAuthContextType extends AuthState {
|
|
4
4
|
isLoading: boolean;
|
|
5
5
|
error: string | null;
|
|
6
6
|
logout: () => void;
|
|
7
7
|
isAuthenticated: boolean;
|
|
8
8
|
}
|
|
9
|
-
export declare const
|
|
10
|
-
export declare const
|
|
9
|
+
export declare const MentraAuthContext: React.Context<MentraAuthContextType | undefined>;
|
|
10
|
+
export declare const MentraAuthProvider: ({ children }: {
|
|
11
11
|
children: ReactNode;
|
|
12
12
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
//# sourceMappingURL=AuthProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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
CHANGED
|
@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// react-sdk/src/AuthProvider.tsx
|
|
3
3
|
import { createContext, useState, useEffect, useCallback } from 'react';
|
|
4
4
|
import { initializeAuth, clearStoredAuth } from './lib/authCore';
|
|
5
|
-
export const
|
|
6
|
-
export const
|
|
5
|
+
export const MentraAuthContext = createContext(undefined);
|
|
6
|
+
export const MentraAuthProvider = ({ children }) => {
|
|
7
7
|
const [userId, setUserId] = useState(null);
|
|
8
8
|
const [frontendToken, setFrontendToken] = useState(null);
|
|
9
9
|
const [isLoading, setIsLoading] = useState(true);
|
|
@@ -36,6 +36,6 @@ export const MentraosAuthProvider = ({ children }) => {
|
|
|
36
36
|
setFrontendToken(null);
|
|
37
37
|
}, []);
|
|
38
38
|
const isAuthenticated = !!userId && !!frontendToken;
|
|
39
|
-
return (_jsx(
|
|
39
|
+
return (_jsx(MentraAuthContext.Provider, { value: { userId, frontendToken, isLoading, error, logout, isAuthenticated }, children: children }));
|
|
40
40
|
};
|
|
41
41
|
//# sourceMappingURL=AuthProvider.js.map
|
package/dist/AuthProvider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthProvider.js","sourceRoot":"","sources":["../src/AuthProvider.tsx"],"names":[],"mappings":";AAAA,iCAAiC;AACjC,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,
|
|
1
|
+
{"version":3,"file":"AuthProvider.js","sourceRoot":"","sources":["../src/AuthProvider.tsx"],"names":[],"mappings":";AAAA,iCAAiC;AACjC,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,qCAAqC,EAAE,CAAC,CAAC,CAAC;YACxD,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
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
1
|
+
export { MentraAuthProvider } from './AuthProvider';
|
|
2
|
+
export { UseMentraAuth } from './useMentraAuth';
|
|
3
3
|
export type { AuthState } from './lib/authCore';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,
|
|
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
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
// react-sdk/src/index.ts
|
|
2
|
-
export {
|
|
3
|
-
export {
|
|
2
|
+
export { MentraAuthProvider } from './AuthProvider';
|
|
3
|
+
export { UseMentraAuth } from './useMentraAuth';
|
|
4
4
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { MentraAuthContextType } from './AuthProvider';
|
|
2
|
+
/**
|
|
3
|
+
* Custom hook to access the MentraOS authentication context.
|
|
4
|
+
*
|
|
5
|
+
* @returns {MentraAuthContextType} The authentication context containing user state,
|
|
6
|
+
* loading status, error information, and authentication methods.
|
|
7
|
+
*
|
|
8
|
+
* @throws {Error} When used outside of an MentraAuthProvider component.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const { userId, isAuthenticated, logout, isLoading } = UseMentraAuth();
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export declare const UseMentraAuth: () => MentraAuthContextType;
|
|
16
|
+
//# sourceMappingURL=useMentraAuth.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// react-sdk/src/UseMentraAuth.ts
|
|
2
|
+
import { useContext } from 'react';
|
|
3
|
+
import { MentraAuthContext } from './AuthProvider';
|
|
4
|
+
/**
|
|
5
|
+
* Custom hook to access the MentraOS authentication context.
|
|
6
|
+
*
|
|
7
|
+
* @returns {MentraAuthContextType} The authentication context containing user state,
|
|
8
|
+
* loading status, error information, and authentication methods.
|
|
9
|
+
*
|
|
10
|
+
* @throws {Error} When used outside of an MentraAuthProvider component.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* const { userId, isAuthenticated, logout, isLoading } = UseMentraAuth();
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export const UseMentraAuth = () => {
|
|
18
|
+
const context = useContext(MentraAuthContext);
|
|
19
|
+
if (context === undefined) {
|
|
20
|
+
throw new Error('UseMentraAuth must be used within an MentraAuthProvider');
|
|
21
|
+
}
|
|
22
|
+
return context;
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=useMentraAuth.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMentraAuth.js","sourceRoot":"","sources":["../src/useMentraAuth.ts"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,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
CHANGED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { MentraosAuthContextType } from './AuthProvider';
|
|
2
|
-
/**
|
|
3
|
-
* Custom hook to access the MentraOS authentication context.
|
|
4
|
-
*
|
|
5
|
-
* @returns {MentraosAuthContextType} The authentication context containing user state,
|
|
6
|
-
* loading status, error information, and authentication methods.
|
|
7
|
-
*
|
|
8
|
-
* @throws {Error} When used outside of an MentraosAuthProvider component.
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```tsx
|
|
12
|
-
* const { userId, isAuthenticated, logout, isLoading } = useMentraosAuth();
|
|
13
|
-
* ```
|
|
14
|
-
*/
|
|
15
|
-
export declare const useMentraosAuth: () => MentraosAuthContextType;
|
|
16
|
-
//# sourceMappingURL=useMentraosAuth.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useMentraosAuth.d.ts","sourceRoot":"","sources":["../src/useMentraosAuth.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuB,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAE9E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,QAAO,uBAMlC,CAAC"}
|
package/dist/useMentraosAuth.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
// react-sdk/src/useMentraosAuth.ts
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
import { MentraosAuthContext } from './AuthProvider';
|
|
4
|
-
/**
|
|
5
|
-
* Custom hook to access the MentraOS authentication context.
|
|
6
|
-
*
|
|
7
|
-
* @returns {MentraosAuthContextType} The authentication context containing user state,
|
|
8
|
-
* loading status, error information, and authentication methods.
|
|
9
|
-
*
|
|
10
|
-
* @throws {Error} When used outside of an MentraosAuthProvider component.
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```tsx
|
|
14
|
-
* const { userId, isAuthenticated, logout, isLoading } = useMentraosAuth();
|
|
15
|
-
* ```
|
|
16
|
-
*/
|
|
17
|
-
export const useMentraosAuth = () => {
|
|
18
|
-
const context = useContext(MentraosAuthContext);
|
|
19
|
-
if (context === undefined) {
|
|
20
|
-
throw new Error('useMentraosAuth must be used within an MentraosAuthProvider');
|
|
21
|
-
}
|
|
22
|
-
return context;
|
|
23
|
-
};
|
|
24
|
-
//# sourceMappingURL=useMentraosAuth.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useMentraosAuth.js","sourceRoot":"","sources":["../src/useMentraosAuth.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAA2B,MAAM,gBAAgB,CAAC;AAE9E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAA4B,EAAE;IAC3D,MAAM,OAAO,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAChD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,6DAA6D,CAAC,CAAC;IACjF,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
|