Web3Auth v10 is Here! Experience the Power of One Unified SDK! 🎉

Announcements
1

Hello Web3Auth Developers,

We are incredibly excited to announce the arrival of Web3Auth PnP SDK v10! This landmark release represents a major leap forward, empowering you with a more intuitive, powerful, and developer-friendly experience through a single, unified SDK.

Web3Auth v10 evolves our platform to further streamline your workflow, significantly reducing code complexity and enhancing development speed. We’ve focused on what matters most: a clean, efficient, and flexible integration.

Web3Auth v10 at a Glance: Key Highlights & Advantages

  • One SDK for All Flows: A single @web3auth/modal SDK now supports both experiences: using our pre-built modal UI, and implementing your own custom user interface with direct connection capabilities. This dramatically simplifies your integration choices and reduces package management.

  • Modernized React Experience: Enjoy a cleaner, more efficient React development with an exclusively hooks-based architecture (@web3auth/modal/react).

  • Dashboard-Powered Configuration: Many settings (Connections, Chains, Smart Accounts, UI Customizations, Wallet Features) are now visually managed on the Web3Auth Developer Dashboard, reducing client-side code and offering better visibility.

  • Simplified Authentication and Logins: Authentication setup is now easier—just toggle it on or update key fields for custom authentication. The updated login modal offers better control and customization.

  • Native SSR Support: Ensures that you know your users are authenticated before your page even hits the browser.

  • Reduced Boilerplate & Faster Development: Get up and running with significantly less initial code, leading to faster development cycles.

  • Enhanced Readability & Maintainability: More declarative configurations and centralized dashboard settings make your integration easier to understand, manage, and update.

:sparkles: What’s New in the Unified Web3Auth v10 SDK? :sparkles:

1. One Unified SDK for All Your Needs (Pre-built Modal & Custom UI Flows)

  • The Power of One: We’ve consolidated into a single, versatile @web3auth/modal SDK. Whether you need a beautiful, pre-built login modal for quick integration, or you want to craft a completely custom user interface by directly connecting to authentication providers, v10 has you covered.

  • Ultimate Flexibility, Minimal Code: This unification means fewer packages to manage and significantly less boilerplate. Integrate sophisticated auth flows with just a few lines of code, without sacrificing flexibility.

2. Modernized React Experience: Hooks-First Simplicity

  • Effortless React Integration: For React developers, v10 mandates a hooks-based architecture using @web3auth/modal/react. Hooks like useWeb3AuthConnect, useWeb3AuthDisconnect, and useWeb3AuthUser dramatically simplify state management and component lifecycle.

  • Less Code, More Power: This approach naturally leads to cleaner components and a more intuitive development flow.

    // v10 @web3auth/modal SDK (React Hooks) - Example for Custom UI with Direct Connection
import { useWeb3AuthConnect, WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/modal/react";

// In your React component, get the connect function:
const { connectTo } = useWeb3AuthConnect(); // As per your example, connectTo is used

// Later, in an async function to handle a custom connection:
await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM, // Or specific providers like AUTH_CONNECTION.GOOGLE
  authConnectionId: "your-connection-id-from-dashboard", // Connection ID from Dashboard
  // groupedAuthConnectionId: "optional-group-id" // For account linking
});

  • Non-React Environments: For Angular, Vue, VanillaJS, etc., direct usage of the Web3Auth class from @web3auth/modal remains the robust standard.

3. The Dashboard: Your Central Hub for Seamless Configuration & Visibility

Many configurations have moved to the Web3Auth Developer Dashboard, providing a clear visual interface and reducing client-side setup:

  • Connections & Social Logins: Define, customize, and manage your authentication connections (previously verifiers) directly on the dashboard. We’ve streamlined nomenclature to authConnectionId for simplicity, aligning with industry standards.

    Connections on Dashboard

  • Blockchain & Chain Configurations: Set up your desired chains (standard or custom) effortlessly. For many standard EVM chains, there are predefined chains already present so that you don’t need to add them. Custom chains can also be added.

    Chains on Dashboard

  • Smart Account (EIP-4337) Setup: Enable and configure Smart Accounts with a simple toggle. Set parameters for bundlers and paymasters directly through the dashboard.

    Smart Accounts Section

  • Branding Customizations (for pre-built modal flow): Whitelabel the login modal and tweak its appearance to perfectly match your brand.

    Branding customizations

  • Modal Customizations (for pre-built modal flow): Tweak what gets displayed on the modal, in what order and more.

    Modal customizations

  • Wallet Configuration: Tailor the in-wallet experience for your users by configuring features like token display, NFT display, buy/send/swap buttons, and more, all from the dashboard.

    Wallet Configuration on Dashboard

4. Simplified Login & Connection Logic

  • No More Client-Side Adapter Configuration: The explicit need to import and manage adapter packages (like @web3auth/auth-adapter) or call web3auth.configureAdapter() is gone for standard setups.

  • Using the Pre-built Modal UI: Customize which dashboard-configured connectors appear (and their order) using modalConfig in your Web3Auth constructor (class-based) or Web3AuthProvider options (React).

    // v10 @web3auth/modal SDK (Class-based) - Example for Pre-built Modal UI
import { Web3Auth, WEB3AUTH_NETWORK, WALLET_CONNECTORS } from "@web3auth/modal";

const web3auth = new Web3Auth({
  clientId: "YOUR_CLIENT_ID",
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  modalConfig: {
    [WALLET_CONNECTORS.AUTH]: { // For dashboard-configured social/custom connections
      loginMethods: { // Define which configured connections appear in the modal and their order
        google: { name: "Google", showOnModal: true }, // Assuming 'google' is a configured connection
        // ... other connections
      },
    },
  },
});

  • Building Your Own UI with Direct Connections: If you prefer to implement your own login flow without our pre-built modal, the connectTo method is your go-to, using the authConnectionId from your dashboard setup.

5. Simplified Multi-Factor Authentication (MFA)

  • MFA configuration is now more direct. Define global mfaSettings in the SDK constructor/Web3AuthProvider options, or specify a per-connection mfaLevel.

6. Native Server-Side Rendering (SSR) Support

  • Web3Auth v10 now includes improved native SSR support, ensuring that you know your users are authenticated before your page even hits the browser. This enables better performance and SEO for your applications.

Migration Notes: Key Updates & Deprecations

To ensure a smooth transition to v10, please note these important changes:

  • Consolidated SDK: The @web3auth/no-modal SDK is an internal SDK for @web3auth/modal SDK.

  • Deprecated Packages: @web3auth/base, @web3auth/auth-adapter, @web3auth/account-abstraction-provider, and chain-specific providers (like @web3auth/ethereum-provider for standard Web3Auth init) are deprecated as their functionalities are merged or dashboard-driven.

  • Parameter Rename: The constructor option useCoreKitKey (v9) for SFA-compatible keys is now useSFAKey (v10).

  • Connection Nomenclature: “Verifiers” are now referred to as “Connections” with an authConnectionId configured on the dashboard.

Ready to Upgrade?
We’ve crafted a detailed migration guide to help you transition:

  • Migrating to the Unified Web3Auth PnP Modal SDK v10: Migration Guide
    We highly recommend reviewing the “Before You Start” section in the guide.

Join the v10 Journey!

We are incredibly proud of Web3Auth v10 and believe it marks a significant step forward.

Thank you for being a part of the Web3Auth community. We can’t wait to see what you build with v10!

Happy Coding! :rocket:

The Web3Auth Team