Integrate Web3Auth with the Aptos Blockchain
While using the Web3Auth Web SDK for a non-EVM chain like Aptos, you get a
standard provider from which you can obtain the private key of the user. Using this private key, you
can utilize the corresponding libraries of the blockchain to make calls like fetching the user's
account
, retrieving balance
, signing transactions
, sending transactions
, or interacting with
smart contracts. We will focus on Testnet for this guide.
Aptos Configuration and Enums
For configuring Aptos, we will use the AptosConfig
class from the @aptos-labs/ts-sdk
package.
The network parameter in AptosConfig
uses an enum, which allows us to select the network
environment (e.g., Testnet).
Here are the available networks in the enum:
declare enum Network {
MAINNET = "mainnet",
TESTNET = "testnet",
DEVNET = "devnet",
LOCAL = "local",
CUSTOM = "custom",
}
For this guide, we'll be using the TESTNET
network.
import { Aptos, AptosConfig, Network } from "@aptos-labs/ts-sdk";
// Initialize the Aptos SDK with Testnet configuration
const config = new AptosConfig({ network: Network.TESTNET });
const aptos = new Aptos(config);
Installation
To begin, install the Aptos SDK:
- npm
- Yarn
- pnpm
npm install --save @aptos-labs/ts-sdk
yarn add @aptos-labs/ts-sdk
pnpm add @aptos-labs/ts-sdk
Initializing Provider
Getting the chainConfig
- Mainnet
- Testnet
const chainConfig = {
chainNamespace: "other",
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/http/aptos/v1",
displayName: "Aptos Mainnet",
blockExplorerUrl: "https://explorer.aptoslabs.com/",
ticker: "APT",
tickerName: "Aptos",
};
const chainConfig = {
chainNamespace: "other",
chainId: "0x7E6",
rpcTarget: "https://rpc.ankr.com/http/aptos_testnet/v1",
displayName: "Aptos Testnet",
blockExplorerUrl: "https://explorer.aptoslabs.com/testnet",
ticker: "APT",
tickerName: "Aptos",
};
Initializing and instantiating the Web3Auth SDK
- PnP Modal SDK
- PnP NoModal SDK
- CoreKit SFA Web SDK
import { Web3Auth } from "@web3auth/modal";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from "@web3auth/base";
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig: chainConfig },
});
const web3auth = new Web3Auth({
// Get it from Web3Auth Dashboard
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider: privateKeyProvider,
});
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { AuthAdapter } from "@web3auth/auth-adapter";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from "@web3auth/base";
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig },
});
const web3auth = new Web3AuthNoModal({
clientId, // Get it from Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
});
const authAdapter = new AuthAdapter();
web3auth.configureAdapter(authAdapter);
import { Web3Auth } from "@web3auth/single-factor-auth";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from "@web3auth/base";
const web3auth = new Web3Auth({
clientId, // Get your Client ID from Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
});
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig },
});
Getting the Web3Auth provider
After initializing Web3Auth, the next step is to initialize the provider and use it for your operations.
- PnP Modal SDK
- PnP NoModal SDK
- CoreKit SFA Web SDK
// Initialize for PnP Modal SDK
await web3auth.initModal();
// Trigger the login
await web3auth.connect();
// Get the provider
const provider = web3auth.provider;
// Continue using the `provider`
// Initialize for PnP NoModal SDK
await web3auth.init();
// Trigger the login
await web3auth.connectTo("auth");
// Get the provider
const provider = web3auth.provider;
// Continue using the `provider`
// Initialize for CoreKit SFA Web SDK
await web3auth.init();
// Trigger the login
await web3auth.connect();
// Get the provider
const provider = web3auth.provider;
// Continue using the `provider`
Get Account and Key
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native provider for Aptos, we need to directly use the private key for making the RPC calls.
Using the function, web3auth.provider.request({method: "private_key"})
from Web3Auth provider, the
application can have access to the user's private key. However, we cannot use this key with Aptos EC
Curve specific signing functions, hence, we first derive the Aptos Account using the
getAptosAccount()
function.
On the underhood, it uses the helper functions from the aptos
library to derive the key pair.
import { Account, Aptos, AptosConfig, Network } from "@aptos-labs/ts-sdk";
/*
Use code from the above InitializeWeb3Auth and get provider steps
*/
const privateKey = await web3authProvider.request({ method: "private_key" });
const privateKeyUint8Array = new Uint8Array(
privateKey.match(/.{1,2}/g)!.map((byte: any) => parseInt(byte, 16)),
);
const aptosAccount = Account.fromPrivateKey({ privateKey: privateKeyUint8Array });
const aptosAccountAddress = aptosAccount.accountAddress.toString();