How to Add Authentication to Your React App with Openfort Kit

Authentication can be a pain to build from scratch. But with Openfort Kit, you get a solid auth system that works with both traditional logins and Web3 wallets. Here's how to set it up in React.

Check out the full documentation for more details and support

What You Need

Before we start, make sure you have:

Some React and TypeScript knowledge
Node.js v20 or higher
Your favorite code editor
An Openfort account (sign up at dashboard.openfort.xyz)

What We're Building

When we're done, your React app will have:

Multiple ways to log in (email, social media, crypto wallets)
Non-custodial embedded wallet support
Nice-looking UI components that you can customize
Secure session management

Step 1: Install the Packages

First, let's get all the packages you need:

# Using npm
npm install @openfort/openfort-kit wagmi viem@^2.22.0 @tanstack/react-query
# Using yarn
yarn add @openfort/openfort-kit wagmi viem@^2.22.0 @tanstack/react-query
# Using pnpm
pnpm install @openfort/openfort-kit wagmi viem@^2.22.0 @tanstack/react-query

Step 2: Get Your API Keys

You'll need some keys from the Openfort Dashboard:

Go to dashboard.openfort.xyz
Find the API Keys section
Grab these:
- Publishable Key: For your frontend
- Secret Key: For backend stuff (if you need it)

For non-custodial wallets, you also need Shield keys:

Go to the Shield section
Click "Create Shield keys"
Save that encryption share somewhere safe (you only see it once!)
Get your Shield Publishable Key and Shield Secret Key

You'll also need a WalletConnect project ID. Get one by creating a project on the WalletConnect dashboard.

Step 3: Set Up the Providers

Create a file called Providers.tsx to wire everything together:

// Providers.tsx
'use client'
import React from 'react'
import { AuthProvider, OpenfortKitProvider, getDefaultConfig, RecoveryMethod } from '@openfort/openfort-kit'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider, createConfig } from 'wagmi'
import { polygonAmoy } from 'viem/chains'
// Set up Wagmi
const config = createConfig(
  getDefaultConfig({
    appName: 'OpenfortKit Demo',
    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
    chains: [polygonAmoy],
    ssr: true, // Turn this on if you're using server-side rendering
  })
)
// Set up React Query
const queryClient = new QueryClient()
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <OpenfortKitProvider
          publishableKey={process.env.NEXT_PUBLIC_OPENFORT_PUBLIC_KEY!}
          walletConfig={{
            createEmbeddedSigner: true,
            embeddedSignerConfiguration: {
              shieldPublishableKey: process.env.NEXT_PUBLIC_SHIELD_PUBLISHABLE_KEY!,
              recoveryMethod: RecoveryMethod.PASSWORD,
              shieldEncryptionKey: process.env.NEXT_PUBLIC_SHIELD_ENCRYPTION_SHARE!,
            }
          }}
          options={{
            authProviders: [
              AuthProvider.EMAIL,
              AuthProvider.GOOGLE,
              AuthProvider.WALLET,
            ],
            initialChainId: polygonAmoy.id,
            skipEmailVerification: true, // Only for development
          }}
          theme="retro" // Pick whatever theme you like
        >
          {children}
        </OpenfortKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Step 4: Wrap Your App

Update your App.tsx to use those providers:

// App.tsx
import React from 'react'
import { Providers } from './Providers'
export default function App() {
  return (
    <Providers>
      {/* Your app goes here */}
    </Providers>
  )
}

Create a simple login component with the OpenfortKitButton:

// components/Login.tsx
import { OpenfortKitButton } from '@openfort/openfort-kit'
export function Login() {
  return (
    <div className="login-container">
      <h1>Welcome to Our App</h1>
      <OpenfortKitButton 
        showAvatar={true}
        showBalance={true}
        label="Connect Wallet"
      />
    </div>
  )
}

Step 6: Check If Someone's Logged In

Use the built-in hooks to see what's happening with authentication:

// components/AuthStatus.tsx
import { useStatus, useUser } from '@openfort/openfort-kit'
import { useAccount } from 'wagmi'
export function AuthStatus() {
  const { status, isConnected } = useStatus()
  const { user } = useUser()
  const { address } = useAccount()
  if (!isConnected) {
    return <div>Please connect your wallet</div>
  }
  return (
    <div>
      <h2>Welcome!</h2>
      <p>Status: {status}</p>
      <p>User ID: {user?.id}</p>
      <p>Wallet Address: {address}</p>
    </div>
  )
}

Step 7: Make It Look Good

Openfort Kit uses ConnectKit underneath, so you get lots of customization options. You can change colors, fonts, and more:

<OpenfortKitProvider
  // ... other stuff
  theme="retro"
  customTheme={{
    // Change colors, fonts, whatever you want
    colors: {
      accent: '#FF0000',
      background: '#000000',
      // ... more colors
    },
    fonts: {
      body: 'Inter, sans-serif',
      // ... more fonts
    }
  }}
>
  {children}
</OpenfortKitProvider>

What's Next?

Now that you have basic auth working, you can:

Add more login options (Facebook, X, whatever)
Build protected pages that only logged-in users can see
Add wallet features (send money, sign messages)
Customize the look and feel more
Set up account recovery

Helpful Links

That's it! You now have a working authentication system that supports both regular logins and crypto wallets. Your users can pick whatever method they prefer, and you don't have to worry about the security stuff.

How to Add Authentication to Your React App with Openfort Kit

What You Need

What We're Building

Step 1: Install the Packages

Step 2: Get Your API Keys

Step 3: Set Up the Providers

Step 4: Wrap Your App

Step 6: Check If Someone's Logged In

Step 7: Make It Look Good

What's Next?

Helpful Links

Product

Industries

Resources

Company

How to Add Authentication to Your React App with Openfort Kit

What You Need

What We're Building

Step 1: Install the Packages

Step 2: Get Your API Keys

Step 3: Set Up the Providers

Step 4: Wrap Your App

Step 5: Add a Login Button

Step 6: Check If Someone's Logged In

Step 7: Make It Look Good

What's Next?

Helpful Links