Cómo crear un directorio de miembros restringido con Memberstack y Webflow Cloud

La mayoría de los sitios de membresía se topan con el mismo muro. El inicio de sesión y las páginas restringidas funcionan, hasta que alguien pide una página para ver quién más forma parte del grupo. Una lista de colección en una página restringida aguanta bien hasta que el directorio crece demasiado para editarlo a mano, o hasta que un miembro pregunta por qué sigue apareciendo su antiguo empleador. Los datos de perfil que los miembros ya escribieron en Memberstack son el directorio.

En esta guía, montaremos una aplicación Next.js en /directory que redirige a los visitantes sin una sesión de Memberstack, y un gestor de rutas verificará el token y el plan de cada miembro con Memberstack antes de devolver cualquier perfil. Solo aparecen los miembros que dan su consentimiento, y las direcciones de correo electrónico nunca salen del servidor.

¿Qué necesitas para crear un directorio de miembros de Memberstack en Webflow?

Necesitas cinco cosas:

• Sitio de Webflow con Memberstack: Un sitio con Memberstack instalado, un plan al que se unan los miembros, una página de inicio de sesión funcional en /login, y una página restringida en /members/directory que enlazará a la aplicación.
• Clave secreta e ID de plan de Memberstack: La clave secreta comienza con sk_, o sk_sb_ en modo sandbox, y el ID del plan identifica el plan que puede ver el directorio.
• Node.js 22, Next.js 15 y npm: Next.js 15 es la versión mínima que admite Webflow Cloud, y npm es el único gestor de paquetes compatible, según la página bring your own app.
• Lista de campos del directorio: Decide qué campos del perfil aparecerán. Yo uso nombre, empresa, cargo, una breve biografía y un interruptor de consentimiento; el correo electrónico se queda fuera por completo.
• Una sesión basada en cookies: Por defecto, Memberstack almacena la sesión en el almacenamiento local del navegador, al que el servidor nunca accede, así que el primer paso es cambiarla a una cookie.

La clave secreta nunca sale del servidor, por lo que cada llamada a Memberstack ocurre en un gestor de rutas o en el adaptador que importa, y el navegador solo se comunica con tu propia ruta /directory/api/members.

6 pasos para crear un directorio de miembros de Memberstack en Webflow Cloud

La construcción consiste en una aplicación Next.js con un adaptador que contiene todas las llamadas a Memberstack, un gestor de rutas, un archivo de middleware y una página de cliente. El middleware redirige a los visitantes sin una cookie de sesión, y el gestor de rutas se encarga de la verificación real.

1. Configura los campos del directorio y la cookie de sesión en Memberstack

Crea los campos personalizados que leerá el directorio y añade un campo de consentimiento explícito para que ningún miembro aparezca sin haberlo elegido. En tu panel de control de Memberstack, añade cinco campos personalizados con estos IDs: name, company, job-title, bio, y show-in-directory.

Memberstack almacena los valores de los campos personalizados como cadenas de texto, por lo que el adaptador trata el consentimiento como activo solo cuando lee la cadena true. Los miembros configuran esto desde un formulario de perfil en el sitio de Webflow, y yo mantengo los IDs en minúsculas y con guiones, porque un ID de campo con un espacio se convierte en un dolor de cabeza al acceder entre corchetes en cada archivo que lo toca.

A continuación, haz que la sesión llegue al servidor. Por defecto, Memberstack mantiene el token del miembro conectado en el almacenamiento local, que el navegador nunca envía con una solicitud.

El ajuste de cookies de Memberstack lo mueve a una cookie llamada _ms-mid, que el navegador sí envía a la aplicación porque está montada en el mismo dominio. En Webflow, abre el script de instalación de Memberstack en el código personalizado del sitio y añade el atributo data-memberstack-use-cookies:

<script data-memberstack-app="YOUR_APP_ID" data-memberstack-use-cookies src="https://static.memberstack.com/scripts/v2/memberstack.js" type="text/javascript"></script>

