Configure your Supabase project
Before integrating with Privy, you need to configure your Supabase project to use JWT tokens for authentication. Follow the Supabase JWT signing keys documentation to:- Migrate your Supabase project to use the new JWT signing keys.
- Get the JWKS endpoint URL, which will look like
https://[PROJECT_ID].supabase.co/auth/v1/.well-known/jwks.json
. - Ensure your Supabase project is using an asymmetric signing algorithm.
Make sure to complete the JWT signing key migration in Supabase before proceeding with the Privy
integration. This ensures your tokens will be properly validated.
Configure your Privy project
Navigate to your Privy dashboard and configure JWT-based authentication following the custom authentication guide.Configure your Next.js project
1. Create Supabase clients
Create separate Supabase clients for server-side and client-side operations.lib/supabase/server.ts
2. Create a Supabase provider and hook
Create a provider that integrates Privy authentication with Supabase:components/SupabaseProvider.tsx
3. Create a Providers component and add to root layout
Create a combined providers component and wrap your application with it in the root layout:components/Providers.tsx
getCustomAuthToken
function retrieves the current session’s access token from Supabase and passes it to Privy’s getCustomAccessToken
configuration. Privy uses this token to validate the user’s authentication state through the JWKS endpoint configured in your Privy dashboard.
4. Just use Privy!
You can now access the Privy user object, create wallets and sign messages!Conclusion
With this setup complete, you now have a fully integrated Privy and Supabase authentication system. You can:- Use Supabase for user management, database operations, and real-time features.
- Leverage Privy’s wallet management capabilities.
- Customize your authentication flow to match your brand and UI while taking advantage of Supabase RLS!