​
Estrategias de Autenticación

Las Cuentas Globales B3 admiten múltiples estrategias de autenticación para adaptarse a las necesidades de su aplicación.

​
Inicio de Sesión Social

​
Autenticación con Google

import { SignInWithB3 } from "@b3dotfun/sdk/global-account/react";

function GoogleAuth() {
  return (
    <SignInWithB3
      provider={{ strategy: "google" }}
      partnerId="your-partner-id"
      onLoginSuccess={(globalAccount) => {
        console.log("Autenticación con Google exitosa:", globalAccount);
      }}
      onLoginError={(error) => {
        console.error("Autenticación fallida:", error);
      }}
    />
  );
}

​
Autenticación con Discord

import { SignInWithB3 } from "@b3dotfun/sdk/global-account/react";

function DiscordAuth() {
  return (
    <SignInWithB3
      provider={{ strategy: "discord" }}
      partnerId="your-partner-id"
      onLoginSuccess={(globalAccount) => {
        console.log("Autenticación con Discord exitosa:", globalAccount);
      }}
    />
  );
}

​
Autenticación con Clave de Sesión

Las claves de sesión proporcionan seguridad mejorada y permiten permisos granulares. Esto es particularmente útil para juegos y aplicaciones que necesitan realizar acciones en nombre de los usuarios.

​
Configuración Básica de Clave de Sesión

import { SignInWithB3 } from "@b3dotfun/sdk/global-account/react";

const b3Chain = {
  id: 8333,
  name: "B3",
  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
  rpc: "https://mainnet-rpc.b3.fun",
};

function SessionKeyAuth() {
  return (
    <SignInWithB3
      provider={{ strategy: "google" }}
      chain={b3Chain}
      partnerId="your-partner-id"
      sessionKeyAddress="0x..." // Dirección de MetaMask u otra cartera
      onLoginSuccess={(globalAccount) => {
        console.log("Clave de sesión autenticada:", globalAccount);
      }}
    />
  );
}

​
Configuración Personalizada de Clave de Sesión

function AdvancedSessionAuth() {
  const sessionKeyConfig = {
    permissions: {
      approvedTargets: ["0x..."], // Direcciones de contratos específicos
      startDate: new Date(),
      endDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // 30 días
      nativeTokenLimitPerTransaction: 0.0001, // Límite de ETH por transacción
    }
  };

  return (
    <SignInWithB3
      provider={{ strategy: "google" }}
      chain={b3Chain}
      partnerId="your-partner-id"
      sessionKeyAddress="0x..."
      sessionKeyConfig={sessionKeyConfig}
      onLoginSuccess={(globalAccount) => {
        console.log("Configuración avanzada de clave de sesión:", globalAccount);
      }}
    />
  );
}

​
Autenticación sin Interfaz

Para implementaciones personalizadas, use el servicio de autenticación sin interfaz:

​
Autenticación Básica

import { authenticate } from "@b3dotfun/sdk/global-account/app";

async function authenticateUser(accessToken: string, identityToken: string) {
  try {
    const authResult = await authenticate(accessToken, identityToken, {
      // configuración adicional
    });
    
    if (authResult) {
      console.log("Autenticación exitosa:", authResult);
      return authResult;
    } else {
      console.log("Autenticación fallida");
      return null;
    }
  } catch (error) {
    console.error("Error de autenticación:", error);
    throw error;
  }
}

​
Autenticación en React Native

// Para aplicaciones React Native
import { authenticate } from "@b3dotfun/sdk/global-account/app";

async function authenticateInReactNative() {
  const result = await authenticate("access-token", "identity-token");
  return result;
}

​
Hooks de Autenticación

​
Hook useB3

El hook principal para acceder al estado de autenticación: 
import { useB3 } from "@b3dotfun/sdk/global-account/react";

function AuthStatus() {
  const { 
    account, 
    isAuthenticated, 
    isLoading,
    signOut 
  } = useB3();

  if (isLoading) return <div>Cargando...</div>;

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <p>Bienvenido, {account?.displayName}!</p>
          <button onClick={signOut}>Cerrar Sesión</button>
        </div>
      ) : (
        <p>Por favor, inicie sesión</p>
      )}
    </div>
  );
}

​
Hook useAccountWallet

Acceso a la información de la cartera: 
import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";

function WalletInfo() {
  const { wallet, isConnected } = useAccountWallet();

  return (
    <div>
      {isConnected && (
        <div>
          <p>Dirección de la Cartera: {wallet?.address}</p>
          <p>ID de la Cadena: {wallet?.chainId}</p>
        </div>
      )}
    </div>
  );
}

​
Manejo de Errores

Implemente un manejo de errores adecuado para los flujos de autenticación: 
function AuthWithErrorHandling() {
  const [authError, setAuthError] = useState<string | null>(null);

  return (
    <div>
      <SignInWithB3
        provider={{ strategy: "google" }}
        partnerId="your-partner-id"
        onLoginSuccess={(globalAccount) => {
          setAuthError(null);
          console.log("Éxito:", globalAccount);
        }}
        onLoginError={(error) => {
          setAuthError(error.message);
          console.error("Error de autenticación:", error);
        }}
      />
      
      {authError && (
        <div className="error">
          Autenticación fallida: {authError}
        </div>
      )}
    </div>
  );
}

​
Mejores Prácticas

ID de Socio

Siempre use su ID de socio único para una atribución y análisis adecuados.

Manejo de Errores

Implemente un manejo de errores completo para una mejor experiencia del usuario.

Gestión de Sesiones

Establezca duraciones de sesión apropiadas basadas en las necesidades de seguridad de su aplicación.

Configuración del Entorno

Use variables de entorno adecuadas para diferentes etapas de despliegue.

​
Próximos Pasos

Permisos

Aprenda sobre la gestión de permisos y claves de sesión.

Referencia de Hooks

Explore todos los hooks de React disponibles.

Ejemplos

Vea ejemplos completos de integración.