@volr/react 0.1.1 → 0.1.3

package/README.md

@@ -88,6 +88,38 @@ function AdvancedComponent() {
 - **SSR Safe**: Works with Next.js and other SSR frameworks
 - **Call Builders**: `buildCall()` and `buildCalls()` utilities for easy transaction building
 
+## OAuth Handling
+
+The SDK provides a dedicated hook `useVolrAuthCallback` to simplify handling OAuth redirects. This is useful for custom login flows where you need to process the callback from social providers (Google, Twitter, Apple).
+
+```tsx
+import { useVolrAuthCallback } from '@volr/react';
+
+function AuthCallback() {
+  const { isLoading, error, isNewUser, user } = useVolrAuthCallback({
+    onSuccess: (user) => {
+      console.log('Logged in:', user);
+      // Navigate to dashboard or home
+    },
+    onError: (err) => {
+      console.error('Login failed:', err);
+      // Show error message or redirect to login
+    },
+  });
+
+  if (isLoading) return <div>Processing authentication...</div>;
+  if (error) return <div>Error: {error}</div>;
+  
+  return <div>Redirecting...</div>;
+}
+```
+
+This hook automatically:
+1. Parses URL parameters (`success`, `userId`, `isNewUser`, `error`)
+2. Refreshes the session to establish the authentication cookie
+3. Fetches the full user profile
+4. Updates the global `VolrProvider` context state
+
 ## Failure Semantics
 
 - Relay enforces strict failure-by-default:

package/dist/index.cjs

@@ -74,7 +74,7 @@ var safeStorage = {
   }
 };
 
-// node_modules/@volr/shared/src/constants/storage.ts
+// ../shared/src/constants/storage.ts
 var STORAGE_KEYS = {
   accessToken: "volr:accessToken",
   user: "volr:user",
@@ -350,6 +350,17 @@ var SessionSync = class {
   }
 };
 
+// src/config/backend.ts
+var DEFAULT_API_BASE_URL = "https://api.volr.io";
+function resolveApiBaseUrl(config) {
+  const anyConfig = config;
+  const override = anyConfig.apiBaseUrl;
+  if (override && typeof override === "string") {
+    return override.replace(/\/+$/, "");
+  }
+  return DEFAULT_API_BASE_URL;
+}
+
 // src/config/webauthn.ts
 var AUTHENTICATOR_SELECTION = {
   authenticatorAttachment: "platform",
@@ -649,18 +660,18 @@ function VolrProvider({ config, children }) {
       providerCountRef.current--;
     };
   }, []);
+  const apiBaseUrl = resolveApiBaseUrl(config);
   const client = react.useMemo(() => {
     if (!config.projectApiKey) {
       throw new Error(
         "VolrProvider requires config.projectApiKey. Please set VITE_PROJECT_API_KEY environment variable or provide projectApiKey in config."
       );
     }
-    const baseUrl = config.__devApiBaseUrl || config.apiBaseUrl;
     return new APIClient({
-      baseUrl,
+      baseUrl: apiBaseUrl,
       apiKey: config.projectApiKey
     });
-  }, [config.apiBaseUrl, config.projectApiKey]);
+  }, [apiBaseUrl, config.projectApiKey]);
   const [user, setUser] = react.useState(() => {
     if (typeof window === "undefined") return null;
     const userStr = safeStorage.getItem(STORAGE_KEYS.user);
@@ -1865,9 +1876,10 @@ function useVolrLogin() {
       credentialId: u.credentialId ?? void 0
     };
   }, []);
