Supabase Passkey Simplewebauthn
Project
This is a Next.js 15 project setup with Supabase, Simplewebauthn for Passkey, Tailwind v4, Shadcn
https://github.com/user-attachments/assets/90708b4c-53f9-46f7-989a-7cb2e2e0cce7
Before you begin
You need install Docker Desktop in your system (Windows, macOS, or Linux).
Quickstart Supabase
Step 1
configure your email SMTP in /project/supabase/config.toml
[auth.email.smtp]
enabled = true
host = "sandbox.smtp.mailtrap.io"
port = 2525
user = ""
pass = ""
admin_email = "[email protected]"
sender_name = "Project"
for testing emails you can use Mailtrap
Step2
run supabase, if you run first time then you need to wait a few minutes to download images for Docker
npx supabase start
Step 3
rename file development.env to .env.local
Step 4
after supabase succesfully run copy keys from terminal to .env.local file
ANON_KEY
SERVICE_ROLE_KEY
AUTH_JWT_SECRET
Supabase studio link http://localhost:54323
Quickstart Nextjs
Step 1
run npm to download all dependencies:
npm run i
Step 2
run the development server:
npm run dev
Project link http://localhost:3000/auth/sign-up
Project photos
Special thanks for
Oussama Ouazize
integrated simplewebauthn (passkey) with supabase
DarjusZ
reduced code to learn basic integrations of simplewebauthn (passkey) with supabase
Based on Blog - Adding passkeys to a Supabase app without using third parties
Learn more
To learn more, take a look at the following resources:
- Next.js - learn about Next.js features and API.
- Supabase - Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings.
- Simplewebauthn - A collection of TypeScript-first libraries for simpler WebAuthn integration.
- Tailwind - Rapidly build modern websites without ever leaving your HTML.
- Shadcn - A set of beautifully-designed, accessible components and a code distribution platform.
