@b3dotfun/sdk 0.1.69-alpha.8 → 0.1.69-test.0

package/src/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.tsx

@@ -0,0 +1,308 @@
+import { Button, Input, LoginStepContainer, useB3Config } from "@b3dotfun/sdk/global-account/react";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useState } from "react";
+import {
+  EmailVerificationRequiredError,
+  type BetterAuthSocialProvider,
+  useBetterAuth,
+} from "../../../hooks/useBetterAuth";
+import { AuthButton } from "../components/AuthButton";
+
+const debug = debugB3React("LoginStepBetterAuth");
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const SOCIAL_PROVIDERS: { id: BetterAuthSocialProvider; label: string }[] = [
+  { id: "google", label: "Google" },
+  { id: "github", label: "GitHub" },
+  { id: "discord", label: "Discord" },
+  { id: "microsoft", label: "Microsoft" },
+  { id: "slack", label: "Slack" },
+];
+
+interface LoginStepBetterAuthProps {
+  onSuccess?: () => void;
+  onError?: (error: Error) => Promise<void>;
+}
+
+export function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthProps) {
+  const { partnerId } = useB3Config();
+  const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
+
+  const [mode, setMode] = useState<"sign-in" | "sign-up" | "forgot-password">("sign-in");
+  const [showEmailForm, setShowEmailForm] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [resetEmailSent, setResetEmailSent] = useState(false);
+  const [verificationSent, setVerificationSent] = useState(false);
+
+  const handleEmailSubmit = async () => {
+    const normalizedEmail = email.trim().toLowerCase();
+
+    if (!EMAIL_REGEX.test(normalizedEmail)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    if (!password) {
+      setError("Please enter a password");
+      return;
+    }
+
+    if (mode === "sign-up" && !name.trim()) {
+      setError("Please enter your name");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      if (mode === "sign-up") {
+        debug("Signing up", { email: normalizedEmail, name: name.trim() });
+        await signUpWithEmail(normalizedEmail, password, name.trim());
+      } else {
+        debug("Signing in", { email: normalizedEmail });
+        await signInWithEmail(normalizedEmail, password);
+      }
+
+      debug("Auth successful");
+      onSuccess?.();
+    } catch (err) {
+      if (err instanceof EmailVerificationRequiredError) {
+        setVerificationSent(true);
+        setError(null);
+      } else {
+        const message = err instanceof Error ? err.message : "Authentication failed";
+        setError(message);
+        await onError?.(err as Error);
+      }
+      debug("Auth failed", err);
+    } finally {
+      setPassword("");
+      setIsLoading(false);
+    }
+  };
+
+  const handleForgotPassword = async () => {
+    const normalizedEmail = email.trim().toLowerCase();
+
+    if (!EMAIL_REGEX.test(normalizedEmail)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+      await requestPasswordReset(normalizedEmail);
+      setResetEmailSent(true);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to send reset email";
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSocialSignIn = async (provider: BetterAuthSocialProvider) => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      await signInWithSocial(provider);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : `${provider} sign in failed`;
+      setError(message);
+      await onError?.(err as Error);
+      setIsLoading(false);
+    }
+  };
+
+  if (verificationSent) {
+    return (
+      <LoginStepContainer partnerId={partnerId}>
+        <div className="mb-6 w-full space-y-4 px-3 text-center">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+            <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+          <p className="text-sm font-medium text-gray-900 dark:text-gray-100">Check your email</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            We sent a verification link to <span className="font-medium text-gray-700 dark:text-gray-200">{email}</span>
+            . Verify your account, then come back and sign in.
+          </p>
+          <button
+            onClick={() => {
+              setVerificationSent(false);
+              setMode("sign-in");
+              setShowEmailForm(true);
+              setPassword("");
+            }}
+            className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+          >
+            Back to sign in
+          </button>
+        </div>
+      </LoginStepContainer>
+    );
+  }
+
+  return (
+    <LoginStepContainer partnerId={partnerId}>
+      {mode === "forgot-password" ? (
+        <div className="mb-6 w-full space-y-3 px-3">
+          <p className="text-center text-sm font-medium text-gray-900 dark:text-gray-100">Reset password</p>
+          <p className="text-center text-xs text-gray-500">Enter your email and we'll send you a reset link</p>
+
+          {resetEmailSent ? (
+            <div className="space-y-3 py-4 text-center">
+              <p className="text-sm text-green-600">Check your email for a reset link.</p>
+            </div>
+          ) : (
+            <>
+              <Input
+                type="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={event => setEmail(event.target.value)}
+                disabled={isLoading}
+                onKeyDown={event => {
+                  if (event.key === "Enter") handleForgotPassword();
+                }}
+              />
+
+              {error && <p className="text-sm text-red-500">{error}</p>}
+
+              <Button onClick={handleForgotPassword} disabled={isLoading} className="w-full">
+                {isLoading ? "Sending..." : "Send reset link"}
+              </Button>
+            </>
+          )}
+
+          <button
+            onClick={() => {
+              setMode("sign-in");
+              setShowEmailForm(true);
+              setError(null);
+              setResetEmailSent(false);
+            }}
+            className="w-full text-center text-sm text-gray-500 hover:text-gray-700"
+          >
+            Back to sign in
+          </button>
+        </div>
+      ) : showEmailForm ? (
+        <div className="mb-6 w-full space-y-3 px-3">
+          <p className="text-center text-sm font-medium text-gray-900 dark:text-gray-100">
+            {mode === "sign-in" ? "Sign in with email" : "Create an account"}
+          </p>
+
+          {mode === "sign-up" && (
+            <Input
+              type="text"
+              placeholder="Your name"
+              value={name}
+              onChange={event => setName(event.target.value)}
+              disabled={isLoading}
+            />
+          )}
+
+          <Input
+            type="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={event => setEmail(event.target.value)}
+            disabled={isLoading}
+          />
+
+          <Input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={event => setPassword(event.target.value)}
+            disabled={isLoading}
+            onKeyDown={event => {
+              if (event.key === "Enter") handleEmailSubmit();
+            }}
+          />
+
+          {error && <p className="text-sm text-red-500">{error}</p>}
+
+          <Button onClick={handleEmailSubmit} disabled={isLoading} className="w-full">
+            {isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up"}
+          </Button>
+
+          {mode === "sign-in" && (
+            <button
+              onClick={() => {
+                setMode("forgot-password");
+                setError(null);
+              }}
+              disabled={isLoading}
+              className="w-full text-center text-xs text-gray-500 hover:text-gray-700"
+            >
+              Forgot password?
+            </button>
+          )}
+
+          <button
+            onClick={() => {
+              setMode(mode === "sign-in" ? "sign-up" : "sign-in");
+              setError(null);
+            }}
+            disabled={isLoading}
+            className="w-full text-center text-sm text-gray-500 hover:text-gray-700"
+          >
+            {mode === "sign-in" ? "Don't have an account? Sign up" : "Already have an account? Sign in"}
+          </button>
+
+          <Button
+            variant="outline"
+            onClick={() => {
+              setShowEmailForm(false);
+              setError(null);
+            }}
+            disabled={isLoading}
+            className="w-full"
+          >
+            Back
+          </Button>
+        </div>
+      ) : (
+        <div className="mb-6 w-full space-y-4 px-3">
+          {/* Social providers */}
+          <div className="grid w-full grid-cols-3 gap-4">
+            {SOCIAL_PROVIDERS.map(provider => (
+              <AuthButton
+                key={provider.id}
+                strategy={provider.id}
+                onClick={() => handleSocialSignIn(provider.id)}
+                isLoading={isLoading}
+              />
+            ))}
+          </div>
+
+          {/* Divider */}
+          <div className="flex items-center gap-3">
+            <div className="h-px flex-1 bg-gray-200" />
+            <span className="text-xs text-gray-400">or</span>
+            <div className="h-px flex-1 bg-gray-200" />
+          </div>
+
+          {/* Email option */}
+          <AuthButton strategy="email" onClick={() => setShowEmailForm(true)} isLoading={isLoading} />
+
+          {error && <p className="text-center text-sm text-red-500">{error}</p>}
+        </div>
+      )}
+    </LoginStepContainer>
+  );
+}

package/src/global-account/react/components/SignInWithB3/utils/signInUtils.ts

@@ -65,11 +65,13 @@ export function getConnectOptionsFromStrategy(strategy: AllowedStrategy): {
 
 export const strategyIcons: Record<string, string> = {
   google: "https://cdn.b3.fun/google.svg",
+  github: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg",
   x: "https://cdn.b3.fun/x.svg?1",
   discord: "https://cdn.b3.fun/discord.svg",
   apple: "https://cdn.b3.fun/apple.svg",
   guest: "https://cdn.b3.fun/incognito.svg",
-  // Add more strategies as needed
+  microsoft: "https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg",
+  slack: "https://upload.wikimedia.org/wikipedia/commons/d/d5/Slack_icon_2019.svg",
 };
 
 export const strategyLabels: Record<string, string> = {
@@ -80,6 +82,8 @@ export const strategyLabels: Record<string, string> = {
   guest: "Guest",
   github: "GitHub",
   email: "Email",
+  microsoft: "Microsoft",
+  slack: "Slack",
 };
 // Test it
 // console.log(getConnectOptionsFromStrategy("io.metamask"));

package/src/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.tsx

@@ -5,6 +5,7 @@ import { Search, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { CombinedProfile, Profile } from "../../hooks/useProfile";
 import { fetchProfile as fetchProfileApi } from "../../utils/profileApi";
+import { validateImageUrl } from "../../utils/profileDisplay";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 import { Input } from "../ui/input";
 
@@ -283,7 +284,7 @@ export function SingleUserSearchSelector({
               {/* Avatar */}
               <div className="single-user-search-result-avatar h-11 w-11 shrink-0">
                 <IPFSMediaRenderer
-                  src={searchResult.avatar}
+                  src={validateImageUrl(searchResult.avatar) ?? undefined}
                   alt={getDisplayName(searchResult)}
                   className="h-full w-full rounded-full object-cover"
                 />

package/src/global-account/react/components/index.ts

@@ -2,6 +2,7 @@
 // Core Components
 export { B3DynamicModal } from "./B3DynamicModal";
 export { B3Provider } from "./B3Provider/B3Provider";
+export type { AuthStrategy } from "./B3Provider/B3ConfigProvider";
 export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper";
 export { useB3 } from "./B3Provider/useB3";
 export { useB3Account } from "./B3Provider/useB3Account";
@@ -9,6 +10,8 @@ export { useB3Config } from "./B3Provider/useB3Config";
 export { StyleRoot } from "./StyleRoot";
 
 // SignInWithB3 Components
+export { BetterAuthResetPassword, type BetterAuthResetPasswordProps } from "./SignInWithB3/BetterAuthResetPassword";
+export { BetterAuthSignIn, type BetterAuthSignInProps } from "./SignInWithB3/BetterAuthSignIn";
 export { AuthButton } from "./SignInWithB3/components/AuthButton";
 export { PermissionItem } from "./SignInWithB3/components/PermissionItem";
 export { WalletRow } from "./SignInWithB3/components/WalletRow";

package/src/global-account/react/hooks/index.ts

@@ -5,6 +5,7 @@ export { useAddTWSessionKey } from "./useAddTWSessionKey";
 export { useAnalytics } from "./useAnalytics";
 export { useAuth } from "./useAuth";
 export { useAuthentication } from "./useAuthentication";
+export { useBetterAuth, EmailVerificationRequiredError } from "./useBetterAuth";
 export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
 export { useB3EnsName } from "./useB3EnsName";
 export { useChainSwitchWithAction } from "./useChainSwitchWithAction";

package/src/global-account/react/hooks/useAuth.ts

@@ -30,7 +30,7 @@ const debug = debugB3React("useAuth");
  * This hook provides 1:1 feature parity with useAuthentication.ts
  */
 export function useAuth() {
-  const { onConnectCallback } = useContext(LocalSDKContext);
+  const { onConnectCallback, disableBSMNTAuthentication } = useContext(LocalSDKContext);
   const { disconnect } = useDisconnect();
   const wallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
@@ -76,8 +76,10 @@ export function useAuth() {
 
       // Authenticate with BSMNT
       try {
-        const b3Jwt = await authenticateWithB3JWT(response.accessToken);
-        debug("BSMNT re-authentication successful", b3Jwt);
+        if (!disableBSMNTAuthentication) {
+          const b3Jwt = await authenticateWithB3JWT(response.accessToken);
+          debug("BSMNT re-authentication successful", b3Jwt);
+        }
       } catch (bsmntError) {
         // BSMNT authentication failure shouldn't block the main auth flow
         debug("BSMNT re-authentication failed (non-critical)", bsmntError);
@@ -88,7 +90,7 @@ export function useAuth() {
       debug("Re-authentication failed", err);
       throw err;
     }
-  }, [setUser]);
+  }, [setUser, disableBSMNTAuthentication]);
 
   const syncWagmi = useCallback(async () => {
     function syncWagmiFunc() {
@@ -157,9 +159,11 @@ export function useAuth() {
       setIsAuthenticating(false);
       debug("Re-authenticated successfully", { userAuth });
 
-      // Authenticate on BSMNT with B3 JWT
-      const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
-      debug("@@b3Jwt", b3Jwt);
+      if (!disableBSMNTAuthentication) {
+        // Authenticate on BSMNT with B3 JWT
+        const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+        debug("@@b3Jwt", b3Jwt);
+      }
 
       return userAuth;
     } catch (error) {
@@ -169,7 +173,14 @@ export function useAuth() {
       setIsAuthenticating(false);
       throw new Error("Authentication required. Please authenticate.");
     }
-  }, [reAuthenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting]);
+  }, [
+    reAuthenticate,
+    setIsAuthenticated,
+    setIsAuthenticating,
+    setUser,
+    setHasStartedConnecting,
+    disableBSMNTAuthentication,
+  ]);
 
   /**
    * Authenticate with B3
@@ -206,8 +217,10 @@ export function useAuth() {
 
         // Step 3: Authenticate with BSMNT for basement integration
         try {
-          const b3Jwt = await authenticateWithB3JWT(response.accessToken);
-          debug("BSMNT authentication successful", b3Jwt);
+          if (!disableBSMNTAuthentication) {
+            const b3Jwt = await authenticateWithB3JWT(response.accessToken);
+            debug("BSMNT authentication successful", b3Jwt);
+          }
         } catch (bsmntError) {
           // BSMNT authentication failure shouldn't block the main auth flow
           debug("BSMNT authentication failed (non-critical)", bsmntError);
@@ -219,7 +232,7 @@ export function useAuth() {
         throw err;
       }
     },
-    [referralCode, setUser],
+    [referralCode, setUser, disableBSMNTAuthentication],
   );
 
   /**

package/src/global-account/react/hooks/useAuthentication.ts

@@ -25,7 +25,7 @@ import { useUserQuery } from "./useUserQuery";
 const debug = debugB3React("useAuthentication");
 
 export function useAuthentication(partnerId: string, { skipAutoConnect = false }: { skipAutoConnect?: boolean } = {}) {
-  const { onConnectCallback, onLogoutCallback } = useContext(LocalSDKContext);
+  const { onConnectCallback, onLogoutCallback, disableBSMNTAuthentication } = useContext(LocalSDKContext);
   const { disconnect } = useDisconnect();
   const wallets = useConnectedWallets();
   // Keep refs so logout() always disconnects current wallets, not stale closure values.
@@ -140,9 +140,11 @@ export function useAuthentication(partnerId: string, { skipAutoConnect = false }
         setIsAuthenticating(false);
         debug("Re-authenticated successfully", { userAuth });
 
-        // Authenticate on BSMNT with B3 JWT
-        const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
-        debug("@@b3Jwt", b3Jwt);
+        if (!disableBSMNTAuthentication) {
+          // Authenticate on BSMNT with B3 JWT
+          const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+          debug("@@b3Jwt", b3Jwt);
+        }
 
         return userAuth;
       } catch (error) {
@@ -154,14 +156,25 @@ export function useAuthentication(partnerId: string, { skipAutoConnect = false }
         setIsAuthenticating(false);
         debug("Fresh authentication successful", { userAuth });
 
-        // Authenticate on BSMNT with B3 JWT
-        const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
-        debug("@@b3Jwt", b3Jwt);
+        if (!disableBSMNTAuthentication) {
+          // Authenticate on BSMNT with B3 JWT
+          const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+          debug("@@b3Jwt", b3Jwt);
+        }
 
         return userAuth;
       }
     },
-    [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting],
+    [
+      activeWallet,
+      partnerId,
+      authenticate,
+      setIsAuthenticated,
+      setIsAuthenticating,
+      setUser,
+      setHasStartedConnecting,
+      disableBSMNTAuthentication,
+    ],
   );
 
   const logout = useCallback(