@echoxyz/sonar-react 0.1.4 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @echoxyz/sonar-react
 
+## 0.2.0
+
+### Minor Changes
+
+- 77db07a: Change authenticated to bool, add ready state
+
+### Patch Changes
+
+- Updated dependencies [77db07a]
+    - @echoxyz/sonar-core@0.1.5
+
 ## 0.1.4
 
 ### Patch Changes

package/README.md

@@ -45,8 +45,8 @@ export function AppRoot({ children }: { children: React.ReactNode }) {
 import { useSonarAuth } from "@echoxyz/sonar-react";
 
 export function LoginButton() {
-    const { login, authenticated } = useSonarAuth();
-    if (authenticated()) {
+    const { login, authenticated, ready } = useSonarAuth();
+    if (!ready || authenticated) {
         return null;
     }
     return <button onClick={() => login()}>Sign in with Echo</button>;
@@ -86,11 +86,11 @@ import { useSonarAuth, useSonarClient } from "@echoxyz/sonar-react";
 import { EntityType } from "@echoxyz/sonar-core";
 
 export function Example() {
-    const { authenticated } = useSonarAuth();
+    const { authenticated, ready } = useSonarAuth();
     const client = useSonarClient();
 
     useEffect(() => {
-        if (!authenticated()) {
+        if (!ready || !authenticated) {
             return;
         }
 
@@ -122,7 +122,7 @@ export function Example() {
             });
             console.log(alloc);
         })();
-    }, [authenticated, client]);
+    }, [authenticated, client, ready]);
 
     return null;
 }
@@ -138,7 +138,7 @@ export function Example() {
         - `apiURL?: string` (default: `https://api.echo.xyz`) – API base URL.
         - `tokenStorageKey?: string` (default: `sonar:auth-token`) – Browser storage key for the access token.
 
-- `useSonarAuth()` → `{ authenticated, token?, login(), completeOAuth({ code, state }), logout() }`
+- `useSonarAuth()` → `{ authenticated, ready, token?, login(), completeOAuth({ code, state }), logout() }`
 
 - `useSonarClient()` → low-level `SonarClient` instance.
 

package/dist/index.cjs

@@ -33,13 +33,20 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var AuthContext = (0, import_react.createContext)(void 0);
 var ClientContext = (0, import_react.createContext)(void 0);
 function SonarProvider({ children, config }) {
+  const [authState, setAuthState] = (0, import_react.useState)({ token: void 0, ready: false });
   const client = (0, import_react.useMemo)(() => {
     return (0, import_sonar_core.createClient)({
       saleUUID: config.saleUUID,
       apiURL: config.apiURL,
-      tokenKey: config.tokenStorageKey
+      tokenKey: config.tokenStorageKey,
+      onTokenChange: (nextToken) => {
+        setAuthState({ token: nextToken ?? void 0, ready: true });
+      }
     });
   }, [config.apiURL, config.saleUUID, config.tokenStorageKey]);
+  (0, import_react.useEffect)(() => {
+    setAuthState({ token: client.getToken() ?? void 0, ready: true });
+  }, [client]);
   const login = (0, import_react.useCallback)(async () => {
     const { codeVerifier, codeChallenge, state } = await (0, import_sonar_core.generatePKCEParams)();
     if (typeof window === "undefined") {
@@ -80,16 +87,17 @@ function SonarProvider({ children, config }) {
   );
   const logout = (0, import_react.useCallback)(() => {
     client.clear();
-  }, []);
+  }, [client]);
   const authValue = (0, import_react.useMemo)(
     () => ({
       login,
       logout,
-      authenticated: () => Boolean(client.getToken()),
-      token: client.getToken() ?? void 0,
+      authenticated: Boolean(authState.token),
+      ready: authState.ready,
+      token: authState.token,
       completeOAuth
     }),
-    [client, login, completeOAuth, logout]
+    [authState, login, completeOAuth, logout]
   );
   const clientValue = (0, import_react.useMemo)(() => ({ client }), [client]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthContext.Provider, { value: authValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClientContext.Provider, { value: clientValue, children }) });

package/dist/index.d.cts

@@ -15,7 +15,8 @@ type SonarProviderConfig = {
     tokenStorageKey?: string;
 };
 type AuthContextValue = {
-    authenticated: () => boolean;
+    authenticated: boolean;
+    ready: boolean;
     token?: string;
     login: () => Promise<void>;
     completeOAuth: (args: {

package/dist/index.d.ts

@@ -15,7 +15,8 @@ type SonarProviderConfig = {
     tokenStorageKey?: string;
 };
 type AuthContextValue = {
-    authenticated: () => boolean;
+    authenticated: boolean;
+    ready: boolean;
     token?: string;
     login: () => Promise<void>;
     completeOAuth: (args: {

package/dist/index.js

@@ -1,17 +1,24 @@
 // src/react.tsx
 import { buildAuthorizationUrl, createClient, generatePKCEParams } from "@echoxyz/sonar-core";
-import { createContext, useCallback, useContext, useMemo } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var AuthContext = createContext(void 0);
 var ClientContext = createContext(void 0);
 function SonarProvider({ children, config }) {
+  const [authState, setAuthState] = useState({ token: void 0, ready: false });
   const client = useMemo(() => {
     return createClient({
       saleUUID: config.saleUUID,
       apiURL: config.apiURL,
-      tokenKey: config.tokenStorageKey
+      tokenKey: config.tokenStorageKey,
+      onTokenChange: (nextToken) => {
+        setAuthState({ token: nextToken ?? void 0, ready: true });
+      }
     });
   }, [config.apiURL, config.saleUUID, config.tokenStorageKey]);
+  useEffect(() => {
+    setAuthState({ token: client.getToken() ?? void 0, ready: true });
+  }, [client]);
   const login = useCallback(async () => {
     const { codeVerifier, codeChallenge, state } = await generatePKCEParams();
     if (typeof window === "undefined") {
@@ -52,16 +59,17 @@ function SonarProvider({ children, config }) {
   );
   const logout = useCallback(() => {
     client.clear();
-  }, []);
+  }, [client]);
   const authValue = useMemo(
     () => ({
       login,
       logout,
-      authenticated: () => Boolean(client.getToken()),
-      token: client.getToken() ?? void 0,
+      authenticated: Boolean(authState.token),
+      ready: authState.ready,
+      token: authState.token,
       completeOAuth
     }),
-    [client, login, completeOAuth, logout]
+    [authState, login, completeOAuth, logout]
   );
   const clientValue = useMemo(() => ({ client }), [client]);
   return /* @__PURE__ */ jsx(AuthContext.Provider, { value: authValue, children: /* @__PURE__ */ jsx(ClientContext.Provider, { value: clientValue, children }) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@echoxyz/sonar-react",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -16,12 +16,17 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@echoxyz/sonar-core": "0.1.4"
+    "@echoxyz/sonar-core": "0.1.5"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "jsdom": "^27.0.0",
+    "react": "^18",
+    "react-dom": "^18",
     "tsup": "^8.0.0",
-    "vitest": "^2.0.0",
-    "@types/react": "^18"
+    "vitest": "^2.0.0"
   },
   "repository": {
     "type": "git",