Byzanlink Auth

Introduction

Byzanlink Auth SDK is a wallet infrastructure powered by Web3Auth, offering a white-labeled solution built on Web3Auth's MPC Core Kit SDK.

Web3Auth is not a standalone wallet, but rather a versatile wallet infrastructure that can be effortlessly integrated into any application. It addresses key challenges in user onboarding and key management, making it easier for decentralized applications (dApps) and blockchain wallets to provide customized login flows.

With Byzanlink Auth, users can log in using popular platforms like Twitter or Google. Once authenticated, a Byzanlink smart account is automatically created for them, enabling immediate interaction with your dApp.

Integration

Install the Byzanlink Smart Account SDK

npm i --save @byzanlink-tech/aa-sdk

Install the required Byzanlink Web3Auth packages and other dependencies

npm i --save @byzanlink-tech/aa-wallet-auth @toruslabs/tss-dkls-lib jwt-decode

Here’s an example of how to quickly set up social logins using Web3Auth:

import { useState } from "react";
import './App.css'
import { ByzanlinkAAAuth, CHAIN_NAMESPACE, WALLET_INFRA_PROVIDER } from '@byzanlink-tech/aa-wallet-auth';
import { ByzanlinkAASdk, Web3WalletProvider } from "@byzanlink-tech/aa-sdk";
import { tssLib } from "@toruslabs/tss-dkls-lib";
import { jwtDecode } from 'jwt-decode';

const apiKey = process.env.REACT_APP_API_KEY; // Get api key from https://dev.byzanlink.com/#/apps
const policyId = process.env.REACT_APP_POLICY_ID; // Get the policy ID of Gas Manager from https://dev.byzanlink.com/#/gas-manager
const web3AuthClientId = process.env.REACT_APP_WEB3AUTH_CLIENT_ID;
const web3AuthNetwork = process.env.REACT_APP_WEB3AUTH_NETWORK;
const web3AuthVerifier = process.env.REACT_APP_WEB3AUTH_VERIFIER;
const web3AuthSubVerifier = process.env.REACT_APP_WEB3AUTH_SUB_VERIFIER;

export default function App() {
  const [smartAccount, setSmartAccount] = useState<string | null>(null);
  const [balance, setBalance] = useState<string | null>(null);

  const connect = async () => {
    try {

      /** Wallet Provider - Start */

      // Update the chain config based on the selected chain
      const chainConfig = {
        chainNamespace: CHAIN_NAMESPACE.EIP155,
        chainId: "0x13882", // Amoy Chain ID
        rpcTarget: "https://rpc-amoy.polygon.technology/",
        displayName: "Polygon Amoy",
        blockExplorer: "https://www.oklink.com/amoy/",
        ticker: "MATIC",
        tickerName: "Polygon Matic",
      };

      const token = '<jwt_token>'; // JWT token of the user for which the smart account needs to be fetched
      const decodedToken = jwtDecode(token) as any;

      // Web3Auth Project details
      const walletOptions = {
        web3AuthClientId,
        web3AuthNetwork,
        storage: window.localStorage,
        manualSync: true,
        tssLib: tssLib,
      }

      // Web3Auth Project's Custom Authentication details
      const jwtLoginParams = {
        verifier: web3AuthVerifier,
        subVerifier: web3AuthSubVerifier,
        verifierId: decodedToken?.email,
        idToken: token,
      }

      // Instantiate Byzanlink Auth SDK
      const byzanlinkAuth = new ByzanlinkAAAuth({
        walletProvider: WALLET_INFRA_PROVIDER.WEB3_AUTH,
        walletInfraChainConfig: chainConfig,
        walletInfraOptions: walletOptions,
        jwtLoginParams: jwtLoginParams
      });

      const provider = await byzanlinkAuth.getProvider();
      const walletProvider = await Web3WalletProvider.connect(provider);

      /** Wallet Provider - End */

      // Instantiate Byzanlink AA SDK
      const byzanlinkAASdk = new ByzanlinkAASdk(
        walletProvider,
        {
          chainId: Number('80002'),
          apiKey, // Get the API Key from Byzanlink dashboard
          policyId // Optional - Get the policy Id from Byzanlink dashboard
        })

      // Smart Account
      const address = await byzanlinkAASdk.getCounterFactualAddress();
      setSmartAccount(address);

      // Wallet balance
      setBalance(await byzanlinkAASdk.getNativeBalance())
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px", alignItems: 'center', justifyContent: 'start', padding: '96px' }} >
      <div style={{ fontWeight: 'bold', fontSize: '2rem', color: '#1B82FB' }}>
        Byzanlink Smart Account
      </div>
      {
        smartAccount ? (
          <>
            {" "}
            < span > Network: Amoy </span>
            < span > Smart Account Address: {smartAccount} </span>
            < span > Balance: {balance} </span>
          </>
        ) : (
          <>
            <button
              className="w-[10rem] h-[3rem] bg-white border border-[#1B82FB] text-[#1B82FB] font-normal rounded-lg"
              style={{ width: "10rem", height: '3rem', background: 'white', color: '#1B82FB', border: "1px solid #1B82FB", borderRadius: '0.5rem', cursor: 'pointer' }}
              onClick={connect}
            >
              Connect
            </button>
          </>
        )
      }
    </div>
  );
}

Fixing Bundler Issues

While using Byzanlink AA Auth in React, you may run into issues building. This issue occurs because some core packages like eccrypto have certain dependencies which are not present within the browser build environment.

Troubleshooting

To solve this, please have a look at our troubleshooting pages:

• Webpack 5 Issues