diff --git a/.github/styles/config/vocabularies/default/accept.txt b/.github/styles/config/vocabularies/default/accept.txt index 420dc2e37..012784cdf 100644 --- a/.github/styles/config/vocabularies/default/accept.txt +++ b/.github/styles/config/vocabularies/default/accept.txt @@ -59,6 +59,7 @@ [Oo]nboarding [Oo]nchain [Oo]nramp +[Oo]penfort [Pp]ermissionless [Pp]olygon [Pp]ostgres diff --git a/pages/sdk/signers.mdx b/pages/sdk/signers.mdx index c99db3821..f2486d327 100644 --- a/pages/sdk/signers.mdx +++ b/pages/sdk/signers.mdx @@ -12,6 +12,7 @@ The following guides show how to create a signer account with different service - [Dynamic](./signers/dynamic.mdx) - [Magic](./signers/magic.mdx) +- [Openfort](./signers/openfort.mdx) - [Passkeys](./signers/passkeys.mdx) - [Privy](./signers/privy.mdx) - [Web3Auth](./signers/web3auth.mdx) diff --git a/pages/sdk/signers/_meta.json b/pages/sdk/signers/_meta.json index 9f66bf9c3..f0aee8470 100644 --- a/pages/sdk/signers/_meta.json +++ b/pages/sdk/signers/_meta.json @@ -1,6 +1,7 @@ { "dynamic": "Dynamic", "magic": "Magic", + "openfort": "Openfort", "passkeys": "Passkeys", "privy": "Privy", "web3auth": "Web3Auth" diff --git a/pages/sdk/signers/openfort.mdx b/pages/sdk/signers/openfort.mdx new file mode 100644 index 000000000..ec447860c --- /dev/null +++ b/pages/sdk/signers/openfort.mdx @@ -0,0 +1,203 @@ + + +import { Tabs, Steps, Callout } from 'nextra/components' + +# Openfort Signer + +In this guide, you will learn how to create an [Openfort](https://openfort.io) signer that can be added as a Safe owner and used to initialize any of the kits from the Safe\{Core\} SDK. + +Check out the [Safe Signers demo app](https://github.com/5afe/safe-signers) on GitHub to follow along this guide with the completed code. + +## Prerequisites + +- [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). +- An [Openfort account](https://dashboard.openfort.io) with a publishable key and Shield publishable key. + +## Install dependencies + +{/* */} + + + + ```bash + npm install @openfort/react @tanstack/react-query wagmi viem + ``` + + + ```bash + yarn add @openfort/react @tanstack/react-query wagmi viem + ``` + + + ```bash + pnpm add @openfort/react @tanstack/react-query wagmi viem + ``` + + + +{/* */} + +## Steps + + + + ### Imports + + Here are the necessary imports for this guide. + + {/* */} + + ```typescript + import { OpenfortProvider, OpenfortButton, useUser, useWallets, useOpenfort, AccountTypeEnum, AuthProvider, getDefaultConfig } from '@openfort/react' + import { WagmiProvider, createConfig } from 'wagmi' + import { QueryClient, QueryClientProvider } from '@tanstack/react-query' + import { createWalletClient, custom } from 'viem' + import { sepolia } from 'viem/chains' + ``` + + {/* */} + + ### Get the API Keys + + Create a new project in the [dashboard](https://dashboard.openfort.io) and get its publishable key. + + You will also need to get your Shield publishable key from the [Shield configuration](https://www.openfort.io/docs/products/embedded-wallet/react#shield-configuration). + + Once you have them, you need to initialize the following variables: + + {/* */} + + ```typescript + const OPENFORT_PUBLISHABLE_KEY = // ... + const SHIELD_PUBLISHABLE_KEY = // ... + ``` + + {/* */} + + ### Configure wagmi and React Query + + Openfort requires wagmi and React Query to be configured. Set up the wagmi configuration and create a query client: + + {/* */} + + ```typescript + const wagmiConfig = createConfig( + getDefaultConfig({ + appName: 'Safe Signers Demo', + chains: [sepolia], + ssr: true + }) + ) + + const queryClient = new QueryClient() + ``` + + {/* */} + + ### Initialize Openfort + + Openfort works with React hooks. This means you can wrap your app with the `OpenfortProvider`, `WagmiProvider`, and `QueryClientProvider` to have access to several React hooks like `useUser()` or `useWallets()` that will provide all the functionality. + + `OpenfortProvider` receives a `publishableKey`, `walletConfig` with the Shield configuration, and `uiConfig` with authentication options. Check [Openfort React SDK documentation](https://www.openfort.io/docs/products/embedded-wallet/react) to learn more about all the different configuration options. + + {/* */} + + ```typescript + + + + + + + + ``` + + {/* */} + + In this guide you will use the following variables and methods from the Openfort React hooks: + + {/* */} + + ```typescript + const { isAuthenticated } = useUser() + const { wallets } = useWallets() + const { client } = useOpenfort() + ``` + + {/* */} + + ### Login + + Openfort provides a pre-built UI component that handles authentication. Simply add the `` component to your app: + + {/* */} + + ```typescript + + ``` + + {/* */} + + This button provides a user-friendly interface for logging in using the authentication methods configured in your `OpenfortProvider` (email, Google, guest, etc.). The authentication state will be automatically managed by Openfort's React hooks. + + ### Get the provider and signer + + Once the user is logged in, you can get the `provider` and `signer`, which is the externally-owned account of the user that was derived from its credentials. + + To do that there is a `useEffect()` that is executed when the `isAuthenticated` and `wallets` variables have their values updated. Once `isAuthenticated` is `true` and `wallets` has a length greater than zero, you have access to the user's connected signer. + + {/* */} + + You can instantiate the provider using `viem` and get the signer address like so: + + ```typescript + useEffect(() => { + const init = async () => { + if (isAuthenticated && wallets.length > 0) { + const ethereumProvider = await client.embeddedWallet.getEthereumProvider() + + const provider = createWalletClient({ + chain: sepolia, + transport: custom(ethereumProvider) + }) + + const signer = wallets[0].address + } + } + init() + }, [isAuthenticated, wallets]) + ``` + + {/* */} + + With the `provider` and `signer` you are ready to instantiate any of the kits from the Safe\{Core\} SDK and set up or use this signer as a Safe owner. + + ### Logout + + The `` component automatically handles logout functionality. When the user is authenticated, the button will display logout options. + + + +## Recap and further reading + +After following this guide, you are able to create a Safe signer using Openfort and get the `provider` and `signer` required to initialize the kits from the Safe\{Core\} SDK. + +Learn more about Openfort by checking the following resources: + +- [Openfort website](https://openfort.io) +- [Openfort documentation](https://www.openfort.io/docs) +- [Openfort embedded wallet quickstart](https://www.openfort.io/docs/products/embedded-wallet/react) +