@volr/react 0.1.1 → 0.1.2

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

@@ -2011,6 +2011,90 @@ 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
+    };
+  }, []);
+  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(
+          config.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();
+  }, [config.apiBaseUrl, config.projectApiKey, refreshAccessToken, setAccessToken, setUser, toVolrUser]);
+  return {
+    isLoading,
+    error,
+    isNewUser,
+    user
+  };
+}
 async function jsonRpc(rpcUrl, method, params) {
   const payload = {
     jsonrpc: "2.0",
@@ -2605,6 +2689,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