owned this note
owned this note
Published
Linked with GitHub
# Integrating SafeAuth: A Comprehensive Developer's Guide
> Updated documentaion: https://web3auth.io/docs/account-abstraction/safeauth
## Install dependencies
```bash
npm i @safe-global/auth-kit
```
## Create a SafeAuthPack instance
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.
```typescript
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.
## Sign in to an Ethereum account
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**.
```typescript
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.
```typescript
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:**
```typescript
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.
```typescript
await safeAuthPack.signOut();
```
After authentication, use getProvider() to obtain the Ethereum provider instance, compatible with EIP-1193.
```typescript
safeAuthPack.getProvider();
```
## Signing and executing transactions using SafeAuthPack and Protocol Kit
Combine SafeAuthPack with the Protocol Kit to connect to a Safe and perform transactions.
```typescript
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);
```
## Sign messages using the `SafeAuthPack`
Sign arbitrary messages or transactions as a regular signing account using your preferred web3 library.
```typescript
// 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.
Sign in with Wallet
