DOCSEARCHbyAlgolia
Submit Docs

Web3Auth Examples

repository·main·Indexed 40 days ago

https://github.com/web3auth/web3auth-examples

A collection of ready-to-run examples for MetaMask Embedded Wallets powered by Web3Auth. This repository demonstrates how to integrate non-custodial social login wallets across various frontend frameworks, authentication providers (such as Auth0, Google OAuth, Firebase, and GitHub), and blockchain networks, including implementations of grouped connections to ensure identity consistency across different login methods.

Tokens
58K
Snippets
212
Records
233
Agent score
48%

What's inside Web3Auth

  1. Overview of MetaMask Embedded Wallets Smart Account Example

    main
    This example demonstrates how to use MetaMask Embedded Wallets (powered by Web3Auth) as a signer for EVM transactions using Wagmi in a React + Vite environment. The workflow involves performing a social login to derive a wallet via Web3Auth, then using standard Wagmi hooks to send transactions through that derived wallet.

  2. Project structure of the React Solana Quick Start

    main

    The project is organized as follows:

    • src/solana/transfer.ts: Contains the Solana Kit logic to build SOL transfer transactions.
    • src/components/: Contains individual React components demonstrating specific Web3Auth Solana hooks.
    • src/web3authContext.tsx: Web3Auth context configuration.
    • src/main.tsx: The entry point where Web3AuthProvider and SolanaProvider wrap the application.

  3. What is a grouped connection in MetaMask Embedded Wallets?

    main

    A grouped connection is a feature that links multiple authentication providers to a single identity.

    Why use it? Without grouping, if a user signs in with Google and later signs in with Auth0 (e.g., via GitHub), they would be issued two completely different wallet addresses. By using a grouped connection, MetaMask Embedded Wallets ensures that the same user always gets the same wallet address regardless of which configured provider they use to sign in.

  4. Configure Custom Authentication: Single vs Grouped Connections

    main

    MetaMask Embedded Wallets supports two primary patterns for custom authentication providers:

    Single Connection

    Each example wires one external identity provider to a dedicated Web3Auth connection. This is used when one provider maps to one wallet.

    • OAuth/Implicit Flows: Google, Facebook, Discord, Twitch, Worldcoin.
    • JWT Flows: Auth0 (JWT), Firebase (JWT), Custom JWT.
    • Other: AWS Cognito (Implicit), Modal (Modal).

    Grouped Connections

    Grouped connections allow multiple login methods (e.g., Social Login + Email Passwordless) to resolve to the same wallet address for a single user. This is essential for user retention and account recovery.

    • Examples: Auth0 + Google (Implicit/JWT), Firebase + Google (JWT), Google + Email Passwordless (Modal).

    Important: You must set up your connection on the Web3Auth Dashboard before running these examples.

  5. Understand Grouped Connections in MetaMask Embedded Wallets

    main

    A grouped connection allows you to combine multiple authentication methods (such as Google OAuth and email passwordless) so that a user always receives the same wallet address regardless of which method they use to sign in.

    Without grouping, a user signing in with Google and later with email passwordless would be assigned two separate, disconnected wallets. Grouping ensures identity consistency across different login providers.

  6. Understand the division of responsibilities between Web3Auth and Solana Kit

    main

    In this integration, responsibilities are split between the Web3Auth SDK and the Solana Kit. Web3Auth handles the identity and blockchain interaction layer, while Solana Kit is used strictly for transaction construction.

    Web3Auth (@web3auth/modal/vue/solana) Responsibilities:

    • Authentication: Login and logout via useWeb3AuthConnect and useWeb3AuthDisconnect.
    • Wallet State: Accessing the wallet address via useSolanaWallet → accounts.
    • Blockchain Interaction: Reading from the chain or using RPC via useSolanaWallet → rpc.
    • Signing: Signing messages with useSignMessage and signing transactions with useSignTransaction.
    • Transaction Execution: Sending transactions via useSignAndSendTransaction.
    • Chain Management: Switching chains using useSwitchChain and useWeb3Auth.

    Solana Kit (src/solana/) Responsibilities:

    • Transaction Building: Constructing specific transaction types, such as SOL transfers using buildSolTransferTransaction.

    Key Concept: The Solana Kit is only used to build the transaction object. The actual signing and the RPC endpoints used for broadcasting are provided by Web3Auth.

  7. What are Grouped Connections in MetaMask Embedded Wallets

    main

    A grouped connection combines multiple authentication providers (e.g., Auth0, Google OAuth, and GitHub) so that a single user always receives the same wallet address regardless of which provider they use to sign in.

    Without grouping, using different providers (like Google vs. Auth0) for the same person would result in two completely different wallet addresses. This ensures identity consistency across different login methods.

  8. Use Web3Auth provider RPC methods for XRPL

    main

    In this XRPL implementation, once the social login is successful, the application interacts with the XRP Ledger by calling Web3Auth provider RPC methods. These methods allow the app to sign transactions and query account information directly through the embedded wallet provider.

    Key methods mentioned include:

    • xrpl_getAccounts: Used to retrieve account information on the XRPL.
    • Transaction signing and submission: Handled via the provider's RPC interface.

  9. Quick Start: MetaMask Embedded Wallets with Vue and Solana

    main

    This boilerplate provides a Vue 3 + Vite implementation of MetaMask Embedded Wallets (Web3Auth) integrated with Solana Kit. It demonstrates how to handle authentication, wallet management, and transaction building for the Solana blockchain.

    Prerequisites

    • Node.js: 22.12+
    • npm
    • Web3Auth Client ID: Obtain this from the Web3Auth Dashboard. Ensure you have added Solana chain(s) under Chains & Networks. Note that RPC URLs are managed via the dashboard and are not hardcoded in this example.

    Setup Instructions

    1. Clone the repository:

      git clone https://github.com/Web3Auth/web3auth-examples.git
