main.js

server.js

database.js

jwt.js

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
import axios from "axios";
import DataTable from "./DataTable";
import { ThemeProvider, Button, Container, Typography } from "@mui/material";
import theme from "./theme";
const App = () => {
  const [idToken, setIdToken] = useState("");
  const [sessionToken, setSessionToken] = useState("");
  const [user, setUser] = useState({});
  const [siteData, setSiteData] = useState([]);
  const PORT = 3000;
  const API_URL = `http://localhost:${PORT}/`;
  useEffect(() => {
    // Set Extension Size
    webflow.setExtensionSize("default");
    // Function to exchange and verify ID token
    const exchangeAndVerifyIdToken = async () => {
      try {
        const idToken = await webflow.getIdToken();
        const siteInfo = await webflow.getSiteInfo();
        setIdToken(idToken);
        // Resolve token by sending it to the backend server
        const response = await axios.post(API_URL + "token", {
          idToken: idToken,
          siteId: siteInfo.siteId,
        });
        try {
          // Parse information from resolved token
          const sessionToken = response.data.sessionToken;
          const expAt = response.data.exp;
          const decodedToken = JSON.parse(atob(sessionToken.split(".")[1]));
          const firstName = decodedToken.user.firstName;
          const email = decodedToken.user.email;
          // Store information in Local Storage
          localStorage.setItem(
            "wf_hybrid_user",
            JSON.stringify({ sessionToken, firstName, email, exp: expAt })
          );
          setUser({ firstName, email });
          setSessionToken(sessionToken);
          console.log(`Session Token: ${sessionToken}`);
        } catch (error) {
          console.error("No Token", error);
        }
      } catch (error) {
        console.error("Error fetching ID Token:", error);
      }
    };
    // Check local storage for session token
    const localStorageUser = localStorage.getItem("wf_hybrid_user");
    if (localStorageUser) {
      const userParse = JSON.parse(localStorageUser);
      const userStoredSessionToken = userParse.sessionToken;
      const userStoredTokenExp = userParse.exp;
      if (userStoredSessionToken && Date.now() < userStoredTokenExp) {
        if (!sessionToken) {
          setSessionToken(userStoredSessionToken);
          setUser({ firstName: userParse.firstName, email: userParse.email });
        }
      } else {
        localStorage.removeItem("wf_hybrid_user");
        exchangeAndVerifyIdToken();
      }
    } else {
      exchangeAndVerifyIdToken();
    }
    // Listen for message from the OAuth callback window
    const handleAuthComplete = (event) => {
      if (
        // event.origin === "http://localhost:3000" &&
        event.data === "authComplete"
      ) {
        exchangeAndVerifyIdToken(); // Retry the token exchange
      }
    };
    window.addEventListener("message", handleAuthComplete);
    return () => {
      window.removeEventListener("message", handleAuthComplete);
    };
  }, [sessionToken]);
  // Handle request for site data
  const getSiteData = async () => {
    const sites = await axios.get(API_URL + "sites", {
      headers: { authorization: `Bearer ${sessionToken}` },
    });
    setSiteData(sites.data.data.sites);
  };
  // Open OAuth screen
  const openAuthScreen = () => {
    window.open("http://localhost:3000", "_blank", "width=600,height=400");
  };
  return (
    <ThemeProvider theme={theme}>
      <div>
        {!user.firstName ? (
          // If no user is found, Send a Hello Stranger Message and Button to Authorize
          <Container sx={{ padding: "20px" }}>
            <Typography variant="h1">👋🏾 Hello Stranger</Typography>
            <Button
              variant="contained"
              sx={{ margin: "10px 20px" }}
              onClick={openAuthScreen}
            >
              Authorize App
            </Button>
          </Container>
        ) : (
          // If a user is found send welcome message with their name
          <Container sx={{ padding: "20px" }}>
            <Typography variant="h1">👋🏾 Hello {user.firstName}</Typography>
            <Button
              variant="contained"
              sx={{ margin: "10px 20px" }}
              onClick={getSiteData}
            >
              Get Sites
            </Button>
            {siteData.length > 0 && <DataTable data={siteData} />}
          </Container>
        )}
      </div>
    </ThemeProvider>
  );
};
// Render your App component inside the root
const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

Securely connect your browser-based Designer Extension to your server-side Data Client.

In this tutorial we’ll build a Hybrid App that:

Authorizes sites upon App installation
Transmits a Site ID and ID Token
Send a Site ID and ID Token from the Designer Extension to the Data Client for verification.
Resolves the ID Token on the Server Side
The Data Client resolves the ID Token to get user details from Webflow and verify access.
Maps user authorization
Establish a link between the user and their authorized sites, allowing for secure access to site data.
Creates a Session Token for the user
Generate and send a session token to the Designer Extension to securely maintain the user’s session and enable authenticated requests.
Makes authenticated requests to Webflow’s Data APIs
Use the session token and stored tokens to make authenticated API calls to Webflow’s Data APIs.

By the end, you’ll have a secure, fully integrated setup to handle user sessions and seamlessly make requests to external APIs.

Prerequisites

A Hybrid App with the following scopes: sites:read, authorized_user:read
The CLIENT_ID and CLIENT_SECRET for your App
An ngrok authentication token
An understanding of how to authenticate a Webflow User
Basic knowledge of Node.js and Express
Familiarity with building React Single-Page Applications

Set up your development environment

Clone the starter code

If you have the GitHub CLI installed, type the following command into your terminal.

$ gh repo clone Webflow-Examples/Hybrid-App-Authentication

Otherwise, you can clone the repository from GitHub.com

Install dependencies

This example contains both a Designer Extension and Data Client project. Input the following commands in your terminal to install all necessary dependencies for the example.

$ cd hybrid-app-authentication 

npm install 

npm run install-frontend 

npm run install-backend

Add environment variables

main.js

server.js

database.js

jwt.js

.env

    WEBFLOW_CLIENT_ID=XXX
    WEBFLOW_CLIENT_SECRET=XXX
    PORT=3000
    NGROK_AUTH_TOKEN=XXX

Replace the example values in the .env.example file with your credentials. Rename the file to .env

Review Designer Extension

main.js

server.js

database.js

jwt.js

.env

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
import axios from "axios";
import DataTable from "./DataTable";
import { ThemeProvider, Button, Container, Typography } from "@mui/material";
import theme from "./theme";
const App = () => {
  const [idToken, setIdToken] = useState("");
  const [sessionToken, setSessionToken] = useState("");
  const [user, setUser] = useState({});
  const [siteData, setSiteData] = useState([]);
  const PORT = 3000;
  const API_URL = `http://localhost:${PORT}/`;
  useEffect(() => {
    // Set Extension Size
    webflow.setExtensionSize("default");
    // Function to exchange and verify ID token
    const exchangeAndVerifyIdToken = async () => {
      try {
        const idToken = await webflow.getIdToken();
        const siteInfo = await webflow.getSiteInfo();
        setIdToken(idToken);
        // Resolve token by sending it to the backend server
        const response = await axios.post(API_URL + "token", {
          idToken: idToken,
          siteId: siteInfo.siteId,
        });
        try {
          // Parse information from resolved token
          const sessionToken = response.data.sessionToken;
          const expAt = response.data.exp;
          const decodedToken = JSON.parse(atob(sessionToken.split(".")[1]));
          const firstName = decodedToken.user.firstName;
          const email = decodedToken.user.email;
          // Store information in Local Storage
          localStorage.setItem(
            "wf_hybrid_user",
            JSON.stringify({ sessionToken, firstName, email, exp: expAt })
          );
          setUser({ firstName, email });
          setSessionToken(sessionToken);
          console.log(`Session Token: ${sessionToken}`);
        } catch (error) {
          console.error("No Token", error);
        }
      } catch (error) {
        console.error("Error fetching ID Token:", error);
      }
    };
    // Check local storage for session token
    const localStorageUser = localStorage.getItem("wf_hybrid_user");
    if (localStorageUser) {
      const userParse = JSON.parse(localStorageUser);
      const userStoredSessionToken = userParse.sessionToken;
      const userStoredTokenExp = userParse.exp;
      if (userStoredSessionToken && Date.now() < userStoredTokenExp) {
        if (!sessionToken) {
          setSessionToken(userStoredSessionToken);
          setUser({ firstName: userParse.firstName, email: userParse.email });
        }
      } else {
        localStorage.removeItem("wf_hybrid_user");
        exchangeAndVerifyIdToken();
      }
    } else {
      exchangeAndVerifyIdToken();
    }
    // Listen for message from the OAuth callback window
    const handleAuthComplete = (event) => {
      if (
        // event.origin === "http://localhost:3000" &&
        event.data === "authComplete"
      ) {
        exchangeAndVerifyIdToken(); // Retry the token exchange
      }
    };
    window.addEventListener("message", handleAuthComplete);
    return () => {
      window.removeEventListener("message", handleAuthComplete);
    };
  }, [sessionToken]);
  // Handle request for site data
  const getSiteData = async () => {
    const sites = await axios.get(API_URL + "sites", {
      headers: { authorization: `Bearer ${sessionToken}` },
    });
    setSiteData(sites.data.data.sites);
  };
  // Open OAuth screen
  const openAuthScreen = () => {
    window.open("http://localhost:3000", "_blank", "width=600,height=400");
  };
  return (
    <ThemeProvider theme={theme}>
      <div>
        {!user.firstName ? (
          // If no user is found, Send a Hello Stranger Message and Button to Authorize
          <Container sx={{ padding: "20px" }}>
            <Typography variant="h1">👋🏾 Hello Stranger</Typography>
            <Button
              variant="contained"
              sx={{ margin: "10px 20px" }}
              onClick={openAuthScreen}
            >
              Authorize App
            </Button>
          </Container>
        ) : (
          // If a user is found send welcome message with their name
          <Container sx={{ padding: "20px" }}>
            <Typography variant="h1">👋🏾 Hello {user.firstName}</Typography>
            <Button
              variant="contained"
              sx={{ margin: "10px 20px" }}
              onClick={getSiteData}
            >
              Get Sites
            </Button>
            {siteData.length > 0 && <DataTable data={siteData} />}
          </Container>
        )}
      </div>
    </ThemeProvider>
  );
};
// Render your App component inside the root
const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

In this tutorial, most of our focus will be on setting up and configuring the Data Client. However, to kick off the authentication process, we need to first send an ID token and Site ID from the Designer Extension to the Data Client. This step will allow us to exchange these tokens for a session token, which is required for making authenticated requests to Webflow’s API from the browser.

To get started, review the exchangeAndVerifyIdToken function in the Designer Extension.

Retrieving the `idToken` from the Designer Extension.

main.js

server.js

database.js

jwt.js