Si el sitio utiliza un banner de cookies, permite _ms-mid como cookie funcional, o la sesión desaparecerá para cualquiera que la rechace. Publica el sitio, inicia sesión como miembro de prueba y comprueba en las herramientas de desarrollo (DevTools), en Aplicación y luego en Cookies: una cookie _ms-mid en tu dominio significa que la sesión está lista para la aplicación.

Cuando este paso esté listo, el miembro de prueba puede activar el interruptor de suscripción en su perfil y ver cómo los cinco valores persisten en su registro de Memberstack.

2. Crea la aplicación Next.js y define las variables de entorno

Prepara la estructura de la aplicación con npm y mantén todos los secretos en el entorno de Webflow Cloud en lugar de en un archivo enviado al repositorio. Usa este comando para iniciar el proyecto en Next.js 15:create-next-app@15

npx create-next-app@15 member-directory --typescript --app --use-npm --eslint --no-tailwind --no-src-dir --no-turbopack --import-alias "@/*"
cd member-directory

Ahora tienes un proyecto con App Router y un archivo de bloqueo que Webflow Cloud puede compilar. No añadas nada a tu configuración: Webflow Cloud inyecta la ruta de montaje durante la compilación, y la documentación de configuración de Webflow indica que "no necesitas añadir un adaptador, una ruta base ni un modo de salida".basePathnext.config

Deja fuera de todos los archivos, aunque la página de integración de aplicaciones te sugiera añadirlo. Webflow Cloud se ejecuta en Cloudflare Workers, una plataforma edge, pero el objetivo de tiempo de ejecución de Next.js es una directiva de compilación independiente que el adaptador OpenNext de Cloudflare no admite.export const runtime = 'edge'edge

Variables de entorno necesarias

La aplicación lee cuatro variables:

Configura las tres primeras en un archivo local y deja la última vacía, ya que la aplicación se ejecuta en la raíz durante el desarrollo. Webflow Cloud no crea esta variable por ti, así que añádela al entorno tú mismo durante el despliegue..env.localNEXT_PUBLIC_BASE_PATHlocalhost:3000NEXT_PUBLIC_BASE_PATH

La documentación de variables de entorno de Webflow indica que "tanto las variables de entorno secretas como las no secretas están disponibles para el proceso de compilación de tu aplicación y para la aplicación desplegada en tiempo de ejecución", por lo que no necesitas un segundo lugar para configurarlas para la compilación.

3. Escribe el adaptador de Memberstack

Coloca todas las llamadas a Memberstack en un único módulo exclusivo para el servidor. Este verifica el token de sesión, comprueba que el miembro tenga una conexión activa a tu plan y devuelve a los miembros suscritos con un formato normalizado.

Mantener todo aquí significa que el controlador de rutas nunca ve una URL de endpoint ni un objeto de miembro sin procesar, y cualquier cambio por parte de Memberstack se resuelve editando un solo archivo.

El adaptador utiliza dos endpoints de la API REST de administración de Memberstack, ambos autenticados con la clave secreta en una cabecera. La verificación de token devuelve un código 200 con el ID del miembro si el token es válido, y un estado distinto de 200 en cualquier otro caso. La lista de miembros devuelve un máximo de 100 miembros por página, con un cursor para la siguiente.x-api-keyhasNextPageendCursor

Implementación del adaptador

Crea :lib/memberstack.ts

// lib/memberstack.ts
// Server-only. Every Memberstack-specific value lives in this file.

const API = 'https://admin.memberstack.com/members';

export type DirectoryMember = {
  id: string;
  name: string;
  company: string;
  jobTitle: string;
  bio: string;
};

const FIELD = {
  name: 'name',
  company: 'company',
  jobTitle: 'job-title',
  bio: 'bio',
  showInDirectory: 'show-in-directory',
} as const;

