Twitter Auth

Authorize transactions with Twitter.


The Twitter auth type allows FunWallet transactions to be authorized by a Twitter account sign-in. This auth type will be done via a frontend interface. See an example project here.


Create a FunWallet with a Twitter account owner

The following example showcases how to create a React app with a button. Upon pressing the button, a user is redirected to Twitter's sign-in page. Once they have authenticated with Twitter, a FunWallet is created with the signed-in Twitter account as the owner.

,
callback.js
import { ethers } from "ethers"
import { FunWallet } from "fun-wallet"
import { FunWallet, configureEnvironment from "fun-wallet"
import { MultiAuthEoa } from "fun-wallet/auth"
import { Magic } from 'magic-sdk';
import { OAuthExtension } from '@magic-ext/oauth';
import { useEffect, useState } from "react";
const Callback = (props) => {
const [result, setResult] = useState("")
const [funWalletAddr, setFunWalletAddr] = useState("")
const magic = new Magic('pk_live_846F1095F0E1303C', {
extensions: [new OAuthExtension()],
});
useEffect(() => {
const configureFunWalletEnv = async () => {
const options = {
chain: 5, // 5 for Goerli, 1 for Mainnet
apiKey: "MYny3w7xJh6PRlRgkJ9604sHouY2MTke6lCPpSHq"
}
await configureEnvironment(options)
}
configureFunWalletEnv()
})
useEffect(() => {
if (magic.oauth) {
magic.oauth.getRedirectResult().then((result) => {
setResult(result)
})
}
}, [])
useEffect(() => {
if (result) {
buildWallet(result)
}
}, [result])
const getAuthId = (result) => {
let authId = result.oauth.userInfo.email;
if (result.oauth.provider === "twitter") {
authId = result.oauth.userInfo.preferredUsername
}
return result.oauth.provider+"###"+authId; // e.g., twitter###elonmusk
}
const getFunWallet = async (uniqueId) => {
return new FunWallet({ uniqueId, index: 0 }) // No.0 wallet for the uniqueId
}
const buildWallet = async (result) => {
const authId = getAuthId(result)
const publicAddress = result.magic.userMetadata.publicAddress
const provider = new ethers.providers.Web3Provider(magic.rpcProvider);
const auth = new MultiAuthEoa({ provider, authIds: [[authId, publicAddress]] })
const funWallet = await getFunWallet(await auth.getUniqueId())
setFunWalletAddr(await funWallet.getAddress())
}
return (
<div className="callback">
<p>The Fun Wallet is generated at: {funWalletAddr}</p>
</div>
)
}
export default Callback;