Integrate Web3Auth with the Algorand Blockchain
While using the Web3Auth Web SDK for a non-EVM chain like
Algorand you get a standard provider from which you can get the
private key of the user. Using this private key, you can use the corresponding libraries of the
blockchain to make blockchain calls like getting the user's account
, fetch balance
,
sign transaction
, send transaction
, read
from and write
to the smart contract, etc. We have
highlighted a few methods here to get you started quickly on that.
This reference is for the Web
, however, you can use Algorand on other Mobile and Gaming Platforms
as well. Please follow our reference for EVM Blockchains, and similarly
use Algorand libraries that support the platforms to use the private key and make blockchain calls
accordingly.
Installation
- npm
- Yarn
- pnpm
npm install --save algosdk
yarn add algosdk
pnpm add algosdk
Initializing Provider
Getting the chainConfig
- Mainnet
- Testnet
const chainConfig = {
chainNamespace: "other",
chainId: "Algorand", //
rpcTarget: "https://api.algoexplorer.io",
// Avoid using public rpcTarget in production.
// Use services like PureStake, AlgoExplorer API, etc.
displayName: "Algorand Mainnet",
blockExplorerUrl: "https://algoexplorer.io",
ticker: "ALGO",
tickerName: "Algorand",
};
const chainConfig = {
chainNamespace: "other",
chainId: "0x3E9", //
rpcTarget: "https://api.algoexplorer.io",
// Avoid using public rpcTarget in production.
// Use services like PureStake, AlgoExplorer API, etc.
displayName: "Algorand Testnet",
blockExplorerUrl: "https://testnet.algoexplorer.io",
ticker: "tALGO",
tickerName: "Algorand",
};
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`
After logging in, the Web3Auth instance will provide you with information regarding the user that is logged in. This information is obtained directly from the JWT token and is not stored by Web3Auth. Therefore, this information can only be accessed through social logins after the user has logged into your application.
const user = await web3auth.getUserInfo(); // web3auth instance
Get Account and KeyPair
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native provider for Algorand, we need to directly use the private key to make 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
Algorand-specific signing functions, hence, we first derive the Algorand Key using the
getAlgorandKeyPair()
function.
On the underhood, it uses the algosdk.secretKeyToMnemonic()
function, where we need to pass the
Buffer.from(privateKey, "hex")
, ie. the hexadecimal to Uint8Array converted private key. We get a
mnemonic seed phrase that can be used to derive the key pair using the
algosdk.mnemonicToSecretKey()
, this returns a key pair. We can use the returned private key pair
from this and use it on Algorand transactions.
import { IProvider } from "@web3auth/base";
import algosdk from "algosdk";
/*
Use code from the above Initializing Provider here
*/
// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });
// derive the Algorand Key Pair from the private key
var passphrase = algosdk.secretKeyToMnemonic(Buffer.from(privateKey, "hex"));
var keyPair = algosdk.mnemonicToSecretKey(passphrase);
// keyPair.addr is the account address.
const account = keyPair.addr;
Get Balance
import { IProvider } from "@web3auth/base";
import algosdk from "algosdk";
/*
Use code from the above Initializing Provider here
*/
// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });
// derive the Algorand Key Pair from the private key
var passphrase = algosdk.secretKeyToMnemonic(Buffer.from(privateKey, "hex"));
var keyPair = algosdk.mnemonicToSecretKey(passphrase);
// keyPair.addr is the account address.
const account = keyPair.addr;
// Making a connection to the Algorand TestNet
const algodToken = {
"x-api-key": "YOUR_ALGOD_API_KEY",
};
const algodServer = "https://testnet-algorand.api.purestake.io/ps2"; // for testnet
const algodPort = "";
const algodClient = new algosdk.Algodv2(algodToken, algodServer, algodPort);
const balance = await client.accountInformation(keyPair.addr).do();
Send Transaction
import { IProvider } from "@web3auth/base";
import algosdk from "algosdk";
/*
Use code from the above Initializing Provider here
*/
// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });
// derive the Algorand Key Pair from the private key
var passphrase = algosdk.secretKeyToMnemonic(Buffer.from(privateKey, "hex"));
var keyPair = algosdk.mnemonicToSecretKey(passphrase);
// keyPair.addr is the account address.
const account = keyPair.addr;
// Making a connection to the Algorand TestNet
const algodToken = {
"x-api-key": "YOUR_ALGOD_API_KEY",
};
const algodServer = "https://testnet-algorand.api.purestake.io/ps2"; // for testnet
const algodPort = "";
const algodClient = new algosdk.Algodv2(algodToken, algodServer, algodPort);
// Creating the transaction
const params = await client.getTransactionParams().do();
const enc = new TextEncoder();
const message = enc.encode("Web3Auth says hello!");
// You need to have some funds in your account to send a transaction
// You can get some testnet funds here: https://bank.testnet.algorand.network/
const txn = algosdk.makePaymentTxnWithSuggestedParams(
keyPair.addr, // sender
keyPair.addr, // receiver
1000,
undefined,
message,
params,
);
let signedTxn = algosdk.signTransaction(txn, keyPair.sk);
const txHash = await client.sendRawTransaction(signedTxn.blob).do();
Sign Message
import { IProvider } from "@web3auth/base";
import algosdk from "algosdk";
/*
Use code from the above Initializing Provider here
*/
// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });
// derive the Algorand Key Pair from the private key
var passphrase = algosdk.secretKeyToMnemonic(Buffer.from(privateKey, "hex"));
var keyPair = algosdk.mnemonicToSecretKey(passphrase);
// keyPair.addr is the account address.
const account = keyPair.addr;
// Making a connection to the Algorand TestNet
const algodToken = {
"x-api-key": "YOUR_ALGOD_API_KEY",
};
const algodServer = "https://testnet-algorand.api.purestake.io/ps2"; // for testnet
const algodPort = "";
const algodClient = new algosdk.Algodv2(algodToken, algodServer, algodPort);
// Generating the message to sign
const params = await client.getTransactionParams().do();
const enc = new TextEncoder();
const message = enc.encode("Web3Auth says hello!");
const txn = algosdk.makePaymentTxnWithSuggestedParams(
keyPair.addr,
keyPair.addr,
0,
undefined,
message,
params,
);
let signedTxn = algosdk.signTransaction(txn, keyPair.sk);
let txId = signedTxn.txID;