type RawMember = {
  id: string;
  customFields?: Record<string, string | undefined>;
  planConnections?: { planId: string; active: boolean }[];
};

function env(key: string): string {
  const value = process.env[key];
  if (!value) throw new Error(`Missing environment variable: ${key}`);
  return value;
}

function authHeaders(): Record<string, string> {
  return { 'x-api-key': env('MEMBERSTACK_SECRET_KEY'), 'Content-Type': 'application/json' };
}

export async function verifyMemberToken(token: string): Promise<string | null> {
  const res = await fetch(`${API}/verify-token`, {
    method: 'POST',
    headers: authHeaders(),
    body: JSON.stringify({ token }),
  });
  if (!res.ok) return null;
  const body = (await res.json()) as { data?: { id?: string } };
  return body.data?.id ?? null;
}

async function listAllMembers(): Promise<RawMember[]> {
  const members: RawMember[] = [];
  let after: string | undefined;
  do {
    const url = new URL(API);
    url.searchParams.set('limit', '100');
    if (after) url.searchParams.set('after', after);
    const res = await fetch(url, { headers: authHeaders() });
    if (!res.ok) throw new Error(`Memberstack responded with ${res.status}`);
    const page = (await res.json()) as {
      data?: RawMember[];
      hasNextPage?: boolean;
      endCursor?: string | number | null;
    };
    members.push(...(page.data ?? []));
    after = page.hasNextPage && page.endCursor != null ? String(page.endCursor) : undefined;
  } while (after);
  return members;
}

function onPlan(member: RawMember): boolean {
  const planId = env('MEMBERSTACK_PLAN_ID');
  return (member.planConnections ?? []).some((p) => p.planId === planId && p.active);
}

export async function getDirectory(viewerId: string): Promise<DirectoryMember[] | null> {
  const members = await listAllMembers();
  const viewer = members.find((m) => m.id === viewerId);
  if (!viewer || !onPlan(viewer)) return null;

  return members
    .filter((m) => onPlan(m) && m.customFields?.[FIELD.showInDirectory] === 'true')
    .map((m) => ({
      id: m.id,
      name: m.customFields?.[FIELD.name] ?? '',
      company: m.customFields?.[FIELD.company] ?? '',
      jobTitle: m.customFields?.[FIELD.jobTitle] ?? '',
      bio: m.customFields?.[FIELD.bio] ?? '',
    }))
    .filter((m) => m.name)
    .sort((a, b) => a.name.localeCompare(b.name));
}

Un token válido no es suficiente por sí solo: un miembro cuyo plan ha caducado todavía conserva uno. getDirectory devuelve null a menos que el usuario tenga una conexión activa a tu plan, y solo enumera a los miembros que están en ese plan y han dado su consentimiento, por lo que un miembro cancelado también desaparece del directorio.

El tipo DirectoryMember no tiene campo de correo electrónico y el mapeo nunca copia ninguno, por lo que ninguna edición posterior de la página puede filtrar una dirección por accidente.

4. Añade el gestor de rutas que sirve los resultados de búsqueda

Expón el directorio en /api/members dentro de la aplicación y verifica la sesión de Memberstack en cada solicitud. El servidor aplica la consulta de búsqueda, por lo que la lista completa nunca se envía al cliente.

Crea :app/api/members/route.ts

// app/api/members/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { getDirectory, verifyMemberToken } from '@/lib/memberstack';

export async function GET(request: NextRequest) {
  const token = request.cookies.get('_ms-mid')?.value;
  const memberId = token ? await verifyMemberToken(token) : null;
  if (!memberId) {
    return NextResponse.json({ error: 'Not a member' }, { status: 401 });
  }

  const members = await getDirectory(memberId);
  if (!members) {
    return NextResponse.json({ error: 'Plan required' }, { status: 403 });
  }

  const q = request.nextUrl.searchParams.get('q')?.trim().toLowerCase() ?? '';
  const results = q
    ? members.filter((m) =>
        [m.name, m.company, m.jobTitle].some((value) => value.toLowerCase().includes(q)),
      )
    : members;

  return NextResponse.json({ members: results });
}