.env

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
import axios from "axios";
import DataTable from "./DataTable";
import { ThemeProvider, Button, Container, Typography } from "@mui/material";
import theme from "./theme";
const App = () => {
  const [idToken, setIdToken] = useState("");
  const [sessionToken, setSessionToken] = useState("");
  const [user, setUser] = useState({});
  const [siteData, setSiteData] = useState([]);
  const PORT = 3000;
  const API_URL = `http://localhost:${PORT}/`;
  useEffect(() => {
    // Set Extension Size
    webflow.setExtensionSize("default");
    // Function to exchange and verify ID token
    const exchangeAndVerifyIdToken = async () => {
      try {
        const idToken = await webflow.getIdToken();
        const siteInfo = await webflow.getSiteInfo();
        setIdToken(idToken);
        // Resolve token by sending it to the backend server
        const response = await axios.post(API_URL + "token", {
          idToken: idToken,
          siteId: siteInfo.siteId,
        });
        try {
          // Parse information from resolved token
          const sessionToken = response.data.sessionToken;
          const expAt = response.data.exp;
          const decodedToken = JSON.parse(atob(sessionToken.split(".")[1]));
          const firstName = decodedToken.user.firstName;
          const email = decodedToken.user.email;
          // Store information in Local Storage
          localStorage.setItem(
            "wf_hybrid_user",
            JSON.stringify({ sessionToken, firstName, email, exp: expAt })
          );
          setUser({ firstName, email });
          setSessionToken(sessionToken);
          console.log(`Session Token: ${sessionToken}`);
        } catch (error) {
          console.error("No Token", error);
        }
      } catch (error) {
        console.error("Error fetching ID Token:", error);
      }
    };
    // Check local storage for session token
    const localStorageUser = localStorage.getItem("wf_hybrid_user");
    if (localStorageUser) {
      const userParse = JSON.parse(localStorageUser);
      const userStoredSessionToken = userParse.sessionToken;
      const userStoredTokenExp = userParse.exp;
      if (userStoredSessionToken && Date.now() < userStoredTokenExp) {
        if (!sessionToken) {
          setSessionToken(userStoredSessionToken);
          setUser({ firstName: userParse.firstName, email: userParse.email });
        }
      } else {
        localStorage.removeItem("wf_hybrid_user");
        exchangeAndVerifyIdToken();
      }
    } else {
      exchangeAndVerifyIdToken();
    }
    // Listen for message from the OAuth callback window
    const handleAuthComplete = (event) => {
      if (
        // event.origin === "http://localhost:3000" &&
        event.data === "authComplete"
      ) {
        exchangeAndVerifyIdToken(); // Retry the token exchange
      }
    };
    window.addEventListener("message", handleAuthComplete);
    return () => {
      window.removeEventListener("message", handleAuthComplete);
    };
  }, [sessionToken]);
  // Handle request for site data
  const getSiteData = async () => {
    const sites = await axios.get(API_URL + "sites", {
      headers: { authorization: `Bearer ${sessionToken}` },
    });
    setSiteData(sites.data.data.sites);
  };
  // Open OAuth screen
  const openAuthScreen = () => {
    window.open("http://localhost:3000", "_blank", "width=600,height=400");
  };
  return (
    <ThemeProvider theme={theme}>
      <div>
        {!user.firstName ? (
          // If no user is found, Send a Hello Stranger Message and Button to Authorize
          <Container sx={{ padding: "20px" }}>
            <Typography variant="h1">👋🏾 Hello Stranger</Typography>
            <Button
              variant="contained"
              sx={{ margin: "10px 20px" }}
              onClick={openAuthScreen}
            >
              Authorize App
            </Button>
          </Container>
        ) : (
          // If a user is found send welcome message with their name
          <Container sx={{ padding: "20px" }}>
            <Typography variant="h1">👋🏾 Hello {user.firstName}</Typography>
            <Button
              variant="contained"
              sx={{ margin: "10px 20px" }}
              onClick={getSiteData}
            >
              Get Sites
            </Button>
            {siteData.length > 0 && <DataTable data={siteData} />}
          </Container>
        )}
      </div>
    </ThemeProvider>
  );
};
// Render your App component inside the root
const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

The exchangeAndVerifyIdToken function initiates the authentication process by using the Webflow Designer API’s getIdToken and getSiteInfo methods to retrieve the idToken and siteId from the Designer Extension.

Exchanging the `idToken` and `siteId` for a Session Token

main.js

server.js

database.js

jwt.js

.env

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
import axios from "axios";
import DataTable from "./DataTable";
import { ThemeProvider, Button, Container, Typography } from "@mui/material";
import theme from "./theme";
const App = () => {
  const [idToken, setIdToken] = useState("");
  const [sessionToken, setSessionToken] = useState("");
  const [user, setUser] = useState({});
  const [siteData, setSiteData] = useState([]);
  const PORT = 3000;
  const API_URL = `http://localhost:${PORT}/`;
  useEffect(() => {
    // Set Extension Size
    webflow.setExtensionSize("default");
    // Function to exchange and verify ID token
    const exchangeAndVerifyIdToken = async () => {
      try {
        const idToken = await webflow.getIdToken();
        const siteInfo = await webflow.getSiteInfo();
        setIdToken(idToken);
        // Resolve token by sending it to the backend server
        const response = await axios.post(API_URL + "token", {
          idToken: idToken,
          siteId: siteInfo.siteId,
        });
        try {
          // Parse information from resolved token
          const sessionToken = response.data.sessionToken;
          const expAt = response.data.exp;
          const decodedToken = JSON.parse(atob(sessionToken.split(".")[1]));
          const firstName = decodedToken.user.firstName;
          const email = decodedToken.user.email;
          // Store information in Local Storage
          localStorage.setItem(
            "wf_hybrid_user",
            JSON.stringify({ sessionToken, firstName, email, exp: expAt })
          );
          setUser({ firstName, email });
          setSessionToken(sessionToken);
          console.log(`Session Token: ${sessionToken}`);
        } catch (error) {
          console.error("No Token", error);
        }
      } catch (error) {
        console.error("Error fetching ID Token:", error);
      }
    };
    // Check local storage for session token
    const localStorageUser = localStorage.getItem("wf_hybrid_user");
    if (localStorageUser) {
      const userParse = JSON.parse(localStorageUser);
      const userStoredSessionToken = userParse.sessionToken;
      const userStoredTokenExp = userParse.exp;
      if (userStoredSessionToken && Date.now() < userStoredTokenExp) {
        if (!sessionToken) {
          setSessionToken(userStoredSessionToken);
          setUser({ firstName: userParse.firstName, email: userParse.email });
        }
      } else {
        localStorage.removeItem("wf_hybrid_user");
        exchangeAndVerifyIdToken();
      }
    } else {
      exchangeAndVerifyIdToken();
    }
    // Listen for message from the OAuth callback window
    const handleAuthComplete = (event) => {
      if (
        // event.origin === "http://localhost:3000" &&
        event.data === "authComplete"
      ) {
        exchangeAndVerifyIdToken(); // Retry the token exchange
      }
    };
    window.addEventListener("message", handleAuthComplete);
    return () => {
      window.removeEventListener("message", handleAuthComplete);
    };
  }, [sessionToken]);
  // Handle request for site data
  const getSiteData = async () => {
    const sites = await axios.get(API_URL + "sites", {
      headers: { authorization: `Bearer ${sessionToken}` },
    });
    setSiteData(sites.data.data.sites);
  };
  // Open OAuth screen
  const openAuthScreen = () => {
    window.open("http://localhost:3000", "_blank", "width=600,height=400");
  };
  return (
    <ThemeProvider theme={theme}>
      <div>
        {!user.firstName ? (
          // If no user is found, Send a Hello Stranger Message and Button to Authorize
          <Container sx={{ padding: "20px" }}>
            <Typography variant="h1">👋🏾 Hello Stranger</Typography>
            <Button
              variant="contained"
              sx={{ margin: "10px 20px" }}
              onClick={openAuthScreen}
            >
              Authorize App
            </Button>
          </Container>
        ) : (
          // If a user is found send welcome message with their name
          <Container sx={{ padding: "20px" }}>
            <Typography variant="h1">👋🏾 Hello {user.firstName}</Typography>
            <Button
              variant="contained"
              sx={{ margin: "10px 20px" }}
              onClick={getSiteData}
            >
              Get Sites
            </Button>
            {siteData.length > 0 && <DataTable data={siteData} />}
          </Container>
        )}
      </div>
    </ThemeProvider>
  );
};
// Render your App component inside the root
const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

With the ID token and Site ID in hand, the Designer Extension then sends this information to an endpoint on the Data Client.

The Data Client verifies the ID token and returns a session token, which the Designer Extension will use to make authenticated requests to Webflow. This token ensures secure, temporary access and allows the Designer Extension to manage user sessions as we continue through the setup.

Set up your server

Switching to the Data Client, let’s quickly set up an Express server to handle incoming requests and prepare for adding authentication in Data Client/server.js.

Initialize Express

Create your server with Express, configure CORS to accept incoming requests from your Designer, and set up middleware for JSON and URL-encoded requests

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Configure authorization flow

Add an endpoint on your server to handle the OAuth callback and retrieve an authorization_code from the URI’s query parameters. Then, create a /callback endpoint to exchange the code for an accessToken for your user.

