Add security page

docs/pages/infra/platform/security/protect-api-keys.mdx

@@ -0,0 +1,120 @@
+# How to Protect Your API Keys
+
+Keeping your API keys secure is essential. Here are two main ways to protect them:
+
+- Restrict access to your API keys.
+- Use a proxy server to handle requests to Pimlico.
+
+## Restrict Access to Your API Keys
+
+You can limit how your API keys are used by modifying their permissions on the [API Keys page](https://dashboard.pimlico.io/apikeys). Restrictions can include:
+
+- **IP addresses:** Specify which IPs are allowed to make requests.
+- **User agents:** Limit access to specific browsers, SDK versions, or other user agents.
+- **Origins:** Define which domains are permitted to make requests.
+
+Additionally, you can enable or disable specific API features for each key, such as:
+
+- Bundler methods.
+- Paymaster methods.
+- Account APIs.
+
+## Use a Proxy Server
+
+You can create a proxy server to handle requests to Pimlico. This way, you can have custom authentication, rate limiting, and other features before forwarding requests to Pimlico.
+
+Here's an example of how you can create a proxy server for `fastify` and `express`:
+
+::::code-group
+
+```typescript [fastify.ts]
+import Fastify from 'fastify'
+import proxy from '@fastify/http-proxy'
+
+const fastify = Fastify({ logger: true })
+const PIMLICO_API_KEY = process.env.PIMLICO_API_KEY
+
+// Middleware to check authentication
+fastify.addHook('preHandler', async (request, reply) => {
+  const authHeader = request.headers.authorization
+
+  if (!authHeader || !isValidAuth(authHeader)) {
+    reply.code(401).send({ error: 'Unauthorized' })
+  }
+})
+
+// Setup proxy to Pimlico API
+fastify.register(proxy, {
+  upstream: `https://api.pimlico.io/v2/137/rpc?apikey=${PIMLICO_API_KEY}`,
+  prefix: '/api/proxy', // Optional: prefix all routes with /api/proxy
+  rewriteRequestHeaders: (req, headers) => ({
+    ...headers,
+  })
+})
+
+// Start server
+fastify.listen({ port: 3000 }, (err) => {
+  if (err) {
+    fastify.log.error(err)
+    process.exit(1)
+  }
+})
+
+// Helper function to validate auth
+function isValidAuth(authHeader: string): boolean {
+  // Implement your authentication logic here
+  return true
+}
+
+```
+
+```typescript [express.ts]
+import express from 'express';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+
+const app = express();
+const PIMLICO_API_KEY = process.env.PIMLICO_API_KEY;
+const targetUrl = `https://api.pimlico.io/v2/137/rpc?apikey=${PIMLICO_API_KEY}`;
+
+
+// Middleware to check authentication
+app.use((req, res, next) => {
+  const authHeader = req.headers.authorization;
+
+  if (!authHeader || !isValidAuth(authHeader)) {
+    return res.status(401).json({ error: 'Unauthorized' });
+  }
+  next();
+});
+
+// Setup proxy to Pimlico API
+app.use('/api/proxy',  createProxyMiddleware({
+    target: targetUrl,
+    changeOrigin: true,
+    pathRewrite: {
+      '^/proxy': '', // Remove '/proxy' from the path
+    },
+    onProxyReq: (proxyReq, req) => {
+      // Ensure JSON content type if necessary
+      proxyReq.setHeader('Content-Type', 'application/json');
+    },
+  }));
+
+// Start server
+app.listen(3000, (err) => {
+  if (err) {
+    console.error(err);
+    process.exit(1);
+  }
+  console.log('Server is running on port 3000');
+});
+
+// Helper function to validate auth
+function isValidAuth(authHeader: string): boolean {
+  // Implement your authentication logic here
+  return true;
+}
+
+```
+
+::::

vocs.config.tsx

@@ -1,6 +1,7 @@
 import { defineConfig } from "vocs"
 import viteConfig from "./utils"
 import { link } from "fs"
+import { text } from "stream/consumers"
 
 export const platformSidebar = [
 	{
@@ -45,6 +46,15 @@ export const platformSidebar = [
 			},
 		],
 	},
+	{
+		text: "Security",
+		items: [
+			{
+				text: "How to protect your API keys",
+				link: "/infra/platform/security/protect-api-keys",
+			},
+		],
+	},
 	{
 		text: "Debugging",
 		items: [