Updated documentaion: https://web3auth.io/docs/account-abstraction/safeauth
npm i @safe-global/auth-kit
To integrate SafeAuth into your application, start by creating an instance of the SafeAuthPack class from the @safe-global/auth-kit
package. This instance will be the entry point for managing authentication and transactions.
import {
SafeAuthPack,
SafeAuthConfig,
SafeAuthInitOptions,
} from '@safe-global/auth-kit';
const safeAuthInitOptions: SafeAuthInitOptions = {
showWidgetButton: false,
chainConfig: {
blockExplorerUrl: 'https://etherscan.io',
chainId: '0x5',
displayName: 'Ethereum Goerli',
rpcTarget: 'https://rpc.ankr.com/eth_goerli',
ticker: 'ETH',
tickerName: 'Ethereum',
},
};
const safeAuthPack = new SafeAuthPack();
await safeAuthPack.init(safeAuthInitOptions);
You should always call the init()
method afterwards before interacting with the pack. The init method initialize the provided Web3Auth SDK and Safe services. It creates an embedded browser wallet within an iframe, establishing communication through the internally generated EIP-1193 provider.
Initiate the authentication process by calling the signIn() method. This is typically triggered when a user clicks on a "Sign In" button on your web page.
After successfully signing in, you will create a new Ethereum Wallet. This wallet will be used for all future logins and can be shared across different applications.
const authKitSignData = await safeAuthPack.signIn();
The returned authKitSignData contains the user's Ethereum address and associated Safe addresses.
This method currently returns the Safe addresses which the EOA is the owner of. It does not create a Safe.
AuthKitSignInData {
eoa: string // The safe signer
safes?: string[] // The list of associated Safe addresses in the chain
}
To create a Safe, use the following code:
import { ethers, BrowserProvider, Eip1193Provider } from 'ethers';
import { EthersAdapter, SafeFactory } from '@safe-global/protocol-kit';
const provider = new BrowserProvider(safeAuthPack?.getProvider() as Eip1193Provider)
const signer = await provider.getSigner()
const ethAdapter = new EthersAdapter({
ethers,
signerOrProvider: signer
} as any)
const safeFactory = await SafeFactory.create({ ethAdapter });
const safe: Safe = await safeFactory.deploySafe({
safeAccountConfig: { threshold: 1, owners: [safeAuthSignInResponse?.eoa as string] }
});
console.log('SAFE Created!', await safe.getAddress());
To sign out the user, use the signOut() method.
await safeAuthPack.signOut();
After authentication, use getProvider() to obtain the Ethereum provider instance, compatible with EIP-1193.
safeAuthPack.getProvider();
Combine SafeAuthPack with the Protocol Kit to connect to a Safe and perform transactions.
import { ethers, BrowserProvider, Eip1193Provider } from "ethers";
import { EthersAdapter } from "@safe-global/protocol-kit";
const provider = new BrowserProvider(safeAuthPack?.getProvider() as Eip1193Provider);
const signer = await provider.getSigner();
// Create the Safe EthersAdapter
const ethAdapter = new EthersAdapter({
ethers,
signerOrProvider: signer || provider,
});
const safeAddress = safeAuthSignInResponse?.safes?.[0] || "0x";
// Instantiate the protocolKit
const protocolKit = await Safe.create({
ethAdapter,
safeAddress,
});
// Create a Safe transaction with the provided parameters
const safeTransactionData: MetaTransactionData = {
to: ethers.getAddress(safeAuthSignInResponse?.eoa || "0x"),
data: "0x",
value: ethers.parseUnits("0.0001", "ether").toString(),
};
const safeTransaction = await protocolKit.createTransaction({
safeTransactionData,
});
// Sign transaction
const tx = await protocolKit.signTransaction(safeTransaction);
// Execute the transaction
const txResult = await protocolKit.executeTransaction(tx);
SafeAuthPack
Sign arbitrary messages or transactions as a regular signing account using your preferred web3 library.
// Using web3
const web3 = new Web3(safeAuthPack.getProvider());
await web3.eth.sendTransaction(tx);
await web3.eth.signTransaction(tx);
const message = 'Safe meets Web3Auth';
const address = '0x...';
await web3.eth.personal.sign(message, address);
// Using ethers
const provider = new BrowserProvider(safeAuthPack?.getProvider() as Eip1193Provider)
const signer = await provider.getSigner()
await signer.sendTransaction(tx);
await signer.signTransaction(tx);
await signer.signMessage(message);
This integration leverages the Web3Auth Wallet Services behind the scenes, offering a seamless and secure authentication experience for users.
or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Syncing