Webflow Cloud reemplaza el encabezado Cache-Control de cada respuesta con private, no-cache, por lo que una caché compartida nunca entrega los resultados de un miembro al siguiente visitante.

Con la aplicación ejecutándose localmente y un valor _ms-mid real en la solicitud, GET /api/members?q=acme devuelve los miembros que han dado su consentimiento cuyo nombre, empresa o cargo contiene "acme". La misma solicitud sin la cookie devuelve un 401, y un miembro sin un plan activo obtiene un 403.

5. Protege la aplicación con middleware y construye la página de búsqueda

Redirige a cualquier navegador sin una cookie de sesión a la página de inicio de sesión antes de que se renderice la página, y deja que el gestor de rutas realice la verificación real. El middleware en Webflow Cloud debe ser de tipo Edge: la documentación de personalización del framework indica que "el middleware de tiempo de ejecución de Node.js no es compatible. Solo el middleware de tiempo de ejecución Edge funciona en el tiempo de ejecución de Workers".

La comprobación de la cookie va en middleware.ts en la raíz del proyecto:

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  if (request.cookies.has('_ms-mid')) {
    return NextResponse.next();
  }
  const login = new URL(process.env.MEMBERSTACK_LOGIN_PATH ?? '/login', request.url);
  return NextResponse.redirect(login);
}

export const config = {
  matcher: ['/((?!_next|api).*)'],
};

El comparador excluye /api a propósito. El gestor de rutas ya devuelve un 401 si el token falta o no es válido, y una redirección en un endpoint JSON entregaría al cliente un formulario de inicio de sesión HTML para analizar.

El middleware es solo una primera barrera económica, por lo que incluso si se omite, no se expone nada más que el esqueleto vacío de la página; create-next-app@15 también instala una versión 15.5, que está parcheada contra la vulnerabilidad de omisión de middleware GHSA-f82v-jwr5-mffw.

Implementación de la página de búsqueda del directorio

La página es un componente de cliente que aplica debounce a la entrada, añade el prefijo de la ruta base a cada petición y descarta las respuestas de una consulta que el visitante ya ha cambiado:

// app/page.tsx
'use client';

import { useEffect, useState } from 'react';

type Member = {
  id: string;
  name: string;
  company: string;
  jobTitle: string;
  bio: string;
};

const BASE = process.env.NEXT_PUBLIC_BASE_PATH ?? '';

export default function DirectoryPage() {
  const [query, setQuery] = useState('');
  const [members, setMembers] = useState<Member[]>([]);
  const [status, setStatus] = useState<'loading' | 'ready' | 'error'>('loading');

  useEffect(() => {
    const controller = new AbortController();
    const handle = setTimeout(async () => {
      setStatus('loading');
      try {
        const res = await fetch(`${BASE}/api/members?q=${encodeURIComponent(query)}`, {
          credentials: 'include',
          signal: controller.signal,
        });
        if (!res.ok) {
          setStatus('error');
          return;
        }
        const data = (await res.json()) as { members: Member[] };
        setMembers(data.members);
        setStatus('ready');
      } catch (error) {
        if ((error as Error).name !== 'AbortError') setStatus('error');
      }
    }, 250);
    return () => {
      clearTimeout(handle);
      controller.abort();
    };
  }, [query]);

  return (
    <main>
      <h1>Member directory</h1>
      <input
        type="search"
        placeholder="Search by name, company, or title"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
      />
      {status === 'error' && <p>Sign in with an active membership to see the directory.</p>}
      {status === 'ready' && members.length === 0 && <p>No members match.</p>}
      <ul>
        {members.map((member) => (
          <li key={member.id}>
            <strong>{member.name}</strong>
            {member.jobTitle && `, ${member.jobTitle}`}
            {member.company && ` at ${member.company}`}
            {member.bio && <p>{member.bio}</p>}
          </li>
        ))}
      </ul>
    </main>
  );
}

