The ultimate SDK bridging Web3 wallets and Supabase auth. MetaMask, Coinbase Wallet, Rainbow, and 200+ more wallets work instantly with your existing Supabase setup. Zero backend code required.
Three simple steps to add Web3 authentication to your Supabase app
Reown AppKit handles wallet connection with support for MetaMask, Coinbase Wallet, WalletConnect, and 200+ other wallets. Works on desktop and mobile.
User signs a secure SIWE (Sign-In with Ethereum) message. This proves wallet ownership without revealing private keys - fully EIP-4361 compliant.
SupaWeb3 automatically creates a JWT token and establishes a full Supabase user session. Use all Supabase features like RLS, realtime, and storage.
The most complete Reown AppKit + Supabase integration. Trusted by developers building the next generation of Web3 applications.
No custom auth endpoints needed. Works entirely with Supabase's existing auth system.
Sign-In with Ethereum (EIP-4361) compliance for enterprise-grade security.
MetaMask, Coinbase, Rainbow, and 200+ more via Reown's battle-tested AppKit.
Native composables for Vue/Nuxt and hooks for React/Next.js.
Complete TypeScript definitions with full IntelliSense support.
SIWE compliance, session persistence, error boundaries, and automatic reconnection.
First-class support for the technologies you already use
Primary sponsor and maintainer of SupaWeb3
Supporting open source Web3 tools
Your logo here
Community builder
Your logo
Your logo
Your logo
Simple, elegant API that just works
npm install @supaweb3/nuxt// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@supaweb3/nuxt'],
runtimeConfig: {
public: {
supaWeb3: {
reown: {
projectId: 'your-reown-project-id',
metadata: { name: 'Your App' }
},
supabase: {
url: 'your-supabase-url',
anonKey: 'your-anon-key'
}
}
}
}
})<template>
<div>
<button v-if="!isConnected" @click="connect">
Connect Wallet
</button>
<div v-else>
<p>Address: {{ address }}</p>
<button v-if="!isAuthenticated" @click="authenticate">
Sign In
</button>
<button v-else @click="disconnect">
Disconnect
</button>
</div>
</div>
</template>
<script setup>
const {
isConnected,
isAuthenticated,
connect,
authenticate,
disconnect
} = useSupaWeb3()
const { address } = useWallet()
</script>npm install @supaweb3/nextjs// app/layout.tsx
import { SupaWeb3Provider } from '@supaweb3/nextjs'
const config = {
reown: {
projectId: process.env.NEXT_PUBLIC_REOWN_PROJECT_ID!,
metadata: { name: 'Your App' }
},
supabase: {
url: process.env.NEXT_PUBLIC_SUPABASE_URL!,
anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
}
}
export default function RootLayout({ children }) {
return (
<html>
<body>
<SupaWeb3Provider config={config}>
{children}
</SupaWeb3Provider>
</body>
</html>
)
}'use client'
import { useSupaWeb3, useWallet } from '@supaweb3/nextjs'
export default function WalletConnect() {
const {
isConnected,
isAuthenticated,
connect,
authenticate,
disconnect
} = useSupaWeb3()
const { address } = useWallet()
if (!isConnected) {
return <button onClick={connect}>Connect Wallet</button>
}
return (
<div>
<p>Address: {address}</p>
{!isAuthenticated ? (
<button onClick={authenticate}>Sign In</button>
) : (
<button onClick={disconnect}>Disconnect</button>
)}
</div>
)
}Join developers already using SupaWeb3 to power their Web3 applications