OpenAuth Monorepo

Welcome to the OpenAuth Monorepo! This repository houses multiple packages designed to streamline user onboarding in Web3 applications and enable the development of smooth omnichain dApps.

Table of Contents

• OpenAuth Monorepo
  • Table of Contents
  • Overview
  • Architecture
    • Authentication Flow
  • Key Features
  • Packages
  • Getting Started
    • Prerequisites
    • Auth Widget
      • Installation
      • Configuration
      • Integration
      • Usage
    • Wallet Manager
      • Installation
      • Configuration
      • Integration
      • Usage
    • Signer SDK Ethers V6
      • Installation
      • Usage
  • Contributing

Overview

OpenAuth kit provides developers with tools to easily onboard users to their dApps using preferred login methods such as Google, X, Discord, Email, SMS, and Farcaster. The kit enables users to perform on-chain activities with their social logins, maintaining complete control over their assets through non-custodial wallet management secured by Multi-Party Computation (MPC).

Architecture

OpenAuth leverages the Lit Protocol to generate Programmable Key Pairs (PKPs) via Distributed Key Generation (DKG), ensuring enhanced security.

Authentication Flow

1. User sign-in triggers a check for existing PKP within the Lit network.
2. If no PKP exists, a new one is created.
3. Existing PKPs authenticate users via associated methods.
4. Successful authentication generates SessionSigs from a randomly created ed25519 keypair.
5. These session keys sign user-initiated transactions and messages.

Key Features

• Streamlined Single Sign-On (SSO)
• Interoperability without vendor lock-in
• Session keys for temporary cryptographic operations
• Unified access with WalletConnect
• Multiple supported login providers
• Customizable modal and in-dapp wallet manager
• In-built key rotation for enhanced security

Packages

1. auth-sdk: Core authentication library
2. auth-widget: UI for creating Web3 wallets with various login methods
3. wallet-auth: Wallet authentication management
4. wallet-manager: Comprehensive wallet management solution

Getting Started

Prerequisites

• Node.js (>=14.x)
• pnpm (>=6.x)
• Running Backend Server
• Running Redirect Application

Auth Widget

Installation

npm install @aarc-xyz/auth-widget @aarc-xyz/wallet-auth

Configuration

You need to run Backend Server and Redirect Application to use the widget.

import Wallets from '@aarc-xyz/wallet-auth'

const config: AuthConfig = {
  Wallet: Wallets,
  appearance: {
    logoUrl: 'https://dashboard.aarc.xyz/assets/AuthScreenLogo-CNfNjJ82.svg',
    themeColor: '#2D2D2D',
    darkMode: true
  },
  callbacks: {
    onSuccess: (data: any) => console.log(data),
    onError: (data: any) => console.log("onError", data),
    onClose: (data: any) => console.log("onClose", data),
    onOpen: (data: any) => console.log("onOpen", data)
  },
  authMethods: ['email', 'wallet'],
  socialAuth: ['google'],
  urls: {
      stytchUrls: {
        prod: "YOUR_STYTCH_PROD_URL", // Get this from stytch dashboard
        staging: "https://test.stytch.com/",
      },
      pollUrls: {
        prod: "YOUR_BACKEND_PROD_URL", // Replace with your backend URL
        staging: "YOUR_BACKEND_STAGING_URL", // Replace with your backend URL
      },
      publicToken: {
        prod: "YOUR_STYTCH_PROD_PUBLIC_TOKEN", // Get this from stytch dashboard
        staging: "YOUR_STYTCH_STAGING_PUBLIC_TOKEN", // Get this from stytch dashboard
      },
      redirectUrl: {
        prod: "RUNNING_APP_URL",  // Replace with your redirect app URL 
        staging: "RUNNING_APP_URL", 
      },
    },
  chainId: 11155111, // Replace with your chainId
};

Integration

import { Provider } from '@aarc-xyz/auth-widget';
import '@aarc-xyz/auth-widget/dist/style.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider config={config}>
    <App />
  </Provider>
);

Note for NextJS: Add 'use client' at the top of the file to ensure the widget runs on the client side.

Usage

import { useAuthWidget } from '@aarc-xyz/auth-widget';

function Auth() {
  const { openAuthWidget } = useAuthWidget()

  useEffect(() => {
    openAuthWidget()
  }, [])

  return <div>{/* Your component content */}</div>
}

Wallet Manager

Installation

npm i @aarc-xyz/wallet-manager

Configuration

const config = {
  appearance: {
    themeColor: 'black',
    textColor: 'white'
  },
  walletAddress: '0x...',
  profileURL: "https://...",
}

Integration

import { WalletManagerProvider } from '@aarc-xyz/wallet-manager';
import '@aarc-xyz/wallet-manager/dist/style.css';

function App() {
  return (
    <WalletManagerProvider config={config}>
      <YourApp />
    </WalletManagerProvider>
  );
}

Usage

import { useWalletManager } from '@aarc-xyz/wallet-manager';

function WalletManager() {
  const { openWalletManager } = useWalletManager()

  return (
    <Button onClick={openWalletManager}>
      Open Wallet Manager
    </Button>
  )
}

Signer SDK Ethers V6

The Signer SDK Ethers V6 provides a signer class that can be initiated with a user's authenticated session data and wallet address. It offers methods to sign messages, transactions, and send transactions from a user's social wallet, implementing the ethers v6 Signer class.

Installation

npm i @aarc-xyz/ethers-v6-signer

Usage

import { AarcEthersSigner, OpenAuthProvider } from "@aarc-xyz/ethers-v6-signer";

const rpc_url = 'your rpc url here';
const sessionKey = localStorage.getItem('sessionKey');

const signer = new AarcEthersSigner(rpc_url, {
  wallet_address: '<authenticated address>',
  sessionKey: sessionKey,
  chainId: 1
});

// Signing a message
const message = "Hello, world!";
const signature = await signer.signMessage(message);

// Signing a transaction
const transaction = {
  to: "0x...",
  value: ethers.parseEther("0.1"),
  gasLimit: 21000,
};

const signedTransaction = await signer.signTransaction(transaction);

// Sending a transaction
const transactionResponse = await signer.sendTransaction(transaction);

Contributing

We welcome contributions! Please read our Contributing Guide for details on how you can help improve OpenAuth.

For more detailed information on each package, please refer to their individual README files:

• Auth SDK README
• Auth Widget README
• Wallet Auth README
• Wallet Manager README
• Signer SDK Ethers V6 README

License

This project is licensed under the Apache License, Version 2.0. See the LICENSE file for more details.