+  const apiBaseUrl = resolveApiBaseUrl(config);
   const api = react.useMemo(
-    () => createAxiosInstance(config.apiBaseUrl, config.projectApiKey),
-    [config.apiBaseUrl, config.projectApiKey]
+    () => createAxiosInstance(apiBaseUrl, config.projectApiKey),
+    [apiBaseUrl, config.projectApiKey]
   );
   const requestEmailCode = react.useCallback(
     async (email) => {
@@ -1935,11 +1947,11 @@ function useVolrLogin() {
   const handleSocialLogin = react.useCallback(
     async (provider) => {
       if (typeof window !== "undefined") {
-        const baseUrl = config.apiBaseUrl.replace(/\/+$/, "");
+        const baseUrl = apiBaseUrl.replace(/\/+$/, "");
         window.location.href = `${baseUrl}/auth/${provider}`;
       }
     },
-    [config.apiBaseUrl]
+    [apiBaseUrl]
   );
   const requestSiweNonce = react.useCallback(async () => {
     const response = await api.get("/auth/siwe/nonce");
@@ -2011,6 +2023,91 @@ function useVolrLogin() {
     handlePasskeyComplete
   };
 }
+function useVolrAuthCallback(options = {}) {
+  const { config, setUser } = useVolr();
+  const { refreshAccessToken, setAccessToken } = useInternalAuth();
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const [isNewUser, setIsNewUser] = react.useState(false);
+  const [user, setLocalUser] = react.useState(null);
+  const toVolrUser = react.useCallback((u) => {
+    return {
+      id: u.id,
+      email: u.email,
+      accountId: u.accountId ?? void 0,
+      evmAddress: u.evmAddress,
+      keyStorageType: u.keyStorageType ?? void 0,
+      signerType: u.signerType ?? void 0,
+      walletConnector: u.walletConnector ?? void 0,
+      lastWalletChainId: u.lastWalletChainId ?? void 0,
+      blobUrl: u.blobUrl ?? void 0,
+      prfInput: u.prfInput ?? void 0,
+      credentialId: u.credentialId ?? void 0
+    };
+  }, []);
+  const apiBaseUrl = resolveApiBaseUrl(config);
+  react.useEffect(() => {
+    const handleCallback = async () => {
+      if (typeof window === "undefined") return;
+      const searchParams = new URLSearchParams(window.location.search);
+      const success = searchParams.get("success");
+      const errorParam = searchParams.get("error");
+      const userId = searchParams.get("userId");
+      const isNew = searchParams.get("isNewUser") === "true";
+      if (errorParam) {
+        const errorMsg = `Authentication failed: ${errorParam}`;
+        setError(errorMsg);
+        setIsLoading(false);
+        options.onError?.(errorMsg);
+        return;
+      }
+      if (success !== "true" || !userId) {
+        const errorMsg = "Invalid callback parameters";
+        setError(errorMsg);
+        setIsLoading(false);
+        options.onError?.(errorMsg);
+        return;
+      }
+      try {
+        setIsNewUser(isNew);
+        await refreshAccessToken();
+        const api = createAxiosInstance(
+          apiBaseUrl,
+          config.projectApiKey
+        );
+        const userRes = await api.get(`/auth/onboarding/${userId}`);
+        if (!userRes.data?.ok) {
+          throw new Error("Failed to fetch user details");
+        }
+        const refreshRes = await api.post("/auth/refresh");
+        if (!refreshRes.data?.ok) {
+          throw new Error("Failed to refresh session");
+        }
+        const userData = refreshRes.data.data.user;
+        const accessToken = refreshRes.data.data.accessToken;
+        setAccessToken(accessToken);
+        const volrUser = toVolrUser(userData);
+        setUser(volrUser);
+        setLocalUser(volrUser);
+        setIsLoading(false);
+        options.onSuccess?.(volrUser);
+      } catch (err) {
+        console.error("Callback error:", err);
+        const errorMsg = err.message || "Failed to complete authentication";
+        setError(errorMsg);
+        setIsLoading(false);
+        options.onError?.(errorMsg);
+      }
+    };
+    handleCallback();
+  }, [apiBaseUrl, config.projectApiKey, refreshAccessToken, setAccessToken, setUser, toVolrUser]);
+  return {
+    isLoading,
+    error,
+    isNewUser,
+    user
+  };
+}
 async function jsonRpc(rpcUrl, method, params) {
   const payload = {
     jsonrpc: "2.0",
@@ -2304,6 +2401,7 @@ function usePasskeyEnrollment() {
   const [isEnrolling, setIsEnrolling] = react.useState(false);
   const [error, setError] = react.useState(null);
   const isEnrollingRef = react.useRef(false);
+  const apiBaseUrl = resolveApiBaseUrl(config);
   const enroll = react.useCallback(async () => {
     if (isEnrollingRef.current || isEnrolling) return;
     isEnrollingRef.current = true;
@@ -2319,13 +2417,15 @@ function usePasskeyEnrollment() {
       }
       const accessToken = client.getAccessToken();
       if (!accessToken) {
-        throw new Error("Access token is required for passkey enrollment. Please login first.");
+        throw new Error(
+          "Access token is required for passkey enrollment. Please login first."
+        );
       }
       const projectId = user.id;
       setStep("encrypting");
       const result = await enrollPasskey({
         client,
-        baseUrl: config.apiBaseUrl,
+        baseUrl: apiBaseUrl,
         apiKey: config.projectApiKey,
         userId: user.id,
         userEmail: user.email,
@@ -2370,15 +2470,7 @@ function usePasskeyEnrollment() {
       setIsEnrolling(false);
       isEnrollingRef.current = false;
     }
-  }, [
-    client,
-    config.apiBaseUrl,
-    config.projectApiKey,
-    user,
-    setProvider,
-    setUser,
-    isEnrolling
-  ]);
+  }, [apiBaseUrl, client, config.projectApiKey, user, setProvider, setUser, isEnrolling]);
   return {
     enroll,
     step,
@@ -2605,6 +2697,7 @@ exports.usePasskeyEnrollment = usePasskeyEnrollment;
 exports.usePrecheck = usePrecheck;
 exports.useRelay = useRelay;
 exports.useVolr = useVolr;
+exports.useVolrAuthCallback = useVolrAuthCallback;
 exports.useVolrLogin = useVolrLogin;
 exports.useVolrWallet = useVolrWallet;
 //# sourceMappingURL=index.cjs.map