Personal-Test-Ground

🔐 WebAuthn Passkey Demo (Angular + NestJS)

This is a full-stack demonstration of passwordless authentication using WebAuthn passkeys, built with:

• Frontend: Angular 20 (Standalone Components + Material)
• Backend: NestJS
• Authentication: WebAuthn via @simplewebauthn

---

✨ Features

• 🔐 Passkey-only login — no email input required
• ✅ Discoverable credentials (platform or cross-device)
• 📲 Cross-device support using synced passkeys
• 🎨 Clean Angular Material UI
• 🧪 Ideal for learning, demos, or prototyping WebAuthn

---

🧰 Tech Stack

Layer	Tech
Frontend	Angular 20, Angular Material
Backend	NestJS
Auth	@simplewebauthn/server + browser
Hosting	NestJS serves Angular build
Tunnel	ngrok for HTTPS development

---

🚀 Getting Started

1. Clone or Download the Project

Download this project from Google Drive or clone it if hosted on Git later. https://drive.google.com/file/d/1isU4QjH3Vz30y4SXM2RRt2zgkl02No4j/view?usp=sharing

cd your-project-directory

2. Clone or Download the Project

dependencies already installed in this case. just extract the program.

3. Expose via ngrok or preferred method

setup: https://dashboard.ngrok.com/get-started/setup/windows npx ngrok http 3000 Copy the exposed Url

4. Update Config Files

Update the URLs ..\Mobile Authentication Sample\sample-auth-backend\src\config.ts Update the URL ..\Mobile Authentication Sample\web-app\src\app\config.ts

5. Angular Build

npm run nest This will enable NestJS to serve the frontend statically

5. Start the app

in ..\Mobile Authentication Sample\sample-auth-backend run npm run start

🔐 Setting up Trusted Local HTTPS with mkcert

1. Install mkcert powershell> choco install mkcert powershell> mkcert -install (Run PowerShell as Administrator to ensure root CA is installed.)

2. Create a certs folder in your backend directory powershell> cd E:\Task\Mobile Authentication Sample\sample-auth-backend powershell> mkdir certs

3. Generate a trusted certificate powershell> mkcert -cert-file certs\local-cert.pem -key-file certs\local-key.pem localhost 127.0.0.1

Optional LAN access: powershell> mkcert -cert-file certs\lan-cert.pem -key-file certs\lan-key.pem localhost 127.0.0.1 192.168.1.50

(Make sure hostname/IP matches certificate SAN.)

1. Update NestJS to use HTTPS ts> const httpsOptions = { key: fs.readFileSync(join(dirname, '..', 'certs', 'local-key.pem')), cert: fs.readFileSync(join(dirname, '..', 'certs', 'local-cert.pem')), }; ts> const app = await NestFactory.create(AppModule, { httpsOptions });

2. Restart your browser Access https://localhost:3000 or https://:3000 (must match SAN).

Notes:

• Chrome/Edge trusts Windows root store automatically.
• Firefox may require manually importing rootCA.pem from mkcert -CAROOT.
• Always regenerate certs if changing hostnames or LAN IPs.