# 🔐 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](https://github.com/MasterKale/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](https://ngrok.com/) 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
```bash
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
<RPID must match>
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.)

4. 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<NestExpressApplication>(AppModule, { httpsOptions });

5. Restart your browser
   Access https://localhost:3000 or https://<LAN-IP>: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.