@pylo/react 0.7.0 → 0.8.0

package/README.md

@@ -1,113 +1,11 @@
 # @pylo/react
 
-Type-safe Pylo SDK for React single-page apps. Hooks, a session provider, and a
-typed client, generated from your own Pylo schema.
+Type-safe Pylo SDK for React single-page apps, such as Vite.
 
-For Next.js use [`@pylo/nextjs`](../nextjs), which keeps tokens in httpOnly
-cookies. For Expo and React Native use [`@pylo/expo`](../expo).
+## Documentation
 
-## Install
+[https://docs.pyloapp.com/getting-started/quickstart-react](https://docs.pyloapp.com/getting-started/quickstart-react)
 
-```bash
-npm install @pylo/react @tanstack/react-query
-```
+## License
 
-## Generate types
-
-Add a `pylo.config.ts` at your project root, then run the generator. It writes
-`.pylo/index.ts` and registers the schema, so no `declare module` is needed.
-
-```bash
-npx pylo generate
-```
-
-## Set up
-
-Your app owns the QueryClient. `PyloProvider` goes inside it, because signing
-out clears the query cache.
-
-```tsx
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { PyloProvider } from "@pylo/react";
-
-const queryClient = new QueryClient();
-
-export function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <PyloProvider appId={import.meta.env.VITE_PYLO_APP_ID}>
-        <Routes />
-      </PyloProvider>
-    </QueryClientProvider>
-  );
-}
-```
-
-## Sign in
-
-```tsx
-import { usePyloAuth } from "@pylo/react";
-
-function SignIn() {
-  const { isLoading, isSignedIn, user, login, logout } = usePyloAuth();
-
-  if (isLoading) return <Spinner />;
-  if (isSignedIn) return <button onClick={() => logout()}>Sign out {user?.email}</button>;
-
-  return <button onClick={() => login(email, password)}>Sign in</button>;
-}
-```
-
-`isLoading` stays true until stored tokens have been read, so an already
-signed-in user never sees a login screen flash.
-
-## Query data
-
-```tsx
-import { createPyloHooks } from "@pylo/react";
-import type { PyloSchema } from "@pylo/types";
-
-const { usePyloList, usePyloUpsert } = createPyloHooks<PyloSchema>();
-
-function Contacts() {
-  const { data, isLoading } = usePyloList("contact", {
-    select: { id: true, name: true, company: { select: { name: true } } },
-  });
-
-  const upsert = usePyloUpsert("contact");
-
-  return <List rows={data} onRename={(id, name) => upsert.mutate({ id, name })} />;
-}
-```
-
-For imperative calls outside a query, `usePyloClient<PyloSchema>()` returns the
-same typed client the server SDK exposes.
-
-## Token storage
-
-Tokens live in `localStorage`, which any script running on your page can read.
-Refresh tokens rotate on every use, but a strong Content Security Policy is what
-actually protects them. If your app has a backend, keep the tokens there and
-proxy requests through it instead.
-
-The token is refreshed before it expires and once more if a request comes back
-unauthorized. Only a rejected refresh token ends the session: a transient server
-error leaves it intact, so a backend deploy does not sign everyone out.
-
-## Bringing your own auth
-
-Pass `getToken` instead, and the provider skips login, logout and refresh
-entirely.
-
-```tsx
-<PyloProvider getToken={() => auth.getAccessToken()}>
-```
-
-## Custom storage
-
-`PyloProvider` takes any `PyloStorage`: three async methods for get, set and
-remove.
-
-```ts
-import type { PyloStorage } from "@pylo/react";
-```
+[MIT](./LICENSE)

package/dist/chunk-3WSGP2SO.js

@@ -0,0 +1,483 @@
+// src/provider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore
+} from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { createPyloClient, resolveEndpoint } from "@pylo/core";
+import { ME_QUERY } from "@pylo/auth";
+
+// src/session/store.ts
+import {
+  graphqlRequest,
+  hasErrors,
+  extractErrorMessage,
+  isUnauthorizedError,
+  shouldRefreshToken,
+  safeRedirectPath,
+  LOGIN_MUTATION,
+  REDEEM_LOGIN_HANDOFF_MUTATION,
+  REFRESH_TOKEN_MUTATION
+} from "@pylo/auth";
+function createSessionStore(options) {
+  var _a;
+  const prefix = (_a = options.keyPrefix) != null ? _a : "pylo";
+  const AUTH_KEY = `${prefix}.auth_token`;
+  const REFRESH_KEY = `${prefix}.refresh_token`;
+  let state = { status: "loading", token: null };
+  let refreshToken = null;
+  let inFlight = null;
+  let ready = null;
+  const listeners = /* @__PURE__ */ new Set();
+  function setState(next) {
+    state = next;
+    for (const listener of listeners) listener();
+  }
+  async function persist(auth, refresh2) {
+    refreshToken = refresh2;
+    await options.storage.setItem(AUTH_KEY, auth);
+    await options.storage.setItem(REFRESH_KEY, refresh2);
+    setState({ status: "signedIn", token: auth });
+  }
+  async function signIn(auth, refresh2) {
+    var _a2;
+    await persist(auth, refresh2);
+    (_a2 = options.onSignIn) == null ? void 0 : _a2.call(options);
+  }
+  async function clear() {
+    var _a2;
+    refreshToken = null;
+    await options.storage.removeItem(AUTH_KEY);
+    await options.storage.removeItem(REFRESH_KEY);
+    setState({ status: "signedOut", token: null });
+    (_a2 = options.onSignOut) == null ? void 0 : _a2.call(options);
+  }
+  async function runRefresh() {
+    await init();
+    if (state.status !== "signedIn") return null;
+    if (!refreshToken) {
+      await clear();
+      return null;
+    }
+    const response = await graphqlRequest(
+      options.endpoint,
+      REFRESH_TOKEN_MUTATION,
+      { input: { refresh_token: refreshToken } }
+    );
+    if (hasErrors(response) || !response.data) {
+      if (isUnauthorizedError(response)) {
+        await clear();
+        return null;
+      }
+      return state.token;
+    }
+    const { auth_token, refresh_token } = response.data.refreshToken.data;
+    await persist(auth_token, refresh_token);
+    return auth_token;
+  }
+  function init() {
+    ready != null ? ready : ready = (async () => {
+      try {
+        const [auth, stored] = await Promise.all([
+          options.storage.getItem(AUTH_KEY),
+          options.storage.getItem(REFRESH_KEY)
+        ]);
+        refreshToken = stored;
+        setState(
+          auth ? { status: "signedIn", token: auth } : { status: "signedOut", token: null }
+        );
+      } catch {
+        refreshToken = null;
+        setState({ status: "signedOut", token: null });
+      }
+    })();
+    return ready;
+  }
+  function refresh() {
+    inFlight != null ? inFlight : inFlight = runRefresh().finally(() => {
+      inFlight = null;
+    });
+    return inFlight;
+  }
+  return {
+    getState: () => state,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => void listeners.delete(listener);
+    },
+    init,
+    async getToken() {
+      await init();
+      if (!state.token) return null;
+      if (shouldRefreshToken(state.token)) return refresh();
+      return state.token;
+    },
+    refresh,
+    async login(email, password) {
+      var _a2;
+      const response = await graphqlRequest(
+        options.endpoint,
+        LOGIN_MUTATION,
+        {
+          input: {
+            email,
+            password,
+            ...options.appId !== void 0 ? { pylo_app_id: options.appId } : {}
+          }
+        }
+      );
+      if (hasErrors(response)) {
+        return {
+          success: false,
+          error: {
+            code: "INVALID_CREDENTIALS",
+            message: (_a2 = extractErrorMessage(response.errors)) != null ? _a2 : "Login failed"
+          }
+        };
+      }
+      if (!response.data) {
+        return {
+          success: false,
+          error: { code: "SERVER_ERROR", message: "No data returned" }
+        };
+      }
+      const { auth_token, refresh_token } = response.data.login.data;
+      await signIn(auth_token, refresh_token);
+      return { success: true, authToken: auth_token, refreshToken: refresh_token };
+    },
+    async redeemHandoff(code, verifier) {
+      var _a2;
+      let response;
+      try {
+        response = await graphqlRequest(
+          options.endpoint,
+          REDEEM_LOGIN_HANDOFF_MUTATION,
+          { input: { code, handoff_verifier: verifier } }
+        );
+      } catch (error) {
+        return {
+          success: false,
+          error: {
+            code: "SIGN_IN_FAILED",
+            message: error instanceof Error ? error.message : "Sign-in failed"
+          }
+        };
+      }
+      if (hasErrors(response) || !response.data) {
+        return {
+          success: false,
+          error: {
+            code: "SIGN_IN_FAILED",
+            message: (_a2 = extractErrorMessage(response.errors)) != null ? _a2 : "Sign-in failed"
+          }
+        };
+      }
+      const { auth_token, refresh_token, redirect } = response.data.redeemLoginHandoff.data;
+      await signIn(auth_token, refresh_token);
+      const safe = safeRedirectPath(redirect);
+      return {
+        success: true,
+        authToken: auth_token,
+        refreshToken: refresh_token,
+        ...safe !== null ? { redirect: safe } : {}
+      };
+    },
+    logout: clear
+  };
+}
+
+// src/session/social.ts
+import {
+  buildSocialStartUrl,
+  createHandoffChallenge,
+  createHandoffVerifier,
+  parseHandoffCallback
+} from "@pylo/auth";
+function failed(code, message) {
+  return { success: false, error: { code, message } };
+}
+function createSocialSignIn(o) {
+  const verifierKey = `${o.keyPrefix}.handoff_verifier`;
+  function redeem(parsed, verifier) {
+    if (!parsed) return failed("SIGN_IN_FAILED", "No sign-in response in this URL");
+    if ("error" in parsed) return failed("SIGN_IN_FAILED", parsed.error);
+    if (!verifier) {
+      return failed("SIGN_IN_FAILED", "No sign-in was started in this browser session");
+    }
+    return o.store.redeemHandoff(parsed.code, verifier);
+  }
+  return {
+    async signInWith(provider, { returnUrl, redirect, invite }) {
+      let verifier;
+      let startUrl;
+      let finalUrl = null;
+      try {
+        verifier = createHandoffVerifier(o.crypto);
+        const challenge = await createHandoffChallenge(verifier, o.crypto);
+        startUrl = buildSocialStartUrl({
+          endpoint: o.endpoint,
+          provider,
+          appId: o.appId,
+          returnUrl,
+          challenge,
+          ...redirect !== void 0 ? { redirect } : {},
+          ...invite !== void 0 ? { invite } : {}
+        });
+        if (o.openAuthSession) finalUrl = await o.openAuthSession(startUrl, returnUrl);
+      } catch (error) {
+        return failed(
+          "SIGN_IN_FAILED",
+          error instanceof Error ? error.message : "Sign-in failed"
+        );
+      }
+      if (o.openAuthSession) {
+        if (finalUrl === null) return failed("CANCELLED", "Sign-in was cancelled");
+        return redeem(parseHandoffCallback(finalUrl), verifier);
+      }
+      sessionStorage.setItem(verifierKey, verifier);
+      location.assign(startUrl);
+      return new Promise(() => {
+      });
+    },
+    async completeSignIn(url = location.href) {
+      const verifier = sessionStorage.getItem(verifierKey);
+      sessionStorage.removeItem(verifierKey);
+      const parsed = parseHandoffCallback(url);
+      if (parsed) {
+        const clean = new URL(url);
+        clean.searchParams.delete("code");
+        clean.searchParams.delete("error");
+        history.replaceState(history.state, "", clean.toString());
+      }
+      return redeem(parsed, verifier);
+    }
+  };
+}
+
+// src/session/storage.ts
+function createMemoryStorage() {
+  const store = /* @__PURE__ */ new Map();
+  return {
+    getItem: async (key) => {
+      var _a;
+      return (_a = store.get(key)) != null ? _a : null;
+    },
+    setItem: async (key, value) => void store.set(key, value),
+    removeItem: async (key) => void store.delete(key)
+  };
+}
+function createLocalStorageAdapter() {
+  let web;
+  try {
+    web = globalThis.localStorage;
+  } catch {
+    web = void 0;
+  }
+  if (!web) return createMemoryStorage();
+  const fallback = createMemoryStorage();
+  return {
+    getItem: async (key) => {
+      try {
+        const value = web.getItem(key);
+        if (value !== null) return value;
+      } catch {
+      }
+      return fallback.getItem(key);
+    },
+    setItem: async (key, value) => {
+      try {
+        web.setItem(key, value);
+      } catch {
+        await fallback.setItem(key, value);
+      }
+    },
+    removeItem: async (key) => {
+      try {
+        web.removeItem(key);
+      } catch {
+      }
+      await fallback.removeItem(key);
+    }
+  };
+}
+
+// src/transport.ts
+import {
+  graphqlRequest as graphqlRequest2,
+  hasErrors as hasErrors2,
+  extractErrorMessage as extractErrorMessage2,
+  isUnauthorizedError as isUnauthorizedError2
+} from "@pylo/auth";
+import { PyloError } from "@pylo/core";
+function createDirectTransport(options) {
+  function send(query, variables, headers, token) {
+    return graphqlRequest2(
+      options.endpoint,
+      query,
+      variables,
+      {
+        ...token !== null ? { token } : {},
+        ...headers !== void 0 ? { headers } : {}
+      }
+    );
+  }
+  return async (query, variables, headers) => {
+    var _a;
+    let response = await send(query, variables, headers, await options.getToken());
+    if (isUnauthorizedError2(response) && options.onUnauthorized) {
+      const token = await options.onUnauthorized();
+      if (token !== null) {
+        response = await send(query, variables, headers, token);
+      }
+    }
+    if (hasErrors2(response)) {
+      throw new PyloError(
+        (_a = extractErrorMessage2(response.errors)) != null ? _a : "GraphQL request failed",
+        response.errors
+      );
+    }
+    if (!response.data) {
+      throw new PyloError("No data returned from GraphQL request");
+    }
+    return response.data;
+  };
+}
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
+var PyloContext = createContext(null);
+function usePyloContext() {
+  const value = useContext(PyloContext);
+  if (!value) {
+    throw new Error("usePylo* must be used inside <PyloProvider>");
+  }
+  return value;
+}
+var SIGNED_OUT = { status: "signedOut", token: null };
+var NO_OP = () => () => {
+};
+function PyloProvider(props) {
+  var _a, _b;
+  const queryClient = useQueryClient();
+  const endpoint = resolveEndpoint(props.endpoint);
+  const storeRef = useRef(null);
+  const socialRef = useRef(null);
+  const openAuthSessionRef = useRef(props.openAuthSession);
+  openAuthSessionRef.current = props.openAuthSession;
+  if (storeRef.current === null && !props.getToken) {
+    storeRef.current = createSessionStore({
+      endpoint,
+      storage: (_a = props.storage) != null ? _a : createLocalStorageAdapter(),
+      ...props.appId !== void 0 ? { appId: props.appId } : {},
+      ...props.keyPrefix !== void 0 ? { keyPrefix: props.keyPrefix } : {},
+      onSignOut: () => queryClient.clear(),
+      onSignIn: () => void queryClient.invalidateQueries({ queryKey: ["pylo"] })
+    });
+    if (props.appId !== void 0) {
+      socialRef.current = createSocialSignIn({
+        endpoint,
+        appId: props.appId,
+        keyPrefix: (_b = props.keyPrefix) != null ? _b : "pylo",
+        store: storeRef.current,
+        ...props.openAuthSession ? {
+          openAuthSession: (url, returnUrl) => openAuthSessionRef.current(url, returnUrl)
+        } : {},
+        ...props.handoffCrypto ? { crypto: props.handoffCrypto } : {}
+      });
+    }
+  }
+  const store = storeRef.current;
+  const social = socialRef.current;
+  const state = useSyncExternalStore(
+    store ? store.subscribe : NO_OP,
+    store ? store.getState : () => SIGNED_OUT,
+    store ? store.getState : () => SIGNED_OUT
+  );
+  useEffect(() => {
+    void (store == null ? void 0 : store.init());
+  }, [store]);
+  const getTokenProp = props.getToken;
+  const getTokenRef = useRef(getTokenProp);
+  getTokenRef.current = getTokenProp;
+  const isEscapeHatch = getTokenProp !== void 0;
+  const value = useMemo(() => {
+    const getToken = isEscapeHatch ? () => getTokenRef.current() : () => store.getToken();
+    const transport = createDirectTransport({
+      endpoint,
+      getToken,
+      ...store ? { onUnauthorized: () => store.refresh() } : {}
+    });
+    return { transport, endpoint, state, store, social, getToken };
+  }, [endpoint, state, store, social, isEscapeHatch]);
+  return /* @__PURE__ */ jsx(PyloContext.Provider, { value, children: props.children });
+}
+function usePyloTransport() {
+  return usePyloContext().transport;
+}
+function usePyloClient() {
+  const { endpoint, getToken } = usePyloContext();
+  return useMemo(
+    () => createPyloClient({
+      endpoint,
+      auth: async () => {
+        const token = await getToken();
+        return token !== null ? { token } : {};
+      }
+    }),
+    [endpoint, getToken]
+  );
+}
+function usePyloAuth() {
+  const { state, store, social, transport, getToken } = usePyloContext();
+  const isSignedIn = state.status === "signedIn";
+  const me = useQuery({
+    queryKey: ["pylo", "me"],
+    queryFn: async () => {
+      const data = await transport(ME_QUERY, {});
+      return data.me.current_user.data;
+    },
+    enabled: isSignedIn
+  });
+  return {
+    isLoading: state.status === "loading" || isSignedIn && me.isLoading,
+    isSignedIn,
+    user: me.data,
+    login: async (email, password) => {
+      if (!store) {
+        throw new Error("login is unavailable when PyloProvider is given getToken");
+      }
+      return store.login(email, password);
+    },
+    logout: async () => {
+      if (!store) {
+        throw new Error("logout is unavailable when PyloProvider is given getToken");
+      }
+      await store.logout();
+    },
+    signInWith: async (provider, options) => requireSocial("signInWith").signInWith(provider, options),
+    completeSignIn: async (url) => requireSocial("completeSignIn").completeSignIn(url),
+    getToken
+  };
+  function requireSocial(method) {
+    if (!store) {
+      throw new Error(`${method} is unavailable when PyloProvider is given getToken`);
+    }
+    if (!social) throw new Error(`${method} requires PyloProvider's appId`);
+    return social;
+  }
+}
+
+export {
+  createSessionStore,
+  createMemoryStorage,
+  createLocalStorageAdapter,
+  createDirectTransport,
+  PyloProvider,
+  usePyloTransport,
+  usePyloClient,
+  usePyloAuth
+};

package/dist/{chunk-VUY6OTMP.js → chunk-A6UGLYBT.js}

@@ -1,6 +1,6 @@
 import {
   usePyloTransport
-} from "./chunk-SBMMJYJT.js";
+} from "./chunk-XCHM5XBY.js";
 
 // src/hooks.ts
 import { useCallback, useRef, useState } from "react";