diff --git a/gator-sidebar.js b/gator-sidebar.js
index ff39956a4cd..cef8a1467ea 100644
--- a/gator-sidebar.js
+++ b/gator-sidebar.js
@@ -62,6 +62,7 @@ const sidebar = {
'guides/smart-accounts/signers/embedded-wallets',
'guides/smart-accounts/signers/dynamic',
'guides/smart-accounts/signers/eoa-wallets',
+ 'guides/smart-accounts/signers/openfort',
'guides/smart-accounts/signers/passkey',
'guides/smart-accounts/signers/privy',
],
diff --git a/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/index.mdx b/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/index.mdx
index b481519ded2..2e489111f38 100644
--- a/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/index.mdx
+++ b/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/index.mdx
@@ -1,7 +1,16 @@
---
description: Learn how to configure signers for MetaMask Smart Accounts.
keywords:
- [signers, metamask smart accounts, smart account, embedded wallets, web3auth, dynamic, privy]
+ [
+ signers,
+ metamask smart accounts,
+ smart account,
+ embedded wallets,
+ web3auth,
+ dynamic,
+ privy,
+ openfort,
+ ]
---
import CardList from '@site/src/components/CardList'
@@ -45,6 +54,11 @@ See the following guides to learn how to configure different signers:
title: 'EOA (e.g. MetaMask)',
description: 'Learn how to use EOAs like MetaMask with MetaMask Smart Accounts.',
},
+ {
+ href: '/smart-accounts-kit/development/guides/smart-accounts/signers/openfort',
+ title: 'Openfort',
+ description: 'Learn how to use Openfort with MetaMask Smart Accounts.',
+ },
{
href: '/smart-accounts-kit/development/guides/smart-accounts/signers/passkey',
title: 'Passkey',
diff --git a/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/openfort.md b/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/openfort.md
new file mode 100644
index 00000000000..778b62717c6
--- /dev/null
+++ b/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/openfort.md
@@ -0,0 +1,140 @@
+---
+description: Learn how to use Openfort signer with MetaMask Smart Accounts.
+sidebar_label: Openfort
+keywords: [openfort, smart account, signer, metamask smart account]
+---
+
+import GlossaryTerm from '@theme/GlossaryTerm';
+
+# Use Openfort with MetaMask Smart Accounts
+
+[Openfort](https://www.openfort.io/docs) provides an embedded wallet solution that enables seamless social, email, and passkey sign-in for Web3 applications, making user onboarding easier. MetaMask Smart Accounts is a signer-agnostic implementation
+that allows you to use Openfort's EOA wallet as a signer for smart accounts.
+
+:::info
+This guide supports React and React-based frameworks.
+:::
+
+## Prerequisites
+
+- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later.
+- Install [Yarn](https://yarnpkg.com/),
+ [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager.
+- Create an [Openfort project](https://dashboard.openfort.io) and note your **Publishable key** and **Shield publishable key**.
+
+## Steps
+
+### 1. Install dependencies
+
+Install the following dependencies:
+
+```bash npm2yarn
+npm install @openfort/react @metamask/smart-accounts-kit @tanstack/react-query wagmi viem
+```
+
+### 2. Create the Openfort provider
+
+In this step, you'll configure the `OpenfortProvider` component to provide Openfort's context
+to your application. You'll also use Openfort's `OpenfortWagmiBridge` component and `getDefaultConfig` helper to integrate Openfort with Wagmi. This
+bridge enables you to use Wagmi hooks with Openfort.
+
+Once you have created the `OpenfortAppProvider`, you must wrap it at the root of your application so
+that the rest of your application has access to Openfort's context.
+
+Set `accountType` to `AccountTypeEnum.EOA` so that the embedded wallet is created as an EOA, which
+acts as the signer for the smart account.
+
+For an advanced configuration, see Openfort's [documentation](https://www.openfort.io/docs) for configuring appearance, login methods, and wallet recovery.
+
+
+
+
+```ts
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactNode } from "react";
+import { WagmiProvider } from "wagmi";
+import { AccountTypeEnum, OpenfortProvider } from "@openfort/react";
+import { OpenfortWagmiBridge } from "@openfort/react/wagmi";
+import { wagmiConfig, queryClient } from "./config.ts"
+
+export function OpenfortAppProvider({ children }: { children: ReactNode }) {
+ return (
+
+
+
+ ",
+ ethereum: {
+ // Create the embedded wallet as an EOA, which acts as
+ // the signer for the smart account.
+ accountType: AccountTypeEnum.EOA,
+ },
+ }}
+ >
+ {children}
+
+
+
+
+ );
+}
+```
+
+
+
+
+
+```ts
+import { QueryClient } from '@tanstack/react-query'
+import { createConfig } from 'wagmi'
+import { getDefaultConfig } from '@openfort/react/wagmi'
+import { sepolia } from 'viem/chains'
+
+export const queryClient = new QueryClient()
+
+export const wagmiConfig = createConfig(
+ getDefaultConfig({
+ appName: 'MetaMask Smart Accounts demo',
+ chains: [sepolia],
+ ssr: true,
+ })
+)
+```
+
+
+
+
+### 3. Create a smart account
+
+Once the user has connected their wallet, use the [Wallet Client](https://viem.sh/docs/clients/wallet) from Wagmi as the signer to create a
+.
+
+```ts
+import { Implementation, toMetaMaskSmartAccount } from '@metamask/smart-accounts-kit'
+import { useConnection, usePublicClient, useWalletClient } from 'wagmi'
+
+const { address } = useConnection()
+const publicClient = usePublicClient()
+const { data: walletClient } = useWalletClient()
+
+// Additional check to make sure Openfort is connected
+// and values are available.
+if (!address || !walletClient || !publicClient) {
+ // Handle the error case
+}
+
+const smartAccount = await toMetaMaskSmartAccount({
+ client: publicClient,
+ implementation: Implementation.Hybrid,
+ deployParams: [address, [], [], []],
+ deploySalt: '0x',
+ signer: { walletClient },
+})
+```
+
+## Next steps
+
+- See how to [send a user operation](../send-user-operation.md).
+- To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md).
diff --git a/gator_versioned_sidebars/version-1.6.0-sidebars.json b/gator_versioned_sidebars/version-1.6.0-sidebars.json
index 187fc4591d4..186f59874ce 100644
--- a/gator_versioned_sidebars/version-1.6.0-sidebars.json
+++ b/gator_versioned_sidebars/version-1.6.0-sidebars.json
@@ -64,6 +64,7 @@
"guides/smart-accounts/signers/embedded-wallets",
"guides/smart-accounts/signers/dynamic",
"guides/smart-accounts/signers/eoa-wallets",
+ "guides/smart-accounts/signers/openfort",
"guides/smart-accounts/signers/passkey",
"guides/smart-accounts/signers/privy"
]
diff --git a/smart-accounts-kit/guides/smart-accounts/signers/index.mdx b/smart-accounts-kit/guides/smart-accounts/signers/index.mdx
index b481519ded2..2e489111f38 100644
--- a/smart-accounts-kit/guides/smart-accounts/signers/index.mdx
+++ b/smart-accounts-kit/guides/smart-accounts/signers/index.mdx
@@ -1,7 +1,16 @@
---
description: Learn how to configure signers for MetaMask Smart Accounts.
keywords:
- [signers, metamask smart accounts, smart account, embedded wallets, web3auth, dynamic, privy]
+ [
+ signers,
+ metamask smart accounts,
+ smart account,
+ embedded wallets,
+ web3auth,
+ dynamic,
+ privy,
+ openfort,
+ ]
---
import CardList from '@site/src/components/CardList'
@@ -45,6 +54,11 @@ See the following guides to learn how to configure different signers:
title: 'EOA (e.g. MetaMask)',
description: 'Learn how to use EOAs like MetaMask with MetaMask Smart Accounts.',
},
+ {
+ href: '/smart-accounts-kit/development/guides/smart-accounts/signers/openfort',
+ title: 'Openfort',
+ description: 'Learn how to use Openfort with MetaMask Smart Accounts.',
+ },
{
href: '/smart-accounts-kit/development/guides/smart-accounts/signers/passkey',
title: 'Passkey',
diff --git a/smart-accounts-kit/guides/smart-accounts/signers/openfort.md b/smart-accounts-kit/guides/smart-accounts/signers/openfort.md
new file mode 100644
index 00000000000..778b62717c6
--- /dev/null
+++ b/smart-accounts-kit/guides/smart-accounts/signers/openfort.md
@@ -0,0 +1,140 @@
+---
+description: Learn how to use Openfort signer with MetaMask Smart Accounts.
+sidebar_label: Openfort
+keywords: [openfort, smart account, signer, metamask smart account]
+---
+
+import GlossaryTerm from '@theme/GlossaryTerm';
+
+# Use Openfort with MetaMask Smart Accounts
+
+[Openfort](https://www.openfort.io/docs) provides an embedded wallet solution that enables seamless social, email, and passkey sign-in for Web3 applications, making user onboarding easier. MetaMask Smart Accounts is a signer-agnostic implementation
+that allows you to use Openfort's EOA wallet as a signer for smart accounts.
+
+:::info
+This guide supports React and React-based frameworks.
+:::
+
+## Prerequisites
+
+- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later.
+- Install [Yarn](https://yarnpkg.com/),
+ [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager.
+- Create an [Openfort project](https://dashboard.openfort.io) and note your **Publishable key** and **Shield publishable key**.
+
+## Steps
+
+### 1. Install dependencies
+
+Install the following dependencies:
+
+```bash npm2yarn
+npm install @openfort/react @metamask/smart-accounts-kit @tanstack/react-query wagmi viem
+```
+
+### 2. Create the Openfort provider
+
+In this step, you'll configure the `OpenfortProvider` component to provide Openfort's context
+to your application. You'll also use Openfort's `OpenfortWagmiBridge` component and `getDefaultConfig` helper to integrate Openfort with Wagmi. This
+bridge enables you to use Wagmi hooks with Openfort.
+
+Once you have created the `OpenfortAppProvider`, you must wrap it at the root of your application so
+that the rest of your application has access to Openfort's context.
+
+Set `accountType` to `AccountTypeEnum.EOA` so that the embedded wallet is created as an EOA, which
+acts as the signer for the smart account.
+
+For an advanced configuration, see Openfort's [documentation](https://www.openfort.io/docs) for configuring appearance, login methods, and wallet recovery.
+
+
+
+
+```ts
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactNode } from "react";
+import { WagmiProvider } from "wagmi";
+import { AccountTypeEnum, OpenfortProvider } from "@openfort/react";
+import { OpenfortWagmiBridge } from "@openfort/react/wagmi";
+import { wagmiConfig, queryClient } from "./config.ts"
+
+export function OpenfortAppProvider({ children }: { children: ReactNode }) {
+ return (
+
+
+
+ ",
+ ethereum: {
+ // Create the embedded wallet as an EOA, which acts as
+ // the signer for the smart account.
+ accountType: AccountTypeEnum.EOA,
+ },
+ }}
+ >
+ {children}
+
+
+
+
+ );
+}
+```
+
+
+
+
+
+```ts
+import { QueryClient } from '@tanstack/react-query'
+import { createConfig } from 'wagmi'
+import { getDefaultConfig } from '@openfort/react/wagmi'
+import { sepolia } from 'viem/chains'
+
+export const queryClient = new QueryClient()
+
+export const wagmiConfig = createConfig(
+ getDefaultConfig({
+ appName: 'MetaMask Smart Accounts demo',
+ chains: [sepolia],
+ ssr: true,
+ })
+)
+```
+
+
+
+
+### 3. Create a smart account
+
+Once the user has connected their wallet, use the [Wallet Client](https://viem.sh/docs/clients/wallet) from Wagmi as the signer to create a
+.
+
+```ts
+import { Implementation, toMetaMaskSmartAccount } from '@metamask/smart-accounts-kit'
+import { useConnection, usePublicClient, useWalletClient } from 'wagmi'
+
+const { address } = useConnection()
+const publicClient = usePublicClient()
+const { data: walletClient } = useWalletClient()
+
+// Additional check to make sure Openfort is connected
+// and values are available.
+if (!address || !walletClient || !publicClient) {
+ // Handle the error case
+}
+
+const smartAccount = await toMetaMaskSmartAccount({
+ client: publicClient,
+ implementation: Implementation.Hybrid,
+ deployParams: [address, [], [], []],
+ deploySalt: '0x',
+ signer: { walletClient },
+})
+```
+
+## Next steps
+
+- See how to [send a user operation](../send-user-operation.md).
+- To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md).