125 lines
3.9 KiB
Markdown
125 lines
3.9 KiB
Markdown
# 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)
|
|
|