Web3Auth Starter

1. Application Overview

The Web3Auth Starter is a demonstration application designed to showcase the integration of Civic Auth for Web3. It provides users with a simple, secure way to authenticate and interact with decentralized applications (dApps) by leveraging Civic's identity verification capabilities and embedded wallet technology.

Core features include:

• Civic Pass Authentication: Users authenticate using their Civic Pass, ensuring a verified identity.
• Embedded Wallets: Upon successful authentication, a unique, non-custodial Ethereum-compatible wallet is generated for the user directly within their browser, managed by the Civic Auth Web3 SDK.
• Simulated Transactions: Users can initiate simulated transactions to understand the flow of using their embedded wallet.

2. Civic Auth Integration

Civic Auth is integrated to provide a user-friendly and secure authentication experience. The core of this integration revolves around the (mocked for this demo) @civic/auth-web3 SDK.

2.1. Authentication Flow

1. Connection Initiation: The user clicks the "Connect with Civic" button, typically found in the application header (CivicAuthButton component).
2. SDK Interaction: This action triggers the login function within our AuthContext. The context then calls a (mocked) civicService.login() method.

   // In AuthProvider.tsx
   const login = async () => {
     // ...
     const { user, walletAddress } = await civicService.login(); // Calls the mock service
     // Update state with user and walletAddress
     // ...
   };

   In a real application, civicService.login() would use the actual @civic/auth-web3 SDK to:
   • Prompt the user to authenticate with their Civic Pass.
   • Verify the user's identity.
   • Securely generate or retrieve the user's embedded wallet keys.
3. State Management: Upon successful authentication and wallet generation, the AuthContext updates its state, making the user's information and wallet address available throughout the application.

2.2. Embedded Wallet Generation

A key feature of the Civic Auth integration is the automatic generation of an embedded, non-custodial wallet for each authenticated user. This means:

• User-Friendly: Users don't need to manage complex seed phrases or install separate wallet browser extensions to get started.
• Non-Custodial: The user retains full control over their keys and assets. The Civic SDK facilitates key management securely within the user's device context.
• Seamless Experience: The wallet is available immediately after authentication, allowing for instant interaction with dApp features.

The (mocked) civicService.login() function simulates this by returning a randomly generated wallet address.

3. Transaction Flow (Simulated)

Once authenticated, users can send simulated transactions using their embedded wallet via the TransactionForm component.

1. Input Details: The user provides a recipient address and an amount in the form.
2. Initiate Sending: Clicking "Send Simulated Transaction" calls the sendTransaction method from the AuthContext.
3. SDK Usage (Simulated): The context, using the authenticated user's walletAddress, calls the (mocked) civicService.sendTransaction(from, to, amount).

   // In AuthProvider.tsx
   const sendTransaction = async (to, amount) => {
     // ...
     const success = await civicService.sendTransaction(walletAddress, to, amount);
     // Handle success/failure with toast notifications
     // ...
   };

   In a real scenario, the @civic/auth-web3 SDK would handle:
   • Constructing the transaction.
   • Prompting the user for confirmation (if necessary, depending on SDK configuration).
   • Signing the transaction using the embedded wallet's private key.
   • Broadcasting the signed transaction to the relevant blockchain network.
4. Feedback: The user receives a toast notification indicating the simulated success or failure of the transaction.

4. Key Components

• src/components/auth/CivicAuthButton.tsx: Handles the UI for connecting and disconnecting the Civic wallet.
• src/components/dashboard/TransactionForm.tsx: Provides the interface for initiating simulated transactions.
• src/providers/auth-provider.tsx & src/contexts/auth-context.ts: Manages global authentication state, user details, and wallet information.
• src/lib/civic.ts: Contains the mocked implementation of the Civic SDK service. In a production app, this would be replaced with actual calls to @civic/auth-web3.

5. Important Note on Mocking