Openfort

npm install @openfort/react @rhinestone/sdk viem

'use client'

import {
  AccountTypeEnum,
  AuthProvider,
  OpenfortProvider,
} from '@openfort/react'
import { sepolia } from 'viem/chains'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <OpenfortProvider
      publishableKey={process.env.NEXT_PUBLIC_OPENFORT_PUBLISHABLE_KEY!}
      walletConfig={{
        shieldPublishableKey:
          process.env.NEXT_PUBLIC_SHIELD_PUBLISHABLE_KEY!,
        createEncryptedSessionEndpoint: '/api/openfort/encryption-session',
        ethereum: {
          accountType: AccountTypeEnum.EOA,
          chainId: sepolia.id,
        },
      }}
      uiConfig={{
        authProviders: [
          AuthProvider.EMAIL_OTP,
          AuthProvider.GOOGLE,
          AuthProvider.GUEST,
        ],
      }}
    >
      {children}
    </OpenfortProvider>
  )
}

import { RhinestoneSDK } from '@rhinestone/sdk'

export const rhinestone = new RhinestoneSDK({
  auth: {
    mode: 'experimental_jwt',
    accessToken: async () => {
      const response = await fetch('/api/auth/access-token', {
        credentials: 'include',
      })
      if (!response.ok) throw new Error('Unable to authenticate with Rhinestone')
      return ((await response.json()) as { token: string }).token
    },
  },
})

import { useUser } from '@openfort/react'
import { useEthereumEmbeddedWallet } from '@openfort/react/ethereum'
import { walletClientToAccount } from '@rhinestone/sdk/utils'
import { createWalletClient, custom } from 'viem'
import { sepolia } from 'viem/chains'
import { rhinestone } from './rhinestone'

export function ConnectRhinestoneButton() {
  const { isAuthenticated } = useUser()
  const wallet = useEthereumEmbeddedWallet({ chainId: sepolia.id })

  async function connect() {
    if (!isAuthenticated || wallet.status !== 'connected') return

    const walletClient = createWalletClient({
      account: wallet.address,
      chain: sepolia,
      transport: custom(wallet.provider),
    })
    const owner = walletClientToAccount(walletClient)
    const account = await rhinestone.createAccount({
      owners: { type: 'ecdsa', accounts: [owner] },
    })

    console.log(account.getAddress())
  }

  return <button onClick={connect}>Create account</button>
}