Getting Started

1
import { WebflowClient } from "webflow-api";
2
import Fastify from "fastify";
3
import fastifyStatic from "@fastify/static";
4
import path from "path";
5
import url from "url";
6
import { Level } from "level";
7
import fs from "fs/promises";
8
9
// Load environment variables from .env file
10
const {
11
WEBFLOW_CLIENT_ID,
12
WEBFLOW_SECRET,
13
PORT
14
NODE_ENV = "development",
15
} = process.env;
16
17
// Validate required environment variables
18
if (!WEBFLOW_CLIENT_ID || !WEBFLOW_SECRET) {
19
console.error(
20
   "Missing required environment variables. Please check your .env file:"
21
);
22
console.error("WEBFLOW_CLIENT_ID and WEBFLOW_SECRET are required");
23
process.exit(1);
24
}
25
26
// Initialize our server with basic security headers
27
const server = Fastify({
28
logger: true,
29
trustProxy: true, // Required for secure cookies behind a proxy
30
});
31
32
// Add security headers
33
server.addHook("onSend", async (request, reply) => {
34
reply.headers({
35
   "X-Content-Type-Options": "nosniff", // Prevent MIME type sniffing
36
   "X-Frame-Options": "DENY", // Prevent clickjacking
37
   "Strict-Transport-Security": "max-age=31536000; includeSubDomains", // Enforce HTTPS
38
});
39
});
40
41
// Initialize the database (Note: Use a proper database in production)
42
const db = new Level("data", { valueEncoding: "json" });
43
await db.open();

1
// OAuth 2.0 authentication endpoint
2
server.get("/auth", async (req, reply) => {
3
  const { code, error, error_description } = req.query;
4
5
  // If no code is provided, redirect to the authorization URL
6
  if (!code) {
7
    const installUrl = WebflowClient.authorizeURL({
8
      scope: scopes,
9
      clientId: WEBFLOW_CLIENT_ID,
10
      // Optional: Add state parameter for CSRF protection
11
      state: Math.random().toString(36).substring(7),
12
    });
13
    return reply.redirect(installUrl);
14
  }
15
});

1
// OAuth 2.0 authentication endpoint
2
server.get("/auth", async (req, reply) => {
3
4
// Previous Code //
5
6
  try {
7
    // Exchange the code for an access token
8
    const token = await WebflowClient.getAccessToken({
9
      clientId: WEBFLOW_CLIENT_ID,
10
      clientSecret: WEBFLOW_SECRET,
11
      code: code,
12
    });
13
14
    // Store the token in the database
15
    await db.put("token", token);
16
17
    if (NODE_ENV === "development") {
18
      console.log("\nAccess Token Received:", token, "\n");
19
    }
20
21
    return reply.redirect("/?authorized=true");
22
  } catch (error) {
23
    console.error("Auth Error:", error);
24
    return reply.code(500).send({
25
      error: "Authentication failed",
26
      message: error.message,
27
    });
28
  }
29
});

1
// Example API endpoint
2
server.get("/sites", async (req, reply) => {
3
  try {
4
    const accessToken = await db.get("token");
5
6
    const webflow = new WebflowClient({ accessToken });
7
8
    const sites = await webflow.sites.list();
9
    return sites;
10
11
  } catch (error) {
12
    console.error("API Error:", error);
13
14
    // Handle different types of errors
15
    if (error.response?.status === 401) {
16
      return reply.code(401).send({
17
        error: "Invalid token",
18
        message: "Please authenticate again",
19
      });
20
    }
21
22
    return reply.code(500).send({
23
      error: "Server error",
24
      message: "Failed to fetch sites",
25
    });
26
  }
27
});