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:

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:

// 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:

node generate-vapid-keys.js

Configuration

Backend Configuration

Add the generated keys to your backend .env file:

# 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:

# 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

Never commit private keys to version control
- Add .env to .gitignore
- Use environment variables in production
Use different keys for different environments
- Development, staging, and production should have separate VAPID key pairs
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.)
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

Verify keys match: Ensure the public key in frontend matches the public key in backend
Check VAPID_CONTACT: Must be a valid mailto: URL
Verify HTTPS: Web push requires HTTPS (except for localhost)
Check browser console: Look for errors in the browser console
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

3.9 KiB Raw Blame History