# VAPID Key Generation Guide

## What are VAPID Keys?

VAPID (Voluntary Application Server Identification) keys are cryptographic keys used for web push notifications. They identify your application server to push services and ensure secure communication.

## Generating VAPID Keys

### Method 1: Using npx (Recommended - No Installation Required)

The easiest way to generate VAPID keys is using `npx`, which doesn't require any global installation:

```bash
npx web-push generate-vapid-keys
```

This command will output something like:

```
=======================================
Public Key:
BEl62iUYgUivxIkvpY5kXK3t3b9i5X8YzA1B2C3D4E5F6G7H8I9J0K1L2M3N4O5P6Q7R8S9T0U1V2W3X4Y5Z6

Private Key:
aBcDeFgHiJkLmNoPqRsTuVwXyZ1234567890AbCdEfGhIjKlMnOpQrStUvWxYz

=======================================
```

### Method 2: Using Node.js Script

If you prefer to generate keys programmatically, you can create a simple script:

```javascript
// generate-vapid-keys.js
const webpush = require('web-push');

const vapidKeys = webpush.generateVAPIDKeys();

console.log('=======================================');
console.log('Public Key:');
console.log(vapidKeys.publicKey);
console.log('');
console.log('Private Key:');
console.log(vapidKeys.privateKey);
console.log('=======================================');
```

Then run:
```bash
node generate-vapid-keys.js
```

## Configuration

### Backend Configuration

Add the generated keys to your backend `.env` file:

```env
# Notification Service Worker credentials (Web Push / VAPID)
VAPID_PUBLIC_KEY=BEl62iUYgUivxIkvpY5kXK3t3b9i5X8YzA1B2C3D4E5F6G7H8I9J0K1L2M3N4O5P6Q7R8S9T0U1V2W3X4Y5Z6
VAPID_PRIVATE_KEY=aBcDeFgHiJkLmNoPqRsTuVwXyZ1234567890AbCdEfGhIjKlMnOpQrStUvWxYz
VAPID_CONTACT=mailto:admin@royalenfield.com
```

**Important Notes:**
- The `VAPID_CONTACT` should be a valid `mailto:` URL
- Keep your `VAPID_PRIVATE_KEY` secure and **never commit it to version control**
- The private key should only be stored on your backend server

### Frontend Configuration

Add the **SAME** `VAPID_PUBLIC_KEY` to your frontend `.env` file:

```env
# Push Notifications (Web Push / VAPID)
VITE_PUBLIC_VAPID_KEY=BEl62iUYgUivxIkvpY5kXK3t3b9i5X8YzA1B2C3D4E5F6G7H8I9J0K1L2M3N4O5P6Q7R8S9T0U1V2W3X4Y5Z6
```

**Important:** 
- Only the **public key** goes in the frontend
- The **private key** stays on the backend only
- Both frontend and backend must use the **same public key** from the same key pair

## Security Best Practices

1. **Never commit private keys to version control**
   - Add `.env` to `.gitignore`
   - Use environment variables in production

2. **Use different keys for different environments**
   - Development, staging, and production should have separate VAPID key pairs

3. **Keep private keys secure**
   - Store them in secure environment variable management systems
   - Use secrets management tools in production (AWS Secrets Manager, Azure Key Vault, etc.)

4. **Rotate keys if compromised**
   - If a private key is ever exposed, generate new keys immediately
   - Update both frontend and backend configurations

## Troubleshooting

### Issue: Push notifications not working

1. **Verify keys match**: Ensure the public key in frontend matches the public key in backend
2. **Check VAPID_CONTACT**: Must be a valid `mailto:` URL
3. **Verify HTTPS**: Web push requires HTTPS (except for localhost)
4. **Check browser console**: Look for errors in the browser console
5. **Verify service worker**: Ensure service worker is properly registered

### Issue: "Invalid VAPID key" error

- Ensure you're using the public key (not private key) in the frontend
- Verify the key format is correct (no extra spaces or line breaks)
- Make sure both frontend and backend are using keys from the same key pair

## Additional Resources

- [Web Push Protocol](https://web.dev/push-notifications-overview/)
- [VAPID Specification](https://tools.ietf.org/html/rfc8292)
- [web-push npm package](https://www.npmjs.com/package/web-push)