cd web3auth-examples/quick-starts/vue-solana-quick-start

    2. Install dependencies:

      npm install

    3. Configure environment variables: Copy the example env file and set your Client ID:

      cp .env.example .env

      In the .env file, update: VITE_WEB3AUTH_CLIENT_ID=YOUR_CLIENT_ID

    4. Run the application:

      npm run dev

      The application will be available at http://localhost:8080.

    Note: Use Sapphire Devnet for local development. Sapphire Mainnet does not support localhost connections.

    git clone https://github.com/Web3Auth/web3auth-examples.git
cd web3auth-examples/quick-starts/vue-solana-quick-start
npm install
cp .env.example .env
npm run dev

  10. Quick Start: React + Solana with MetaMask Embedded Wallets

    main

    This boilerplate provides a React + Vite implementation of MetaMask Embedded Wallets (Web3Auth) integrated with Solana Kit. It demonstrates how to handle authentication, wallet address retrieval, and transaction signing/sending on the Solana blockchain.

    Core Responsibilities

    FeatureWeb3Auth (@web3auth/modal/react/solana)Solana Kit (src/solana/)
    Login / logoutuseWeb3authConnect, useWeb3authDisconnect—
    Wallet addressuseSolanaWallet → accounts—
    Read chain / RPCuseSolanaWallet → rpc—
    Sign messageuseSignMessage—
    Sign transactionuseSignTransactionbuildSolTransferTransaction
    Send transactionuseSignAndSendTransactionbuildSolTransferTransaction
    Switch chainuseSwitchChain + useWeb3auth—
    Solana React contextSolanaProvider (wraps app)—

    Note: The Solana Kit is used exclusively to build transfer transactions and format lamports. All signing and RPC interactions are managed by Web3Auth.

  12. Setup the MetaMask Embedded Wallets Solana Name Service (SNS) example

    main

    This example demonstrates a React + Vite application using MetaMask Embedded Wallets (powered by Web3Auth) to interact with the Solana Name Service (SNS). Users can perform social logins to resolve .sol domain names and look up wallet addresses by name.

    Prerequisites

    • Node.js 22.12+
    • npm
    • A Client ID from the Web3Auth Dashboard configured with the Solana chain.

    Installation Steps

    1. Clone the repository and navigate to the example directory:
      git clone https://github.com/Web3Auth/web3auth-examples.git
cd web3auth-examples/other/sns-example
    2. Install dependencies:
      npm install
    3. Configure environment variables: Copy the example environment file:
      cp .env.example .env
      Edit the .env file and set your Client ID:
      VITE_WEB3AUTH_CLIENT_ID=YOUR_CLIENT_ID
    4. **Run the application:**
   ```bash
   npm run dev

    The application will be available at http://localhost:5173.

    git clone https://github.com/Web3Auth/web3auth-examples.git
cd web3auth-examples/other/sns-example
npm install
cp .env.example .env
# Edit .env with VITE_WEB3AUTH_CLIENT_ID
npm run dev