El prefijo BASE es lo que la gente suele pasar por alto. La documentación de "trae tu propia aplicación" es explícita al decir que "las llamadas fetch del lado del cliente deben incluir manualmente la ruta base para llegar correctamente a tus endpoints", porque la ruta de montaje se aplica a las rutas de la aplicación en el momento de la compilación y no a una cadena de URL que escribas dentro de un fetch.

Localmente, el prefijo está vacío, por lo que la página realiza peticiones a /api/members en localhost:3000.

Para probar la sesión iniciada, copia el valor de la cookie _ms-mid desde un navegador con sesión iniciada en tu sitio de Webflow y añádelo a localhost:3000 en las herramientas de desarrollo. Escribir el nombre de una empresa reducirá la lista tras una pausa de un cuarto de segundo.

Eliminar la cookie y recargar redirige a localhost:3000/login, lo que devuelve un 404 localmente porque la página de inicio de sesión reside en el sitio de Webflow; ese 404 confirma que el middleware se ejecutó.

6. Despliega la aplicación y móntala en /directory

Envía la aplicación, apunta un entorno de Webflow Cloud para el sitio hacia ella, establece la ruta de montaje en /directory, y añade las cuatro variables a ese entorno. La ruta de montaje es el valor que Webflow Cloud inyecta como ruta base en el momento de la compilación, que es la razón por la que NEXT_PUBLIC_BASE_PATH obtiene esa misma cadena: la plataforma aplica una a tus rutas, tu código de cliente lee la otra, y no saben nada la una de la otra.

Marca MEMBERSTACK_SECRET_KEY como secreto para que se oculte en los registros de compilación, y deja los otros tres tal cual. Luego, inicia la compilación y publica el sitio de Webflow para que la página /members/directory protegida enlace a /directory. El sitio necesita un plan Premium o superior antes del lanzamiento si la ruta de montaje /directory debe servirse en tu dominio personalizado.

Cuando finaliza el despliegue, un miembro con sesión iniciada en tu plan que sigue el enlace llega al directorio con el cuadro de búsqueda activo. Un navegador sin sesión que accede a yourdomain.com/directory directamente es redirigido a /login, y una solicitud a /directory/api/members sin una cookie recibe un error 401.

¿Qué hace que un directorio de Memberstack en Webflow Cloud falle?

La mayoría de los fallos se deben a la cookie de sesión, la directiva de tiempo de ejecución, el nombre del archivo de middleware o la ruta base, y casi todos aparecen solo después de desplegar la aplicación. Cada entrada comienza a partir de lo que muestra el registro de compilación o la página /directory en vivo.

Todos los miembros son redirigidos a /login

Causa: El navegador no tiene la cookie _ms-mid , por lo que el middleware envía a todos a la página de inicio de sesión. Memberstack mantiene la sesión en el almacenamiento local a menos que el script de instalación incluya data-memberstack-use-cookies, y un banner de cookies que bloquea las cookies funcionales la elimina de nuevo.

Solución: Añade el atributo del paso 1 al script de instalación y publica el sitio. Luego, inicia sesión de nuevo y confirma que _ms-mid aparece en Cookies dentro de las herramientas de desarrollo (DevTools). Si desaparece después del banner de cookies, permítela como una cookie funcional en la configuración del banner.

La compilación de Webflow Cloud falla en una ruta de API

Causa: La página de "trae tu propia aplicación" todavía indica añadir export const runtime = 'edge' a las rutas de API, y seguir esto produce una compilación que el adaptador de OpenNext Cloudflare no puede completar. La confusión surge porque "edge" nombra tanto a la plataforma Workers como al objetivo de tiempo de ejecución de Next.js, y la página usa ambos significados.