For an in-depth explanation on setting up auth, check out the guide

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
  const authorizeUrl = WebflowClient.authorizeURL({
    scope: ["sites:read", "authorized_user:read"],
    clientId: process.env.WEBFLOW_CLIENT_ID,
  });
  res.redirect(authorizeUrl);
});
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
    // TODO: Save accessToken to the database, associated with user/site info
    // db.insertAuthorization({ userId: "userID", accessToken });
})
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Handling the ID Token and Site ID from the Designer Extension

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
  const authorizeUrl = WebflowClient.authorizeURL({
    scope: ["sites:read", "authorized_user:read"],
    clientId: process.env.WEBFLOW_CLIENT_ID,
  });
  res.redirect(authorizeUrl);
});
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
    // TODO: Save accessToken to the database, associated with user/site info
    // db.insertAuthorization({ userId: "userID", accessToken });
})
// Endpoint to authenticate user with ID Token and Site ID
app.post("/token", (req, res) => {
  const idToken = req.body.idToken; // Get token from request
  // Placeholder for token validation
  // jwt.retrieveAccessToken();
  // TODO: Resolve ID Token with Webflow API and create a session token
  // - Make a request to the Webflow API to resolve the ID Token
  // - Create a session token for the user
  // - Store user authorization info in the database
  // - Respond with the session token
  res.json({ message: "Token endpoint setup pending." });
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

In addition to retrieving an accessToken through OAuth, your Designer Extension will also receive an idToken and a siteId during the authentication process for the Designer Extension. These tokens enable you to verify and authorize user access securely.

To manage this, you’ll need to set up a new endpoint that:

Validates the ID Token received from the Designer Extension using the Resolve ID Token endpoint.
Retrieves an accessToken associated with the Site ID from a database
Generates a Session Token for secure, temporary access.
Stores the accessToken in your database, associating it with the user or site.
Sends the Session Token to the Designer Extension

For now, we’ll set up the endpoint to receive the ID Token. We’ll add the database storage, access token retrieval, and session token generation in the next steps.

Set up your database to save and retrieve credentials

main.js

server.js

database.js

jwt.js

.env

import sqlite3 from "sqlite3";
import jwt from "jsonwebtoken";
import dotenv from "dotenv";
// Enable dotenv to load environment variables
dotenv.config();
// Enable verbose mode for SQLite3
const sqlite3Verbose = sqlite3.verbose();
// Open SQLite database connection
const db = new sqlite3Verbose.Database("./db/database.db");
// Create tables
db.serialize(() => {
  // Table to associate site ID with access token from OAuth
  db.run(`
    CREATE TABLE IF NOT EXISTS siteAuthorizations (
      siteId TEXT PRIMARY KEY,
      accessToken TEXT
    )
  `);
  // Table to associate user ID with the access token
  db.run(`
    CREATE TABLE IF NOT EXISTS userAuthorizations (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      userId TEXT,
      accessToken TEXT
    )
  `);
});
// Insert a record after exchanging the OAuth code for an access token
function insertSiteAuthorization(siteId, accessToken) {
  db.get(
    "SELECT * FROM siteAuthorizations WHERE siteId = ?",
    [siteId],
    (err, existingAuth) => {
      if (err) {
        console.error("Error checking for existing site authorization:", err);
        return;
      }
      // If the user already exists, return the existing user
      if (existingAuth) {
        console.log("Site auth already exists:", existingAuth);
        return;
      }
      db.run(
        "INSERT INTO siteAuthorizations (siteId, accessToken) VALUES (?, ?)",
        [siteId, accessToken],
        (err) => {
          if (err) {
            console.error("Error inserting site authorization pairing:", err);
          } else {
            console.log("Site authorization pairing inserted successfully.");
          }
        }
      );
    }
  );
}
// Insert a record when the /resolve endpoint succeeds and can trust the user to be associated
// with the access token
function insertUserAuthorization(userId, accessToken) {
  db.get(
    "SELECT * FROM userAuthorizations WHERE userId = ?",
    [userId],
    (err, existingTokenAuth) => {
      if (err) {
        console.error("Error checking for existing user access token:", err);
        return;
      }
      // If the user already exists, return the existing user
      if (existingTokenAuth) {
        console.log("Access token pairing already exists:", existingTokenAuth);
        return;
      }
      db.run(
        "INSERT INTO userAuthorizations (userId, accessToken) VALUES (?, ?)",
        [userId, accessToken],
        (err) => {
          if (err) {
            console.error("Error inserting user access token pairing:", err);
          } else {
            console.log("User access token pairing inserted successfully.");
          }
        }
      );
    }
  );
}
function getAccessTokenFromSiteId(siteId, callback) {
  // Retrieve the access token from the database
  db.get(
    "SELECT accessToken FROM siteAuthorizations WHERE siteId = ?",
    [siteId],
    (err, row) => {
      if (err) {
        console.error("Error retrieving access token:", err);
        return callback(err, null);
      }
      // Check if site exists and has an accessToken
      if (row && row.accessToken) {
        return callback(null, row.accessToken);
      } else {
        // No user or no access token available
        return callback(
          new Error("No access token found or site does not exist"),
          null
        );
      }
    }
  );
}
function getAccessTokenFromUserId(userId, callback) {
  // Retrieve the access token from the database
  db.get(
    "SELECT accessToken FROM userAuthorizations WHERE userId = ?",
    [userId],
    (err, row) => {
      if (err) {
        console.error("Error retrieving access token:", err);
        return callback(err, null);
      }
      // Check if user exists and has an accessToken
      if (row && row.accessToken) {
        return callback(null, row.accessToken);
      } else {
        // No user or no access token available
        return callback(
          new Error("No access token found or user does not exist"),
          null
        );
      }
    }
  );
}
function clearDatabase() {
  db.serialize(() => {
    // Clear data from authorizations table
    db.run("DELETE FROM authorizations", (err) => {
      if (err) {
        console.error("Error clearing authorizations table:", err);
      } else {
        console.log("Authorizations table cleared.");
      }
    });
    // Clear data from siteAuthorizations table
    db.run("DELETE FROM siteAuthorizations", (err) => {
      if (err) {
        console.error("Error clearing siteAuthorizations table:", err);
      } else {
        console.log("Site Authorizations table cleared.");
      }
    });
    // Clear data from userAuthorizations table
    db.run("DELETE FROM userAuthorizations", (err) => {
      if (err) {
        console.error("Error clearing userAuthorizations table:", err);
      } else {
        console.log("User Authorizations table cleared.");
      }
    });
  });
}
export default {
  db,
  insertSiteAuthorization,
  insertUserAuthorization,
  getAccessTokenFromSiteId,
  getAccessTokenFromUserId,
  clearDatabase,
};

Now you've set up your server to retreive an access token, let’s configure a database to store user credentials and authorization details in database.js.

Set up the database schema and tables

First, you’ll create the necessary database schema to store site and user authorizations. This includes two main tables to associate site IDs and user IDs with their respective access tokens.

Store authorization data

main.js

server.js

database.js

jwt.js

.env

import sqlite3 from "sqlite3";
import jwt from "jsonwebtoken";
import dotenv from "dotenv";
// Enable dotenv to load environment variables
dotenv.config();
// Enable verbose mode for SQLite3
const sqlite3Verbose = sqlite3.verbose();
// Open SQLite database connection
const db = new sqlite3Verbose.Database("./db/database.db");
// Create tables
db.serialize(() => {
  // Table to associate site ID with access token from OAuth
  db.run(`
    CREATE TABLE IF NOT EXISTS siteAuthorizations (
      siteId TEXT PRIMARY KEY,
      accessToken TEXT
    )
  `);
  // Table to associate user ID with the access token
  db.run(`
    CREATE TABLE IF NOT EXISTS userAuthorizations (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      userId TEXT,
      accessToken TEXT
    )
  `);
});
// Insert a record after exchanging the OAuth code for an access token
function insertSiteAuthorization(siteId, accessToken) {
  db.get(
    "SELECT * FROM siteAuthorizations WHERE siteId = ?",
    [siteId],
    (err, existingAuth) => {
      if (err) {
        console.error("Error checking for existing site authorization:", err);
        return;
      }
      // If the user already exists, return the existing user
      if (existingAuth) {
        console.log("Site auth already exists:", existingAuth);
        return;
      }
      db.run(
        "INSERT INTO siteAuthorizations (siteId, accessToken) VALUES (?, ?)",
        [siteId, accessToken],
        (err) => {
          if (err) {
            console.error("Error inserting site authorization pairing:", err);
          } else {
            console.log("Site authorization pairing inserted successfully.");
          }
        }
      );
    }
  );
}
// Insert a record when the /resolve endpoint succeeds and can trust the user to be associated
// with the access token
function insertUserAuthorization(userId, accessToken) {
  db.get(
    "SELECT * FROM userAuthorizations WHERE userId = ?",
    [userId],
    (err, existingTokenAuth) => {
      if (err) {
        console.error("Error checking for existing user access token:", err);
        return;
      }
      // If the user already exists, return the existing user
      if (existingTokenAuth) {
        console.log("Access token pairing already exists:", existingTokenAuth);
        return;
      }
      db.run(
        "INSERT INTO userAuthorizations (userId, accessToken) VALUES (?, ?)",
        [userId, accessToken],
        (err) => {
          if (err) {
            console.error("Error inserting user access token pairing:", err);
          } else {
            console.log("User access token pairing inserted successfully.");
          }
        }
      );
    }
  );
}
function getAccessTokenFromSiteId(siteId, callback) {
  // Retrieve the access token from the database
  db.get(
    "SELECT accessToken FROM siteAuthorizations WHERE siteId = ?",
    [siteId],
    (err, row) => {
      if (err) {
        console.error("Error retrieving access token:", err);
        return callback(err, null);
      }
      // Check if site exists and has an accessToken
      if (row && row.accessToken) {
        return callback(null, row.accessToken);
      } else {
        // No user or no access token available
        return callback(
          new Error("No access token found or site does not exist"),
          null
        );
      }
    }
  );
}
function getAccessTokenFromUserId(userId, callback) {
  // Retrieve the access token from the database
  db.get(
    "SELECT accessToken FROM userAuthorizations WHERE userId = ?",
    [userId],
    (err, row) => {
      if (err) {
        console.error("Error retrieving access token:", err);
        return callback(err, null);
      }
      // Check if user exists and has an accessToken
      if (row && row.accessToken) {
        return callback(null, row.accessToken);
      } else {
        // No user or no access token available
        return callback(
          new Error("No access token found or user does not exist"),
          null
        );
      }
    }
  );
}
function clearDatabase() {
  db.serialize(() => {
    // Clear data from authorizations table
    db.run("DELETE FROM authorizations", (err) => {
      if (err) {
        console.error("Error clearing authorizations table:", err);
      } else {
        console.log("Authorizations table cleared.");
      }
    });
    // Clear data from siteAuthorizations table
    db.run("DELETE FROM siteAuthorizations", (err) => {
      if (err) {
        console.error("Error clearing siteAuthorizations table:", err);
      } else {
        console.log("Site Authorizations table cleared.");
      }
    });
    // Clear data from userAuthorizations table
    db.run("DELETE FROM userAuthorizations", (err) => {
      if (err) {
        console.error("Error clearing userAuthorizations table:", err);
      } else {
        console.log("User Authorizations table cleared.");
      }
    });
  });
}
export default {
  db,
  insertSiteAuthorization,
  insertUserAuthorization,
  getAccessTokenFromSiteId,
  getAccessTokenFromUserId,
  clearDatabase,
};

Next, you’ll store the Site IDs and user access tokens in the database using functions that insert new records if they don’t already exist.

Store Site Authorization Data with insertSiteAuthorization
Use this function to pair a siteId with its access token when a site is initially authorized.
Store User Authorization Data with insertUserAuthorization
Use this function to pair a userId and access token.

Retrieve authorization data

main.js

server.js

database.js

jwt.js

.env

import sqlite3 from "sqlite3";
import jwt from "jsonwebtoken";
import dotenv from "dotenv";
// Enable dotenv to load environment variables
dotenv.config();
// Enable verbose mode for SQLite3
const sqlite3Verbose = sqlite3.verbose();
// Open SQLite database connection
const db = new sqlite3Verbose.Database("./db/database.db");
// Create tables
db.serialize(() => {
  // Table to associate site ID with access token from OAuth
  db.run(`
    CREATE TABLE IF NOT EXISTS siteAuthorizations (
      siteId TEXT PRIMARY KEY,
      accessToken TEXT
    )
  `);
  // Table to associate user ID with the access token
  db.run(`
    CREATE TABLE IF NOT EXISTS userAuthorizations (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      userId TEXT,
      accessToken TEXT
    )
  `);
});
// Insert a record after exchanging the OAuth code for an access token
function insertSiteAuthorization(siteId, accessToken) {
  db.get(
    "SELECT * FROM siteAuthorizations WHERE siteId = ?",
    [siteId],
    (err, existingAuth) => {
      if (err) {
        console.error("Error checking for existing site authorization:", err);
        return;
      }
      // If the user already exists, return the existing user
      if (existingAuth) {
        console.log("Site auth already exists:", existingAuth);
        return;
      }
      db.run(
        "INSERT INTO siteAuthorizations (siteId, accessToken) VALUES (?, ?)",
        [siteId, accessToken],
        (err) => {
          if (err) {
            console.error("Error inserting site authorization pairing:", err);
          } else {
            console.log("Site authorization pairing inserted successfully.");
          }
        }
      );
    }
  );
}
// Insert a record when the /resolve endpoint succeeds and can trust the user to be associated
// with the access token
function insertUserAuthorization(userId, accessToken) {
  db.get(
    "SELECT * FROM userAuthorizations WHERE userId = ?",
    [userId],
    (err, existingTokenAuth) => {
      if (err) {
        console.error("Error checking for existing user access token:", err);
        return;
      }
      // If the user already exists, return the existing user
      if (existingTokenAuth) {
        console.log("Access token pairing already exists:", existingTokenAuth);
        return;
      }
      db.run(
        "INSERT INTO userAuthorizations (userId, accessToken) VALUES (?, ?)",
        [userId, accessToken],
        (err) => {
          if (err) {
            console.error("Error inserting user access token pairing:", err);
          } else {
            console.log("User access token pairing inserted successfully.");
          }
        }
      );
    }
  );
}
function getAccessTokenFromSiteId(siteId, callback) {
  // Retrieve the access token from the database
  db.get(
    "SELECT accessToken FROM siteAuthorizations WHERE siteId = ?",
    [siteId],
    (err, row) => {
      if (err) {
        console.error("Error retrieving access token:", err);
        return callback(err, null);
      }
      // Check if site exists and has an accessToken
      if (row && row.accessToken) {
        return callback(null, row.accessToken);
      } else {
        // No user or no access token available
        return callback(
          new Error("No access token found or site does not exist"),
          null
        );
      }
    }
  );
}
function getAccessTokenFromUserId(userId, callback) {
  // Retrieve the access token from the database
  db.get(
    "SELECT accessToken FROM userAuthorizations WHERE userId = ?",
    [userId],
    (err, row) => {
      if (err) {
        console.error("Error retrieving access token:", err);
        return callback(err, null);
      }
      // Check if user exists and has an accessToken
      if (row && row.accessToken) {
        return callback(null, row.accessToken);
      } else {
        // No user or no access token available
        return callback(
          new Error("No access token found or user does not exist"),
          null
        );
      }
    }
  );
}
function clearDatabase() {
  db.serialize(() => {
    // Clear data from authorizations table
    db.run("DELETE FROM authorizations", (err) => {
      if (err) {
        console.error("Error clearing authorizations table:", err);
      } else {
        console.log("Authorizations table cleared.");
      }
    });
    // Clear data from siteAuthorizations table
    db.run("DELETE FROM siteAuthorizations", (err) => {
      if (err) {
        console.error("Error clearing siteAuthorizations table:", err);
      } else {
        console.log("Site Authorizations table cleared.");
      }
    });
    // Clear data from userAuthorizations table
    db.run("DELETE FROM userAuthorizations", (err) => {
      if (err) {
        console.error("Error clearing userAuthorizations table:", err);
      } else {
        console.log("User Authorizations table cleared.");
      }
    });
  });
}
export default {
  db,
  insertSiteAuthorization,
  insertUserAuthorization,
  getAccessTokenFromSiteId,
  getAccessTokenFromUserId,
  clearDatabase,
};

Finally, you’ll retrieve the stored access tokens using functions designed to fetch access tokens based on siteId or userId.

Retrieve Site Access Tokens with getAccessTokenFromSiteId
This function retrieves the access token for a specific siteId. We'll use this function to obtain user details from Webflow's Resolve ID Token endpoint when a Designer Extension sends an idToken and siteId to our /token endpoint.
Retrieve User Access Tokens with getAccessTokenFromUserId
Use this function to get a user-specific access token, enabling authenticated access to the Webflow API based on the userId.

Export functions

main.js

server.js

database.js

jwt.js

.env

import sqlite3 from "sqlite3";
import jwt from "jsonwebtoken";
import dotenv from "dotenv";
// Enable dotenv to load environment variables
dotenv.config();
// Enable verbose mode for SQLite3
const sqlite3Verbose = sqlite3.verbose();
// Open SQLite database connection
const db = new sqlite3Verbose.Database("./db/database.db");
// Create tables
db.serialize(() => {
  // Table to associate site ID with access token from OAuth
  db.run(`
    CREATE TABLE IF NOT EXISTS siteAuthorizations (
      siteId TEXT PRIMARY KEY,
      accessToken TEXT
    )
  `);
  // Table to associate user ID with the access token
  db.run(`
    CREATE TABLE IF NOT EXISTS userAuthorizations (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      userId TEXT,
      accessToken TEXT
    )
  `);
});
// Insert a record after exchanging the OAuth code for an access token
function insertSiteAuthorization(siteId, accessToken) {
  db.get(
    "SELECT * FROM siteAuthorizations WHERE siteId = ?",
    [siteId],
    (err, existingAuth) => {
      if (err) {
        console.error("Error checking for existing site authorization:", err);
        return;
      }
      // If the user already exists, return the existing user
      if (existingAuth) {
        console.log("Site auth already exists:", existingAuth);
        return;
      }
      db.run(
        "INSERT INTO siteAuthorizations (siteId, accessToken) VALUES (?, ?)",
        [siteId, accessToken],
        (err) => {
          if (err) {
            console.error("Error inserting site authorization pairing:", err);
          } else {
            console.log("Site authorization pairing inserted successfully.");
          }
        }
      );
    }
  );
}
// Insert a record when the /resolve endpoint succeeds and can trust the user to be associated
// with the access token
function insertUserAuthorization(userId, accessToken) {
  db.get(
    "SELECT * FROM userAuthorizations WHERE userId = ?",
    [userId],
    (err, existingTokenAuth) => {
      if (err) {
        console.error("Error checking for existing user access token:", err);
        return;
      }
      // If the user already exists, return the existing user
      if (existingTokenAuth) {
        console.log("Access token pairing already exists:", existingTokenAuth);
        return;
      }
      db.run(
        "INSERT INTO userAuthorizations (userId, accessToken) VALUES (?, ?)",
        [userId, accessToken],
        (err) => {
          if (err) {
            console.error("Error inserting user access token pairing:", err);
          } else {
            console.log("User access token pairing inserted successfully.");
          }
        }
      );
    }
  );
}
function getAccessTokenFromSiteId(siteId, callback) {
  // Retrieve the access token from the database
  db.get(
    "SELECT accessToken FROM siteAuthorizations WHERE siteId = ?",
    [siteId],
    (err, row) => {
      if (err) {
        console.error("Error retrieving access token:", err);
        return callback(err, null);
      }
      // Check if site exists and has an accessToken
      if (row && row.accessToken) {
        return callback(null, row.accessToken);
      } else {
        // No user or no access token available
        return callback(
          new Error("No access token found or site does not exist"),
          null
        );
      }
    }
  );
}
function getAccessTokenFromUserId(userId, callback) {
  // Retrieve the access token from the database
  db.get(
    "SELECT accessToken FROM userAuthorizations WHERE userId = ?",
    [userId],
    (err, row) => {
      if (err) {
        console.error("Error retrieving access token:", err);
        return callback(err, null);
      }
      // Check if user exists and has an accessToken
      if (row && row.accessToken) {
        return callback(null, row.accessToken);
      } else {
        // No user or no access token available
        return callback(
          new Error("No access token found or user does not exist"),
          null
        );
      }
    }
  );
}
function clearDatabase() {
  db.serialize(() => {
    // Clear data from authorizations table
    db.run("DELETE FROM authorizations", (err) => {
      if (err) {
        console.error("Error clearing authorizations table:", err);
      } else {
        console.log("Authorizations table cleared.");
      }
    });
    // Clear data from siteAuthorizations table
    db.run("DELETE FROM siteAuthorizations", (err) => {
      if (err) {
        console.error("Error clearing siteAuthorizations table:", err);
      } else {
        console.log("Site Authorizations table cleared.");
      }
    });
    // Clear data from userAuthorizations table
    db.run("DELETE FROM userAuthorizations", (err) => {
      if (err) {
        console.error("Error clearing userAuthorizations table:", err);
      } else {
        console.log("User Authorizations table cleared.");
      }
    });
  });
}
export default {
  db,
  insertSiteAuthorization,
  insertUserAuthorization,
  getAccessTokenFromSiteId,
  getAccessTokenFromUserId,
  clearDatabase,
};

Once these functions are ready, export them along with the database connection.

Configure authorization flow with token storage

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
});
// Authenticate Designer Extension User via ID Token
app.post("/token", async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve Session token by makeing a Request to Webflow API
  const APP_TOKEN = process.env.APP_TOKEN;
  const options = {
    method: "POST",
    url: "https://api.webflow.com/beta/token/resolve",
    headers: {
      accept: "application/json",
      "content-type": "application/json",
      authorization: `Bearer ${process.env.APP_TOKEN}`,
    },
    data: {
      idToken: token,
    },
  };
  const request = await axios.request(options);
  const user = request.data;
  // Generate a Session Token
  const sessionToken = jwt.createSessionToken(user)
  // Respond to user with sesion token
  res.json({ sessionToken });
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateToken ,async (req, res) => {
  
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    console.log(accessToken)
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

To handle authorization effectively, you’ll need to store access tokens securely.

Import the `database` module into `server.js`

Exchange Aauthorization Code for Access Token and store it in the database

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
});
// Authenticate Designer Extension User via ID Token
app.post("/token", async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve Session token by makeing a Request to Webflow API
  const APP_TOKEN = process.env.APP_TOKEN;
  const options = {
    method: "POST",
    url: "https://api.webflow.com/beta/token/resolve",
    headers: {
      accept: "application/json",
      "content-type": "application/json",
      authorization: `Bearer ${process.env.APP_TOKEN}`,
    },
    data: {
      idToken: token,
    },
  };
  const request = await axios.request(options);
  const user = request.data;
  // Generate a Session Token
  const sessionToken = jwt.createSessionToken(user)
  // Respond to user with sesion token
  res.json({ sessionToken });
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateToken ,async (req, res) => {
  
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    console.log(accessToken)
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Update the /callback endpoint in server.js to exchange the code for an accessToken.

To get a list of Sites that the App is authorized to access, instatiate the WebflowClient and call the List Sites endpoint. For each authorized site, use the db.insertSiteAuthorization function to store the siteId and corresponding accessToken in the database for secure, future access.

Redirect the User to the Designer Extension using a deep link

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
});
// Authenticate Designer Extension User via ID Token
app.post("/token", async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve Session token by makeing a Request to Webflow API
  const APP_TOKEN = process.env.APP_TOKEN;
  const options = {
    method: "POST",
    url: "https://api.webflow.com/beta/token/resolve",
    headers: {
      accept: "application/json",
      "content-type": "application/json",
      authorization: `Bearer ${process.env.APP_TOKEN}`,
    },
    data: {
      idToken: token,
    },
  };
  const request = await axios.request(options);
  const user = request.data;
  // Generate a Session Token
  const sessionToken = jwt.createSessionToken(user)
  // Respond to user with sesion token
  res.json({ sessionToken });
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateToken ,async (req, res) => {
  
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    console.log(accessToken)
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

This link allows the user to seamlessly continue within your App in the Webflow Designer. For now, the example below redirects to the first available site, but you could enhance the UX by allowing users to select a specific site before redirecting.

Integrate JWT for secure session management

main.js

server.js

database.js

jwt.js

.env

import jwt from "jsonwebtoken";
import db from "./database.js";
// Given a site ID, retrieve associated Access Token
const retrieveAccessToken = (req, res, next) => {
  const idToken = req.body.idToken;
  const siteId = req.body.siteId;
  if (!idToken) {
    return res.status(401).json({ message: "ID Token is missing" });
  }
  if (!siteId) {
    return res.status(401).json({ message: "Site ID is missing" });
  }
  db.getAccessTokenFromSiteId(siteId, (error, accessToken) => {
    if (error) {
      return res.status(500).json({ error: "Failed to retrieve access token" });
    }
    // Attach access token in the request object so that you can make an authenticated request to Webflow
    req.accessToken = accessToken;
    next(); // Proceed to next middleware or route handler
  });
};
const createSessionToken = (user) => {
  const sessionToken = jwt.sign({ user }, process.env.WEBFLOW_CLIENT_SECRET, {
    expiresIn: "24h",
  }); // Example expiration time of 1 hour}
  const decodedToken = jwt.decode(sessionToken);
  return {
    sessionToken,
    exp: decodedToken.exp,
  };
};
// Middleware to authenticate and validate JWT, and fetch the access token given the user ID
const authenticateSessionToken = (req, res, next) => {
  const authHeader = req.headers.authorization;
  const sessionToken = authHeader && authHeader.split(" ")[1]; // Extract the token from 'Bearer <token>'
  if (!sessionToken) {
    return res.status(401).json({ message: "Authentication token is missing" });
  }
  // Verify the Token
  jwt.verify(sessionToken, process.env.WEBFLOW_CLIENT_SECRET, (err, user) => {
    if (err) {
      return res.status(403).json({ message: "Invalid or expired token" });
    }
    // Use the user details to fetch the access token from the database
    db.getAccessTokenFromUserId(user.user.id, (error, accessToken) => {
      if (error) {
        return res
          .status(500)
          .json({ error: "Failed to retrieve access token" });
      }
      // Attach access token in the request object so that you can make an authenticated request to Webflow
      req.accessToken = accessToken;
      next(); // Proceed to next middleware or route handler
    });
  });
};
export default {
  createSessionToken,
  retrieveAccessToken,
  authenticateSessionToken,
};

With our database configured to handle access tokens, it’s time to implement JSON Web Tokens (JWT) to securely manage sessions and authenticate requests in the Data Client.

JWT will enable us to issue session tokens and validate them, allowing for a secure, stateless authentication flow.

Setting up JWT middleware

main.js

server.js

database.js

jwt.js

.env

import jwt from "jsonwebtoken";
import db from "./database.js";
// Given a site ID, retrieve associated Access Token
const retrieveAccessToken = (req, res, next) => {
  const idToken = req.body.idToken;
  const siteId = req.body.siteId;
  if (!idToken) {
    return res.status(401).json({ message: "ID Token is missing" });
  }
  if (!siteId) {
    return res.status(401).json({ message: "Site ID is missing" });
  }
  db.getAccessTokenFromSiteId(siteId, (error, accessToken) => {
    if (error) {
      return res.status(500).json({ error: "Failed to retrieve access token" });
    }
    // Attach access token in the request object so that you can make an authenticated request to Webflow
    req.accessToken = accessToken;
    next(); // Proceed to next middleware or route handler
  });
};
const createSessionToken = (user) => {
  const sessionToken = jwt.sign({ user }, process.env.WEBFLOW_CLIENT_SECRET, {
    expiresIn: "24h",
  }); // Example expiration time of 1 hour}
  const decodedToken = jwt.decode(sessionToken);
  return {
    sessionToken,
    exp: decodedToken.exp,
  };
};
// Middleware to authenticate and validate JWT, and fetch the access token given the user ID
const authenticateSessionToken = (req, res, next) => {
  const authHeader = req.headers.authorization;
  const sessionToken = authHeader && authHeader.split(" ")[1]; // Extract the token from 'Bearer <token>'
  if (!sessionToken) {
    return res.status(401).json({ message: "Authentication token is missing" });
  }
  // Verify the Token
  jwt.verify(sessionToken, process.env.WEBFLOW_CLIENT_SECRET, (err, user) => {
    if (err) {
      return res.status(403).json({ message: "Invalid or expired token" });
    }
    // Use the user details to fetch the access token from the database
    db.getAccessTokenFromUserId(user.user.id, (error, accessToken) => {
      if (error) {
        return res
          .status(500)
          .json({ error: "Failed to retrieve access token" });
      }
      // Attach access token in the request object so that you can make an authenticated request to Webflow
      req.accessToken = accessToken;
      next(); // Proceed to next middleware or route handler
    });
  });
};
export default {
  createSessionToken,
  retrieveAccessToken,
  authenticateSessionToken,
};

In jwt.js, start by importing the jsonwebtoken library and your custom database module. These imports will allow you to handle JWT creation and validation, as well as access and store authorization data in your database.

Retrieve the Access Token based on the Site ID

main.js

server.js

database.js

jwt.js

.env

import jwt from "jsonwebtoken";
import db from "./database.js";
// Given a site ID, retrieve associated Access Token
const retrieveAccessToken = (req, res, next) => {
  const idToken = req.body.idToken;
  const siteId = req.body.siteId;
  if (!idToken) {
    return res.status(401).json({ message: "ID Token is missing" });
  }
  if (!siteId) {
    return res.status(401).json({ message: "Site ID is missing" });
  }
  db.getAccessTokenFromSiteId(siteId, (error, accessToken) => {
    if (error) {
      return res.status(500).json({ error: "Failed to retrieve access token" });
    }
    // Attach access token in the request object so that you can make an authenticated request to Webflow
    req.accessToken = accessToken;
    next(); // Proceed to next middleware or route handler
  });
};
const createSessionToken = (user) => {
  const sessionToken = jwt.sign({ user }, process.env.WEBFLOW_CLIENT_SECRET, {
    expiresIn: "24h",
  }); // Example expiration time of 1 hour}
  const decodedToken = jwt.decode(sessionToken);
  return {
    sessionToken,
    exp: decodedToken.exp,
  };
};
// Middleware to authenticate and validate JWT, and fetch the access token given the user ID
const authenticateSessionToken = (req, res, next) => {
  const authHeader = req.headers.authorization;
  const sessionToken = authHeader && authHeader.split(" ")[1]; // Extract the token from 'Bearer <token>'
  if (!sessionToken) {
    return res.status(401).json({ message: "Authentication token is missing" });
  }
  // Verify the Token
  jwt.verify(sessionToken, process.env.WEBFLOW_CLIENT_SECRET, (err, user) => {
    if (err) {
      return res.status(403).json({ message: "Invalid or expired token" });
    }
    // Use the user details to fetch the access token from the database
    db.getAccessTokenFromUserId(user.user.id, (error, accessToken) => {
      if (error) {
        return res
          .status(500)
          .json({ error: "Failed to retrieve access token" });
      }
      // Attach access token in the request object so that you can make an authenticated request to Webflow
      req.accessToken = accessToken;
      next(); // Proceed to next middleware or route handler
    });
  });
};
export default {
  createSessionToken,
  retrieveAccessToken,
  authenticateSessionToken,
};

Create the retrieveAccessToken function to obtain the Access Token associated with a given siteId using the db.getAccssTokenFromSiteId function we created in our database module.

When the Designer Extension passes a siteId and idToken to our /token endpoint in the Data Client, we'll use this middleware to retreive the Access Token associated with the siteId and attach it to the request object. This way, subsequent steps in the endpoint have access to the token, allowing the Data Client to securely interact with Webflow’s API.

Create the Session Token from User Data

main.js

server.js

database.js

jwt.js

.env

import jwt from "jsonwebtoken";
import db from "./database.js";
// Given a site ID, retrieve associated Access Token
const retrieveAccessToken = (req, res, next) => {
  const idToken = req.body.idToken;
  const siteId = req.body.siteId;
  if (!idToken) {
    return res.status(401).json({ message: "ID Token is missing" });
  }
  if (!siteId) {
    return res.status(401).json({ message: "Site ID is missing" });
  }
  db.getAccessTokenFromSiteId(siteId, (error, accessToken) => {
    if (error) {
      return res.status(500).json({ error: "Failed to retrieve access token" });
    }
    // Attach access token in the request object so that you can make an authenticated request to Webflow
    req.accessToken = accessToken;
    next(); // Proceed to next middleware or route handler
  });
};
const createSessionToken = (user) => {
  const sessionToken = jwt.sign({ user }, process.env.WEBFLOW_CLIENT_SECRET, {
    expiresIn: "24h",
  }); // Example expiration time of 1 hour}
  const decodedToken = jwt.decode(sessionToken);
  return {
    sessionToken,
    exp: decodedToken.exp,
  };
};
// Middleware to authenticate and validate JWT, and fetch the access token given the user ID
const authenticateSessionToken = (req, res, next) => {
  const authHeader = req.headers.authorization;
  const sessionToken = authHeader && authHeader.split(" ")[1]; // Extract the token from 'Bearer <token>'
  if (!sessionToken) {
    return res.status(401).json({ message: "Authentication token is missing" });
  }
  // Verify the Token
  jwt.verify(sessionToken, process.env.WEBFLOW_CLIENT_SECRET, (err, user) => {
    if (err) {
      return res.status(403).json({ message: "Invalid or expired token" });
    }
    // Use the user details to fetch the access token from the database
    db.getAccessTokenFromUserId(user.user.id, (error, accessToken) => {
      if (error) {
        return res
          .status(500)
          .json({ error: "Failed to retrieve access token" });
      }
      // Attach access token in the request object so that you can make an authenticated request to Webflow
      req.accessToken = accessToken;
      next(); // Proceed to next middleware or route handler
    });
  });
};
export default {
  createSessionToken,
  retrieveAccessToken,
  authenticateSessionToken,
};

The createSessionToken function generates a session token using JWT based on user data from the resolved idToken.

This sessionToken, which includes the user’s details, will later be verified for secure access. The token is set to expire after a defined time (in this example, 24 hours), ensuring that the session remains secure and temporary.

Authenticate the Session Token to Validate User Access on Each Request

main.js

server.js

database.js

jwt.js

.env

import jwt from "jsonwebtoken";
import db from "./database.js";
// Given a site ID, retrieve associated Access Token
const retrieveAccessToken = (req, res, next) => {
  const idToken = req.body.idToken;
  const siteId = req.body.siteId;
  if (!idToken) {
    return res.status(401).json({ message: "ID Token is missing" });
  }
  if (!siteId) {
    return res.status(401).json({ message: "Site ID is missing" });
  }
  db.getAccessTokenFromSiteId(siteId, (error, accessToken) => {
    if (error) {
      return res.status(500).json({ error: "Failed to retrieve access token" });
    }
    // Attach access token in the request object so that you can make an authenticated request to Webflow
    req.accessToken = accessToken;
    next(); // Proceed to next middleware or route handler
  });
};
const createSessionToken = (user) => {
  const sessionToken = jwt.sign({ user }, process.env.WEBFLOW_CLIENT_SECRET, {
    expiresIn: "24h",
  }); // Example expiration time of 1 hour}
  const decodedToken = jwt.decode(sessionToken);
  return {
    sessionToken,
    exp: decodedToken.exp,
  };
};
// Middleware to authenticate and validate JWT, and fetch the access token given the user ID
const authenticateSessionToken = (req, res, next) => {
  const authHeader = req.headers.authorization;
  const sessionToken = authHeader && authHeader.split(" ")[1]; // Extract the token from 'Bearer <token>'
  if (!sessionToken) {
    return res.status(401).json({ message: "Authentication token is missing" });
  }
  // Verify the Token
  jwt.verify(sessionToken, process.env.WEBFLOW_CLIENT_SECRET, (err, user) => {
    if (err) {
      return res.status(403).json({ message: "Invalid or expired token" });
    }
    // Use the user details to fetch the access token from the database
    db.getAccessTokenFromUserId(user.user.id, (error, accessToken) => {
      if (error) {
        return res
          .status(500)
          .json({ error: "Failed to retrieve access token" });
      }
      // Attach access token in the request object so that you can make an authenticated request to Webflow
      req.accessToken = accessToken;
      next(); // Proceed to next middleware or route handler
    });
  });
};
export default {
  createSessionToken,
  retrieveAccessToken,
  authenticateSessionToken,
};

The authenticateSessionToken function is middleware that validates the sessionToken provided in the authorization header of each request. By verifying the sessionToken, this function ensures that only authorized users can access protected routes. Upon successful validation, it retrieves the accessToken for the user and attaches it to the request, allowing further secure interactions with Webflow.

Export these functions once they are ready.

Using JWT middleware in the server

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
  // Send Auth Complete Screen with Post Message
  const filePath = path.join(__dirname, "public", "authComplete.html");
  res.sendFile(filePath);
});
// Authenticate Designer Extension User via ID Token
app.post("/token", jwt.retrieveAccessToken, async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve ID token by making a request to Webflow API
  let sessionToken;
  try {
    const options = {
      method: "POST",
      url: "https://api.webflow.com/beta/token/resolve",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${req.accessToken}`,
      },
      data: {
        idToken: token,
      },
    };
    const request = await axios.request(options);
    const user = request.data;
    // Generate a Session Token
    const tokenPayload = jwt.createSessionToken(user);
    sessionToken = tokenPayload.sessionToken;
    const expAt = tokenPayload.exp;
    db.insertUserAuthorization(user.id, req.accessToken);
    // Respond to user with sesion token
    res.json({ sessionToken, exp: expAt });
  } catch (e) {
    console.error(
      "Unauthorized; user is not associated with authorization for this site",
    );
    res.status(401).json({
      error: "Error: User is not associated with authorization for this site",
    });
  }
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateSessionToken, async (req, res) => {
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken;
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Once the JWT functions are set up, the next step is to import them into server.js to securely manage session tokens and authenticate requests.

Import JWT Middleware Functions

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
  // Send Auth Complete Screen with Post Message
  const filePath = path.join(__dirname, "public", "authComplete.html");
  res.sendFile(filePath);
});
// Authenticate Designer Extension User via ID Token
app.post("/token", jwt.retrieveAccessToken, async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve ID token by making a request to Webflow API
  let sessionToken;
  try {
    const options = {
      method: "POST",
      url: "https://api.webflow.com/beta/token/resolve",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${req.accessToken}`,
      },
      data: {
        idToken: token,
      },
    };
    const request = await axios.request(options);
    const user = request.data;
    // Generate a Session Token
    const tokenPayload = jwt.createSessionToken(user);
    sessionToken = tokenPayload.sessionToken;
    const expAt = tokenPayload.exp;
    db.insertUserAuthorization(user.id, req.accessToken);
    // Respond to user with sesion token
    res.json({ sessionToken, exp: expAt });
  } catch (e) {
    console.error(
      "Unauthorized; user is not associated with authorization for this site",
    );
    res.status(401).json({
      error: "Error: User is not associated with authorization for this site",
    });
  }
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateSessionToken, async (req, res) => {
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken;
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

At the beginning of server.js, import the the JWT middleware.

Update the `/token` endpoint to authenticate the Designer Extension user

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
  // Send Auth Complete Screen with Post Message
  const filePath = path.join(__dirname, "public", "authComplete.html");
  res.sendFile(filePath);
});
// Authenticate Designer Extension User via ID Token
app.post("/token", jwt.retrieveAccessToken, async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve ID token by making a request to Webflow API
  let sessionToken;
  try {
    const options = {
      method: "POST",
      url: "https://api.webflow.com/beta/token/resolve",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${req.accessToken}`,
      },
      data: {
        idToken: token,
      },
    };
    const request = await axios.request(options);
    const user = request.data;
    // Generate a Session Token
    const tokenPayload = jwt.createSessionToken(user);
    sessionToken = tokenPayload.sessionToken;
    const expAt = tokenPayload.exp;
    db.insertUserAuthorization(user.id, req.accessToken);
    // Respond to user with sesion token
    res.json({ sessionToken, exp: expAt });
  } catch (e) {
    console.error(
      "Unauthorized; user is not associated with authorization for this site",
    );
    res.status(401).json({
      error: "Error: User is not associated with authorization for this site",
    });
  }
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateSessionToken, async (req, res) => {
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken;
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Now that you’ve set up the JWT and database functions, you can update the /token endpoint in server.js to securely authenticate the user. This endpoint will:

Retrieve the accessToken associated with the user's siteId
Get user details from the resolved idToken
Generate a Session Token from user details
Store the authorization details

See the steps below for more detail.

1. Retrieve the `accessToken` associated with the user's `siteId`

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
  // Send Auth Complete Screen with Post Message
  const filePath = path.join(__dirname, "public", "authComplete.html");
  res.sendFile(filePath);
});
// Authenticate Designer Extension User via ID Token
app.post("/token", jwt.retrieveAccessToken, async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve ID token by making a request to Webflow API
  let sessionToken;
  try {
    const options = {
      method: "POST",
      url: "https://api.webflow.com/beta/token/resolve",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${req.accessToken}`,
      },
      data: {
        idToken: token,
      },
    };
    const request = await axios.request(options);
    const user = request.data;
    // Generate a Session Token
    const tokenPayload = jwt.createSessionToken(user);
    sessionToken = tokenPayload.sessionToken;
    const expAt = tokenPayload.exp;
    db.insertUserAuthorization(user.id, req.accessToken);
    // Respond to user with sesion token
    res.json({ sessionToken, exp: expAt });
  } catch (e) {
    console.error(
      "Unauthorized; user is not associated with authorization for this site",
    );
    res.status(401).json({
      error: "Error: User is not associated with authorization for this site",
    });
  }
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateSessionToken, async (req, res) => {
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken;
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

The jwt.retrieveAccessToken middleware fetches the accessToken associated with the siteId and attaches it to the request, ensuring secure access for the Webflow API call.

2. Get user details from the resolved `idToken`

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
  // Send Auth Complete Screen with Post Message
  const filePath = path.join(__dirname, "public", "authComplete.html");
  res.sendFile(filePath);
});
// Authenticate Designer Extension User via ID Token
app.post("/token", jwt.retrieveAccessToken, async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve ID token by making a request to Webflow API
  let sessionToken;
  try {
    const options = {
      method: "POST",
      url: "https://api.webflow.com/beta/token/resolve",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${req.accessToken}`,
      },
      data: {
        idToken: token,
      },
    };
    const request = await axios.request(options);
    const user = request.data;
    // Generate a Session Token
    const tokenPayload = jwt.createSessionToken(user);
    sessionToken = tokenPayload.sessionToken;
    const expAt = tokenPayload.exp;
    db.insertUserAuthorization(user.id, req.accessToken);
    // Respond to user with sesion token
    res.json({ sessionToken, exp: expAt });
  } catch (e) {
    console.error(
      "Unauthorized; user is not associated with authorization for this site",
    );
    res.status(401).json({
      error: "Error: User is not associated with authorization for this site",
    });
  }
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateSessionToken, async (req, res) => {
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken;
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Using the accessToken, this endpoint sends an authenticated request to Webflow’s Resolve ID Token endpoint, which validates the idToken received from the Designer Extension, and returns the following user details: id, email, firstName, and lastName.

3. Generate a Session Token

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
  // Send Auth Complete Screen with Post Message
  const filePath = path.join(__dirname, "public", "authComplete.html");
  res.sendFile(filePath);
});
// Authenticate Designer Extension User via ID Token
app.post("/token", jwt.retrieveAccessToken, async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve ID token by making a request to Webflow API
  let sessionToken;
  try {
    const options = {
      method: "POST",
      url: "https://api.webflow.com/beta/token/resolve",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${req.accessToken}`,
      },
      data: {
        idToken: token,
      },
    };
    const request = await axios.request(options);
    const user = request.data;
    // Generate a Session Token
    const tokenPayload = jwt.createSessionToken(user);
    sessionToken = tokenPayload.sessionToken;
    const expAt = tokenPayload.exp;
    db.insertUserAuthorization(user.id, req.accessToken);
    // Respond to user with sesion token
    res.json({ sessionToken, exp: expAt });
  } catch (e) {
    console.error(
      "Unauthorized; user is not associated with authorization for this site",
    );
    res.status(401).json({
      error: "Error: User is not associated with authorization for this site",
    });
  }
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateSessionToken, async (req, res) => {
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken;
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

With the newly obtained user information, the jwt.createSessionToken function creates a Session Token for the authenticated user, establishing a secure, temporary access session.

4. Store Authorization Details

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
  // Send Auth Complete Screen with Post Message
  const filePath = path.join(__dirname, "public", "authComplete.html");
  res.sendFile(filePath);
});
// Authenticate Designer Extension User via ID Token
app.post("/token", jwt.retrieveAccessToken, async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve ID token by making a request to Webflow API
  let sessionToken;
  try {
    const options = {
      method: "POST",
      url: "https://api.webflow.com/beta/token/resolve",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${req.accessToken}`,
      },
      data: {
        idToken: token,
      },
    };
    const request = await axios.request(options);
    const user = request.data;
    // Generate a Session Token
    const tokenPayload = jwt.createSessionToken(user);
    sessionToken = tokenPayload.sessionToken;
    const expAt = tokenPayload.exp;
    db.insertUserAuthorization(user.id, req.accessToken);
    // Respond to user with sesion token
    res.json({ sessionToken, exp: expAt });
  } catch (e) {
    console.error(
      "Unauthorized; user is not associated with authorization for this site",
    );
    res.status(401).json({
      error: "Error: User is not associated with authorization for this site",
    });
  }
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateSessionToken, async (req, res) => {
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken;
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Finally, the retrieved accessToken is stored in the database and associated with the userId using db.insertUserAuthorization, enabling easy access and authorization for subsequent requests

Create a protected endpoint for authenticated Webflow requests

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
  // Send Auth Complete Screen with Post Message
  const filePath = path.join(__dirname, "public", "authComplete.html");
  res.sendFile(filePath);
});
// Authenticate Designer Extension User via ID Token
app.post("/token", jwt.retrieveAccessToken, async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve ID token by making a request to Webflow API
  let sessionToken;
  try {
    const options = {
      method: "POST",
      url: "https://api.webflow.com/beta/token/resolve",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${req.accessToken}`,
      },
      data: {
        idToken: token,
      },
    };
    const request = await axios.request(options);
    const user = request.data;
    // Generate a Session Token
    const tokenPayload = jwt.createSessionToken(user);
    sessionToken = tokenPayload.sessionToken;
    const expAt = tokenPayload.exp;
    db.insertUserAuthorization(user.id, req.accessToken);
    // Respond to user with sesion token
    res.json({ sessionToken, exp: expAt });
  } catch (e) {
    console.error(
      "Unauthorized; user is not associated with authorization for this site",
    );
    res.status(401).json({
      error: "Error: User is not associated with authorization for this site",
    });
  }
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateSessionToken, async (req, res) => {
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken;
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

To demonstrate how to make secure, protected requests, let's set up an endpoint that requires a Session Token for access. We'll create a new /sites endpoint that will:

Authenticate the Session Token
Access Webflow data in the Data Client
Return Webflow data to the Designer Extension

1. Authenticate the Session Token

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
  // Send Auth Complete Screen with Post Message
  const filePath = path.join(__dirname, "public", "authComplete.html");
  res.sendFile(filePath);
});
// Authenticate Designer Extension User via ID Token
app.post("/token", jwt.retrieveAccessToken, async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve ID token by making a request to Webflow API
  let sessionToken;
  try {
    const options = {
      method: "POST",
      url: "https://api.webflow.com/beta/token/resolve",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${req.accessToken}`,
      },
      data: {
        idToken: token,
      },
    };
    const request = await axios.request(options);
    const user = request.data;
    // Generate a Session Token
    const tokenPayload = jwt.createSessionToken(user);
    sessionToken = tokenPayload.sessionToken;
    const expAt = tokenPayload.exp;
    db.insertUserAuthorization(user.id, req.accessToken);
    // Respond to user with sesion token
    res.json({ sessionToken, exp: expAt });
  } catch (e) {
    console.error(
      "Unauthorized; user is not associated with authorization for this site",
    );
    res.status(401).json({
      error: "Error: User is not associated with authorization for this site",
    });
  }
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateSessionToken, async (req, res) => {
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken;
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

This endpoint will use `jwt.authenticateSessionToken` middleware to verifiy the session token passed with the request, ensuring that only authorized users can access this endpoint. Once authenticated, the middleware retrieves the user's associated `accessToken` and attaches it to the request.

2. Access Webflow Data in the Data Client

server.js

_1

The Data Client then uses the accessToken attached to the request to initialize the Webflow client and fetch data from Webflow’s List Sites endpoint.

3. Return Webflow Data to the Designer Extension

main.js

server.js

database.js

jwt.js

.env

const express = require("express");
const cors = require("cors");
const { WebflowClient } = require("webflow-api");
const axios = require("axios");
require("dotenv").config();
const app = express(); // Create an Express application
const db = require("./database.js"); // Load DB Logic
const jwt = require("./jwt.js")
var corsOptions = { origin: ["http://localhost:1337"] };
// Middleware
app.use(cors(corsOptions)); // Enable CORS with the specified options
app.use(express.json()); // Parse JSON-formatted incoming requests
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded incoming requests with extended syntax
// Redirect user to Webflow Authorization screen
app.get("/authorize", (req, res) => {
    const authorizeUrl = WebflowClient.authorizeURL({
        scope: ["sites:read","authorized_user:read"],
        clientId: process.env.WEBFLOW_CLIENT_ID,
    })
    res.redirect(authorizeUrl)
})
// Optional: Redirect root to Webflow Authorization screen
app.get("/", (req,res) =>{
    res.redirect("/authorize")
})
// Exchange the authorization code for an access token and save to DB
app.get("/callback", async (req, res) => {
  const { code } = req.query;
  // Get Access Token
  const accessToken = await WebflowClient.getAccessToken({
    clientId: process.env.WEBFLOW_CLIENT_ID,
    clientSecret: process.env.WEBFLOW_CLIENT_SECRET,
    code: code,
  });
  // Instantiate the Webflow Client
  const webflow = new WebflowClient({ accessToken });
  // Get site ID to pair with the authorization access token
  const sites = await webflow.sites.list();
  sites.sites.forEach((site) => {
    db.insertSiteAuthorization(site.id, accessToken);
  });
  // Redirect URI with first site, can improve UX later for choosing a site
  // to redirect to
  const firstSite = sites.sites?.[0];
  if (firstSite) {
    const shortName = firstSite.shortName;
    res.redirect(
      `https://${shortName}.design.webflow.com?app=${process.env.WEBFLOW_CLIENT_ID}`
    );
    return;
  }
  // Send Auth Complete Screen with Post Message
  const filePath = path.join(__dirname, "public", "authComplete.html");
  res.sendFile(filePath);
});
// Authenticate Designer Extension User via ID Token
app.post("/token", jwt.retrieveAccessToken, async (req, res) => {
  const token = req.body.idToken; // Get token from request
  // Resolve ID token by making a request to Webflow API
  let sessionToken;
  try {
    const options = {
      method: "POST",
      url: "https://api.webflow.com/beta/token/resolve",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${req.accessToken}`,
      },
      data: {
        idToken: token,
      },
    };
    const request = await axios.request(options);
    const user = request.data;
    // Generate a Session Token
    const tokenPayload = jwt.createSessionToken(user);
    sessionToken = tokenPayload.sessionToken;
    const expAt = tokenPayload.exp;
    db.insertUserAuthorization(user.id, req.accessToken);
    // Respond to user with sesion token
    res.json({ sessionToken, exp: expAt });
  } catch (e) {
    console.error(
      "Unauthorized; user is not associated with authorization for this site",
    );
    res.status(401).json({
      error: "Error: User is not associated with authorization for this site",
    });
  }
});
// Make authenticated request with user's session token
app.get("/sites", jwt.authenticateSessionToken, async (req, res) => {
  try {
    // Initialize Webflow Client and make request to sites endpoint
    const accessToken = req.accessToken;
    const webflow = new WebflowClient({ accessToken });
    const data = await webflow.sites.list();
    // Send the retrieved data back to the client
    res.json({ data });
  } catch (error) {
    console.error("Error handling authenticated request:", error);
    res.status(500).json({ error: "Internal server error" });
  }
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

After retrieving the data, the endpoint responds with the information, providing the user access to their Webflow sites in the Designer Extension.

Start your App and test your authentication flow

You're all set up to securely make calls to the Webflow Data API from a Designer Extension. To test out your App, run the following command to get started:

$ npm run dev

Once your App is up and running:

Set Your Callback URI: Update the Webflow dashboard with the correct callback URI to ensure the OAuth flow can return to your app after authentication.
Open your App in the Designer: Open a site in the Designer and open your test App with the corresponding CLIENT_ID
Authorize in the Designer Extension: Open your Designer Extension and click the "Authorize" button to initiate the authentication flow.

Congratulations!

You have a working Hybrid app that can securely make requests to Webflow’s Data APIs.

Next steps

Add Elements to the Canvas in bulk

Create and manpulate complex hierarchical designs using the ElementBuilder APIs.

Add Custom Code to a Site

Learn how to register, apply, and manage custom scripts on a site or page using the Data APIs.

Publish your Hybrid App

Once you've finished developing your app, discover how to publish it and share it in the marketplace.

Securely connect your browser-based Designer Extension to your server-side Data Client.

In this tutorial we’ll build a Hybrid App that:

Authorizes sites upon App installation
Transmits a Site ID and ID Token
Send a Site ID and ID Token from the Designer Extension to the Data Client for verification.
Resolves the ID Token on the Server Side
The Data Client resolves the ID Token to get user details from Webflow and verify access.
Maps user authorization
Establish a link between the user and their authorized sites, allowing for secure access to site data.
Creates a Session Token for the user
Generate and send a session token to the Designer Extension to securely maintain the user’s session and enable authenticated requests.
Makes authenticated requests to Webflow’s Data APIs
Use the session token and stored tokens to make authenticated API calls to Webflow’s Data APIs.

By the end, you’ll have a secure, fully integrated setup to handle user sessions and seamlessly make requests to external APIs.

Prerequisites

A Hybrid App with the following scopes: sites:read, authorized_user:read
The CLIENT_ID and CLIENT_SECRET for your App
An ngrok authentication token
An understanding of how to authenticate a Webflow User
Basic knowledge of Node.js and Express
Familiarity with building React Single-Page Applications

Set up your development environment

Clone the starter code

If you have the GitHub CLI installed, type the following command into your terminal.

$ gh repo clone Webflow-Examples/Hybrid-App-Authentication

Otherwise, you can clone the repository from GitHub.com

Install dependencies

This example contains both a Designer Extension and Data Client project. Input the following commands in your terminal to install all necessary dependencies for the example.

$ cd hybrid-app-authentication 

npm install 

npm run install-frontend 

npm run install-backend

Add environment variables

Replace the example values in the .env.example file with your credentials. Rename the file to .env

Review Designer Extension

To get started, review the exchangeAndVerifyIdToken function in the Designer Extension.

Retrieving the `idToken` from the Designer Extension.

Exchanging the `idToken` and `siteId` for a Session Token

With the ID token and Site ID in hand, the Designer Extension then sends this information to an endpoint on the Data Client.

Set up your server

Switching to the Data Client, let’s quickly set up an Express server to handle incoming requests and prepare for adding authentication in Data Client/server.js.

Initialize Express

Create your server with Express, configure CORS to accept incoming requests from your Designer, and set up middleware for JSON and URL-encoded requests

Configure authorization flow

For an in-depth explanation on setting up auth, check out the guide

Handling the ID Token and Site ID from the Designer Extension

To manage this, you’ll need to set up a new endpoint that:

Validates the ID Token received from the Designer Extension using the Resolve ID Token endpoint.
Retrieves an accessToken associated with the Site ID from a database
Generates a Session Token for secure, temporary access.
Stores the accessToken in your database, associating it with the user or site.
Sends the Session Token to the Designer Extension

For now, we’ll set up the endpoint to receive the ID Token. We’ll add the database storage, access token retrieval, and session token generation in the next steps.

Set up your database to save and retrieve credentials

Now you've set up your server to retreive an access token, let’s configure a database to store user credentials and authorization details in database.js.

Set up the database schema and tables

First, you’ll create the necessary database schema to store site and user authorizations. This includes two main tables to associate site IDs and user IDs with their respective access tokens.

Store authorization data

Next, you’ll store the Site IDs and user access tokens in the database using functions that insert new records if they don’t already exist.

Store Site Authorization Data with insertSiteAuthorization
Use this function to pair a siteId with its access token when a site is initially authorized.
Store User Authorization Data with insertUserAuthorization
Use this function to pair a userId and access token.

Retrieve authorization data

Finally, you’ll retrieve the stored access tokens using functions designed to fetch access tokens based on siteId or userId.

Retrieve Site Access Tokens with getAccessTokenFromSiteId
This function retrieves the access token for a specific siteId. We'll use this function to obtain user details from Webflow's Resolve ID Token endpoint when a Designer Extension sends an idToken and siteId to our /token endpoint.
Retrieve User Access Tokens with getAccessTokenFromUserId
Use this function to get a user-specific access token, enabling authenticated access to the Webflow API based on the userId.

Export functions

Once these functions are ready, export them along with the database connection.

Configure authorization flow with token storage

To handle authorization effectively, you’ll need to store access tokens securely.

Import the `database` module into `server.js`

Exchange Aauthorization Code for Access Token and store it in the database

Update the /callback endpoint in server.js to exchange the code for an accessToken.

Redirect the User to the Designer Extension using a deep link

Integrate JWT for secure session management

With our database configured to handle access tokens, it’s time to implement JSON Web Tokens (JWT) to securely manage sessions and authenticate requests in the Data Client.

JWT will enable us to issue session tokens and validate them, allowing for a secure, stateless authentication flow.

Setting up JWT middleware

Retrieve the Access Token based on the Site ID

Create the retrieveAccessToken function to obtain the Access Token associated with a given siteId using the db.getAccssTokenFromSiteId function we created in our database module.

Create the Session Token from User Data

The createSessionToken function generates a session token using JWT based on user data from the resolved idToken.

Authenticate the Session Token to Validate User Access on Each Request

Export these functions once they are ready.

Using JWT middleware in the server

Once the JWT functions are set up, the next step is to import them into server.js to securely manage session tokens and authenticate requests.

Import JWT Middleware Functions

At the beginning of server.js, import the the JWT middleware.

Update the `/token` endpoint to authenticate the Designer Extension user

Now that you’ve set up the JWT and database functions, you can update the /token endpoint in server.js to securely authenticate the user. This endpoint will:

Retrieve the accessToken associated with the user's siteId
Get user details from the resolved idToken
Generate a Session Token from user details
Store the authorization details

See the steps below for more detail.

1. Retrieve the `accessToken` associated with the user's `siteId`

The jwt.retrieveAccessToken middleware fetches the accessToken associated with the siteId and attaches it to the request, ensuring secure access for the Webflow API call.

2. Get user details from the resolved `idToken`

3. Generate a Session Token

With the newly obtained user information, the jwt.createSessionToken function creates a Session Token for the authenticated user, establishing a secure, temporary access session.

4. Store Authorization Details

Finally, the retrieved accessToken is stored in the database and associated with the userId using db.insertUserAuthorization, enabling easy access and authorization for subsequent requests

Create a protected endpoint for authenticated Webflow requests

To demonstrate how to make secure, protected requests, let's set up an endpoint that requires a Session Token for access. We'll create a new /sites endpoint that will:

Authenticate the Session Token
Access Webflow data in the Data Client
Return Webflow data to the Designer Extension

1. Authenticate the Session Token

This endpoint will use `jwt.authenticateSessionToken` middleware to verifiy the session token passed with the request, ensuring that only authorized users can access this endpoint. Once authenticated, the middleware retrieves the user's associated `accessToken` and attaches it to the request.

2. Access Webflow Data in the Data Client

server.js

_1

The Data Client then uses the accessToken attached to the request to initialize the Webflow client and fetch data from Webflow’s List Sites endpoint.

3. Return Webflow Data to the Designer Extension

After retrieving the data, the endpoint responds with the information, providing the user access to their Webflow sites in the Designer Extension.

Start your App and test your authentication flow

You're all set up to securely make calls to the Webflow Data API from a Designer Extension. To test out your App, run the following command to get started:

$ npm run dev

Once your App is up and running:

Set Your Callback URI: Update the Webflow dashboard with the correct callback URI to ensure the OAuth flow can return to your app after authentication.
Open your App in the Designer: Open a site in the Designer and open your test App with the corresponding CLIENT_ID
Authorize in the Designer Extension: Open your Designer Extension and click the "Authorize" button to initiate the authentication flow.

Congratulations!

You have a working Hybrid app that can securely make requests to Webflow’s Data APIs.

server.js

database.js

jwt.js

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
import axios from "axios";
import DataTable from "./DataTable";
import { ThemeProvider, Button, Container, Typography } from "@mui/material";
import theme from "./theme";
const App = () => {
  const [idToken, setIdToken] = useState("");
  const [sessionToken, setSessionToken] = useState("");
  const [user, setUser] = useState({});
  const [siteData, setSiteData] = useState([]);
  const PORT = 3000;
  const API_URL = `http://localhost:${PORT}/`;
  useEffect(() => {
    // Set Extension Size
    webflow.setExtensionSize("default");
    // Function to exchange and verify ID token
    const exchangeAndVerifyIdToken = async () => {
      try {
        const idToken = await webflow.getIdToken();
        const siteInfo = await webflow.getSiteInfo();
        setIdToken(idToken);
        // Resolve token by sending it to the backend server
        const response = await axios.post(API_URL + "token", {
          idToken: idToken,
          siteId: siteInfo.siteId,
        });
        try {
          // Parse information from resolved token
          const sessionToken = response.data.sessionToken;
          const expAt = response.data.exp;
          const decodedToken = JSON.parse(atob(sessionToken.split(".")[1]));
          const firstName = decodedToken.user.firstName;
          const email = decodedToken.user.email;
          // Store information in Local Storage
          localStorage.setItem(
            "wf_hybrid_user",
            JSON.stringify({ sessionToken, firstName, email, exp: expAt })
          );
          setUser({ firstName, email });
          setSessionToken(sessionToken);
          console.log(`Session Token: ${sessionToken}`);
        } catch (error) {
          console.error("No Token", error);
        }
      } catch (error) {
        console.error("Error fetching ID Token:", error);
      }
    };
    // Check local storage for session token
    const localStorageUser = localStorage.getItem("wf_hybrid_user");
    if (localStorageUser) {
      const userParse = JSON.parse(localStorageUser);
      const userStoredSessionToken = userParse.sessionToken;
      const userStoredTokenExp = userParse.exp;
      if (userStoredSessionToken && Date.now() < userStoredTokenExp) {
        if (!sessionToken) {
          setSessionToken(userStoredSessionToken);
          setUser({ firstName: userParse.firstName, email: userParse.email });
        }
      } else {
        localStorage.removeItem("wf_hybrid_user");
        exchangeAndVerifyIdToken();
      }
    } else {
      exchangeAndVerifyIdToken();
    }
    // Listen for message from the OAuth callback window
    const handleAuthComplete = (event) => {
      if (
        // event.origin === "http://localhost:3000" &&
        event.data === "authComplete"
      ) {
        exchangeAndVerifyIdToken(); // Retry the token exchange
      }
    };
    window.addEventListener("message", handleAuthComplete);
    return () => {
      window.removeEventListener("message", handleAuthComplete);
    };
  }, [sessionToken]);
  // Handle request for site data
  const getSiteData = async () => {
    const sites = await axios.get(API_URL + "sites", {
      headers: { authorization: `Bearer ${sessionToken}` },
    });
    setSiteData(sites.data.data.sites);
  };
  // Open OAuth screen
  const openAuthScreen = () => {
    window.open("http://localhost:3000", "_blank", "width=600,height=400");
  };
  return (
    <ThemeProvider theme={theme}>
      <div>
        {!user.firstName ? (
          // If no user is found, Send a Hello Stranger Message and Button to Authorize
          <Container sx={{ padding: "20px" }}>
            <Typography variant="h1">👋🏾 Hello Stranger</Typography>
            <Button
              variant="contained"
              sx={{ margin: "10px 20px" }}
              onClick={openAuthScreen}
            >
              Authorize App
            </Button>
          </Container>
        ) : (
          // If a user is found send welcome message with their name
          <Container sx={{ padding: "20px" }}>
            <Typography variant="h1">👋🏾 Hello {user.firstName}</Typography>
            <Button
              variant="contained"
              sx={{ margin: "10px 20px" }}
              onClick={getSiteData}
            >
              Get Sites
            </Button>
            {siteData.length > 0 && <DataTable data={siteData} />}
          </Container>
        )}
      </div>
    </ThemeProvider>
  );
};
// Render your App component inside the root
const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

Prerequisites

Set up your development environment

Clone the starter code

Install dependencies

Add environment variables

Review Designer Extension

Retrieving the idToken from the Designer Extension.

Exchanging the idToken and siteId for a Session Token

Set up your server

Initialize Express

Configure authorization flow

Handling the ID Token and Site ID from the Designer Extension

Set up your database to save and retrieve credentials

Set up the database schema and tables

Store authorization data

Retrieve authorization data

Export functions

Configure authorization flow with token storage

Import the database module into server.js

Exchange Aauthorization Code for Access Token and store it in the database

Redirect the User to the Designer Extension using a deep link

Integrate JWT for secure session management

Setting up JWT middleware

Retrieve the Access Token based on the Site ID

Create the Session Token from User Data

Authenticate the Session Token to Validate User Access on Each Request

Using JWT middleware in the server

Import JWT Middleware Functions

Update the /token endpoint to authenticate the Designer Extension user

1. Retrieve the accessToken associated with the user's siteId

2. Get user details from the resolved idToken

3. Generate a Session Token

4. Store Authorization Details

Create a protected endpoint for authenticated Webflow requests

1. Authenticate the Session Token

This endpoint will use jwt.authenticateSessionToken middleware to verifiy the session token passed with the request, ensuring that only authorized users can access this endpoint. Once authenticated, the middleware retrieves the user's associated accessToken and attaches it to the request.

2. Access Webflow Data in the Data Client

3. Return Webflow Data to the Designer Extension

Start your App and test your authentication flow

Congratulations!

Next steps

Add Elements to the Canvas in bulk

Add Custom Code to a Site

Publish your Hybrid App

Prerequisites

Set up your development environment

Clone the starter code

Install dependencies

Add environment variables

Review Designer Extension

Retrieving the idToken from the Designer Extension.

Exchanging the idToken and siteId for a Session Token

Set up your server

Initialize Express

Configure authorization flow

Handling the ID Token and Site ID from the Designer Extension

Set up your database to save and retrieve credentials

Set up the database schema and tables

Store authorization data

Retrieve authorization data

Export functions

Configure authorization flow with token storage

Import the database module into server.js

Exchange Aauthorization Code for Access Token and store it in the database

Redirect the User to the Designer Extension using a deep link

Integrate JWT for secure session management

Setting up JWT middleware

Retrieve the Access Token based on the Site ID

Create the Session Token from User Data

Authenticate the Session Token to Validate User Access on Each Request

Using JWT middleware in the server

Import JWT Middleware Functions

Update the /token endpoint to authenticate the Designer Extension user

1. Retrieve the accessToken associated with the user's siteId

2. Get user details from the resolved idToken

3. Generate a Session Token

4. Store Authorization Details

Create a protected endpoint for authenticated Webflow requests

1. Authenticate the Session Token

This endpoint will use jwt.authenticateSessionToken middleware to verifiy the session token passed with the request, ensuring that only authorized users can access this endpoint. Once authenticated, the middleware retrieves the user's associated accessToken and attaches it to the request.

Retrieving the `idToken` from the Designer Extension.

Exchanging the `idToken` and `siteId` for a Session Token

Import the `database` module into `server.js`

Update the `/token` endpoint to authenticate the Designer Extension user

1. Retrieve the `accessToken` associated with the user's `siteId`

2. Get user details from the resolved `idToken`

This endpoint will use `jwt.authenticateSessionToken` middleware to verifiy the session token passed with the request, ensuring that only authorized users can access this endpoint. Once authenticated, the middleware retrieves the user's associated `accessToken` and attaches it to the request.

Retrieving the `idToken` from the Designer Extension.

Exchanging the `idToken` and `siteId` for a Session Token

Import the `database` module into `server.js`

Update the `/token` endpoint to authenticate the Designer Extension user

1. Retrieve the `accessToken` associated with the user's `siteId`

2. Get user details from the resolved `idToken`

This endpoint will use `jwt.authenticateSessionToken` middleware to verifiy the session token passed with the request, ensuring that only authorized users can access this endpoint. Once authenticated, the middleware retrieves the user's associated `accessToken` and attaches it to the request.