Solución: Elimina la línea de cada Route Handler y página, luego vuelve a desplegar sin configurar el tiempo de ejecución. Tus controladores se ejecutarán en Workers de todos modos. Mantengo una búsqueda de runtime = 'edge' en la lista de verificación previa al envío en proyectos de Cloud, porque un compañero bienintencionado que lea la documentación volverá a añadirla.

Los visitantes sin sesión no son redirigidos tras actualizar a Next.js 16

Causa: Next.js 16 renombra el middleware a proxy, y el archivo proxy.ts renombrado se ejecuta en el tiempo de ejecución de Node sin forma de optar por Edge, por lo que nunca se ejecuta en Webflow Cloud.

Solución: Mantén el archivo llamado middleware.ts durante la actualización, o cámbiale el nombre si ya se había modificado. Confirma la redirección cargando /directory en una ventana privada después del despliegue, no solo bajo next dev.

La búsqueda funciona localmente pero cada solicitud devuelve un 404 en el sitio en vivo

Causa: La página del cliente está buscando /api/members en la raíz del sitio en lugar de /directory/api/members. Una cadena de URL dentro de una llamada fetch no se reescribe, por lo que el error es invisible localmente y aparece al desplegar. El mismo síntoma ocurre cuando NEXT_PUBLIC_BASE_PATH está configurado en .env.local pero falta en el entorno de Webflow Cloud, ya que el prefijo se compila entonces como una cadena vacía.

Solución: Configura NEXT_PUBLIC_BASE_PATH como /directory en el entorno de Webflow Cloud, con una barra inclinada al principio y sin barra al final, y vuelve a compilar. Next.js integra los valores de NEXT_PUBLIC_ en el paquete del cliente cuando compila, por lo que cambiarlo sin una nueva compilación no cambia nada.

Los miembros con sesión iniciada ven el mensaje de inicio de sesión después del despliegue

Causa: La página del cliente muestra ese mensaje para cualquier respuesta que no sea OK. Un error 500 significa que falta una variable en el entorno de Webflow Cloud, generalmente una que existe en .env.local y que nunca se añadió allí.

Un error 401 significa que Memberstack rechazó el token, lo cual ocurre cuando la clave secreta pertenece al otro modo, como una clave sk_sb_ de entorno de pruebas (sandbox) en un sitio en vivo. Un error 403 significa que la conexión del plan del miembro está inactiva o que el ID del plan es incorrecto.

Solución: Comprueba primero el estado de la solicitud /directory/api/members en la pestaña de red. Para un error 500, compara los nombres de las variables entre .env.local y el entorno.

Para un error 401, confirma que el modo de la clave coincide con el modo de Memberstack del sitio. Para un 403, copia de nuevo el ID del plan desde el panel de control de Memberstack y comprueba el plan del miembro en su perfil.

Los miembros registrados siempre ven "No hay miembros que coincidan"

Causa: El adaptador solo conserva a los miembros cuyo valor es la cadena y cuya conexión al plan está activa. Si el formulario de perfil escribe un valor diferente, como o , el filtro descarta a todos los miembros.show-in-directorytrueonyes

Solución: Durante el desarrollo, registra el valor de un miembro sin procesar dentro de , lee el valor almacenado y ajusta la comparación para que coincida o cambia el formulario para que escriba . Elimina el registro después.customFieldsgetDirectoryshow-in-directorytrue

Qué puedes construir a continuación con Memberstack y Webflow

Yo añadiría una página de perfil por miembro en como una ruta adicional que llame al mismo adaptador, y una ruta de edición de listado que verifique el token antes de escribir cualquier campo de perfil, para que los miembros actualicen su propia entrada sin salir de la aplicación./directory/[id]

Para un sitio de membresía completo con contenido restringido y planes de pago, la guía de membresías de Memberstack cubre la configuración sobre la que se asienta este directorio.

Para el aspecto de plataforma de la siguiente ruta, la documentación para desarrolladores de Webflow cubre las aplicaciones de Webflow Cloud y los límites dentro de los cuales operan.