@payloadcms/figma 0.0.1-alpha.66 → 0.0.1-alpha.67

package/dist/auth/crypto-utils.js

@@ -1,5 +1,6 @@
 import Conf from 'conf';
 import crypto from 'crypto';
+import envPaths from 'env-paths';
 import fsSync from 'node:fs';
 import os from 'os';
 import path from 'path';
@@ -10,20 +11,56 @@ import path from 'path';
  * for future use. This ensures the encryption key is unique per machine and not
  * reproducible even if machine identifiers are known.
  *
+ * Uses an atomic create-or-read pattern (O_EXCL via `flag: 'wx'`) so concurrent
+ * callers — e.g. parallel vitest workers on a fresh CI container — converge on
+ * the same salt instead of clobbering each other's writes. Once the file
+ * exists, no caller ever overwrites it.
+ *
  * @returns 32-byte hex string (64 characters)
  */ function getOrCreateSalt() {
-    // Configuration store for cryptographic salt
-    const cryptoConf = new Conf({
-        configName: 'payloadcms-figma-crypto',
-        projectName: 'payloadcms-figma'
+    // Path mirrors what `Conf({ projectName: 'payloadcms-figma', configName:
+    // 'payloadcms-figma-crypto' })` would produce, so files written by older
+    // versions remain readable.
+    const configDir = envPaths('payloadcms-figma', {
+        suffix: 'nodejs'
+    }).config;
+    const configPath = path.join(configDir, 'payloadcms-figma-crypto.json');
+    const readSalt = ()=>{
+        try {
+            const parsed = JSON.parse(fsSync.readFileSync(configPath, 'utf8'));
+            return typeof parsed.salt === 'string' && parsed.salt.length > 0 ? parsed.salt : undefined;
+        } catch (err) {
+            if (err.code === 'ENOENT') {
+                return undefined;
+            }
+            throw err;
+        }
+    };
+    const existing = readSalt();
+    if (existing) {
+        return existing;
+    }
+    fsSync.mkdirSync(configDir, {
+        recursive: true
     });
-    let salt = cryptoConf.get('salt');
-    if (!salt) {
-        // Generate cryptographically secure random salt (32 bytes = 256 bits)
-        salt = crypto.randomBytes(32).toString('hex');
-        cryptoConf.set('salt', salt);
+    const candidate = crypto.randomBytes(32).toString('hex');
+    try {
+        fsSync.writeFileSync(configPath, JSON.stringify({
+            salt: candidate
+        }, null, '\t'), {
+            flag: 'wx'
+        });
+        return candidate;
+    } catch (err) {
+        if (err.code !== 'EEXIST') {
+            throw err;
+        }
+        const winner = readSalt();
+        if (!winner) {
+            throw new Error('Failed to read salt after losing create-race');
+        }
+        return winner;
     }
-    return salt;
 }
 /**
  * Gather machine-specific entropy sources

package/dist/oauth/components/LoginButton/iframeAutoLogin.d.ts

@@ -0,0 +1,63 @@
+export interface CmsOAuthCodeMessage {
+    code: string;
+    state: string;
+}
+/**
+ * Validate the shape of a message received from the parent window. Accepts
+ * `{ type: 'cms-oauth-code', code: string, state: string }`. Returns null
+ * for anything else. The handler additionally verifies `state` matches the
+ * value the iframe sent on its outbound `mint-cms-oauth-code` request.
+ */
+export declare const parseCmsOAuthCodeMessage: (data: unknown) => CmsOAuthCodeMessage | null;
+/**
+ * Derive a tight `targetOrigin` for `window.parent.postMessage` from the
+ * iframe's `document.referrer`. If the referrer is a Figma origin we return
+ * it verbatim; otherwise (stripped by Referrer-Policy, malformed, or hostile)
+ * we fall back to '*'. The outbound payload contains the server-signed
+ * `state` from /meta — no secrets to leak — so '*' is acceptable; the
+ * inbound origin check is the load-bearing security control.
+ */
+export declare const pickParentTargetOrigin: (referrer: null | string | undefined) => string;
+export interface IframeAutoLoginDeps {
+    doFetch: typeof fetch;
+    /**
+     * URL of the plugin's `/meta` endpoint. The iframe fetches this on setup
+     * to get the OAuth params (`client_id`, `redirect_uri`, `scope`,
+     * `code_challenge`, `state`, etc.) it forwards to the parent so the
+     * parent can mint a code via Sinatra.
+     */
+    metaUrl: string;
+    navigate: (url: string) => void;
+    /**
+     * Called on known synchronous failure paths so the host UI can render a
+     * manual fallback (e.g. surface the regular login button) instead of
+     * leaving the user on a blank screen. Not called on cleanup-driven
+     * aborts. Silent failures (parent never responds) are not detected here;
+     * the host is expected to apply its own timeout.
+     */
+    onFailed?: () => void;
+    parentReferrer: null | string | undefined;
+    postMessageToParent: (message: unknown, targetOrigin: string) => void;
+    win: Pick<Window, 'addEventListener' | 'removeEventListener'>;
+}
+/**
+ * Wire up the iframe auto-login flow:
+ * 1. Fetch the plugin's `/meta` endpoint to get the OAuth params for this
+ *    flow — same params the regular `/admin/login` button would have used.
+ * 2. postMessage to the parent window:
+ *      { type: 'mint-cms-oauth-code', client_id, redirect_uri, scope,
+ *        code_challenge, code_challenge_method, state }
+ *    The parent uses these to mint a code via Sinatra, then echoes `state`
+ *    back so we can correlate response to request.
+ * 3. Listen for the parent's response.
+ * 4. On a valid Figma-origin response whose `state` matches what we sent,
+ *    navigate to `${redirect_uri}?code=${code}&state=${state}` — the same
+ *    URL shape the IdP uses when it 302s back into the manual flow.
+ * 5. `/sso/login` GET handler validates state.sig + PKCE verifier, exchanges
+ *    the code, sets session cookies, and 302s to `/admin`.
+ *
+ * Returns a cleanup function that removes the listener and aborts the meta
+ * fetch — designed to be returned directly from a React useEffect.
+ */
+export declare const setupIframeAutoLogin: (deps: IframeAutoLoginDeps) => (() => void);
+//# sourceMappingURL=iframeAutoLogin.d.ts.map

package/dist/oauth/components/LoginButton/iframeAutoLogin.js

@@ -0,0 +1,153 @@
+import { isFigmaOrigin } from '../../utilities/figmaHostnames.js';
+/**
+ * Validate the shape of a message received from the parent window. Accepts
+ * `{ type: 'cms-oauth-code', code: string, state: string }`. Returns null
+ * for anything else. The handler additionally verifies `state` matches the
+ * value the iframe sent on its outbound `mint-cms-oauth-code` request.
+ */ export const parseCmsOAuthCodeMessage = (data)=>{
+    if (!data || typeof data !== 'object') {
+        return null;
+    }
+    const obj = data;
+    if (obj.type !== 'cms-oauth-code') {
+        return null;
+    }
+    if (typeof obj.code !== 'string' || obj.code.length === 0) {
+        return null;
+    }
+    if (typeof obj.state !== 'string' || obj.state.length === 0) {
+        return null;
+    }
+    return {
+        code: obj.code,
+        state: obj.state
+    };
+};
+/**
+ * Derive a tight `targetOrigin` for `window.parent.postMessage` from the
+ * iframe's `document.referrer`. If the referrer is a Figma origin we return
+ * it verbatim; otherwise (stripped by Referrer-Policy, malformed, or hostile)
+ * we fall back to '*'. The outbound payload contains the server-signed
+ * `state` from /meta — no secrets to leak — so '*' is acceptable; the
+ * inbound origin check is the load-bearing security control.
+ */ export const pickParentTargetOrigin = (referrer)=>{
+    if (!referrer) {
+        return '*';
+    }
+    try {
+        const candidate = new URL(referrer).origin;
+        return isFigmaOrigin(candidate) ? candidate : '*';
+    } catch  {
+        return '*';
+    }
+};
+/**
+ * Wire up the iframe auto-login flow:
+ * 1. Fetch the plugin's `/meta` endpoint to get the OAuth params for this
+ *    flow — same params the regular `/admin/login` button would have used.
+ * 2. postMessage to the parent window:
+ *      { type: 'mint-cms-oauth-code', client_id, redirect_uri, scope,
+ *        code_challenge, code_challenge_method, state }
+ *    The parent uses these to mint a code via Sinatra, then echoes `state`
+ *    back so we can correlate response to request.
+ * 3. Listen for the parent's response.
+ * 4. On a valid Figma-origin response whose `state` matches what we sent,
+ *    navigate to `${redirect_uri}?code=${code}&state=${state}` — the same
+ *    URL shape the IdP uses when it 302s back into the manual flow.
+ * 5. `/sso/login` GET handler validates state.sig + PKCE verifier, exchanges
+ *    the code, sets session cookies, and 302s to `/admin`.
+ *
+ * Returns a cleanup function that removes the listener and aborts the meta
+ * fetch — designed to be returned directly from a React useEffect.
+ */ export const setupIframeAutoLogin = (deps)=>{
+    const abortController = new AbortController();
+    // `flow` is captured atomically from the /meta response. Either both
+    // `redirectUri` and `state` are set (after the async fetch completes
+    // successfully), or it's null. Bundling them prevents handleMessage
+    // from using a half-populated state — e.g. an empty `redirectUri`
+    // producing a relative-URL navigation.
+    let flow = null;
+    const handleMessage = (event)=>{
+        // Parse first so we only log rejections for messages that were *intended*
+        // to be `cms-oauth-code`. Unrelated postMessages (browser extensions,
+        // devtools, etc.) return silently with no log noise.
+        const parsed = parseCmsOAuthCodeMessage(event.data);
+        if (!parsed) {
+            return;
+        }
+        if (!isFigmaOrigin(event.origin)) {
+            // eslint-disable-next-line no-console -- surface why auto-login didn't fire
+            console.error(`[payload iframe auto-login] rejected cms-oauth-code: origin "${event.origin}" is not in the Figma allowlist`);
+            return;
+        }
+        if (flow === null) {
+            // eslint-disable-next-line no-console -- surface why auto-login didn't fire
+            console.error('[payload iframe auto-login] rejected cms-oauth-code: message arrived before /meta resolved, so no expected state to compare against');
+            return;
+        }
+        if (parsed.state !== flow.state) {
+            // eslint-disable-next-line no-console -- surface why auto-login didn't fire
+            console.error('[payload iframe auto-login] rejected cms-oauth-code: state mismatch — the parent did not echo back the state the iframe sent');
+            return;
+        }
+        // /sso/login expects the same URL shape the IdP would have produced:
+        // ${redirect_uri}?code=…&state=…
+        deps.navigate(`${flow.redirectUri}?code=${encodeURIComponent(parsed.code)}&state=${encodeURIComponent(parsed.state)}`);
+    };
+    deps.win.addEventListener('message', handleMessage);
+    void (async ()=>{
+        try {
+            const metaRes = await deps.doFetch(deps.metaUrl, {
+                signal: abortController.signal
+            });
+            if (!metaRes.ok) {
+                // eslint-disable-next-line no-console -- surface auto-login failures to dev tools
+                console.warn(`[payload iframe auto-login] meta endpoint responded ${metaRes.status}`);
+                deps.onFailed?.();
+                return;
+            }
+            const meta = await metaRes.json();
+            const clientId = meta.params?.client_id;
+            const codeChallenge = meta.params?.code_challenge;
+            const codeChallengeMethod = meta.params?.code_challenge_method;
+            const redirect = meta.params?.redirect_uri;
+            const scope = meta.params?.scope;
+            const state = meta.params?.state;
+            if (typeof clientId !== 'string' || typeof codeChallenge !== 'string' || typeof codeChallengeMethod !== 'string' || typeof redirect !== 'string' || typeof scope !== 'string' || typeof state !== 'string') {
+                // eslint-disable-next-line no-console -- surface auto-login failures to dev tools
+                console.warn('[payload iframe auto-login] meta response missing required params');
+                deps.onFailed?.();
+                return;
+            }
+            if (abortController.signal.aborted) {
+                return;
+            }
+            flow = {
+                redirectUri: redirect,
+                state
+            };
+            deps.postMessageToParent({
+                type: 'mint-cms-oauth-code',
+                client_id: clientId,
+                code_challenge: codeChallenge,
+                code_challenge_method: codeChallengeMethod,
+                redirect_uri: redirect,
+                scope,
+                state
+            }, pickParentTargetOrigin(deps.parentReferrer));
+        } catch (err) {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            // eslint-disable-next-line no-console -- surface auto-login failures to dev tools
+            console.warn('[payload iframe auto-login] failed to fetch meta', err);
+            deps.onFailed?.();
+        }
+    })();
+    return ()=>{
+        deps.win.removeEventListener('message', handleMessage);
+        abortController.abort();
+    };
+};
+
+//# sourceMappingURL=iframeAutoLogin.js.map

package/dist/oauth/components/LoginButton/index.js

@@ -3,8 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useConfig } from '@payloadcms/ui';
 import { useSearchParams } from 'next/navigation.js';
 import React, { useEffect, useState } from 'react';
+import { setupIframeAutoLogin } from './iframeAutoLogin.js';
 import './index.scss';
 const baseClass = 'oauth-login';
+// Max time we wait for the parent (figma.com) to respond with a code after
+// posting `mint-cms-oauth-code`. If we hit this without a reply, we assume
+// the parent isn't going to respond and fall back to the manual login button.
+const AUTO_LOGIN_PARENT_REPLY_TIMEOUT_MS = 5000;
 // Figma logo SVG colored version
 // const FigmaIcon: React.FC = () => (
 //   <svg fill="none" height="27" viewBox="0 0 400 600" width="18">
@@ -47,8 +52,59 @@ const FigmaIcon = ()=>/*#__PURE__*/ _jsx("svg", {
 export const DefaultLoginButton = ({ disabled, endpointSlug })=>{
     const { config: { admin: { user: userSlug }, routes: { api }, serverURL } } = useConfig();
     const [authorizeURL, setAuthorizeURL] = useState('');
+    const [isInIframe, setIsInIframe] = useState(null);
+    const [autoLoginFailed, setAutoLoginFailed] = useState(false);
     const searchParams = useSearchParams();
     const payloadRedirect = searchParams.get('redirect');
+    useEffect(()=>{
+        try {
+            setIsInIframe(window.self !== window.top);
+        } catch  {
+            // Cross-origin access throws — that itself means we're in an iframe.
+            setIsInIframe(true);
+        }
+    }, []);
+    // Iframe auto-login: ask the parent (figma.com) for a fresh OAuth code, then
+    // navigate to `/sso/login?code=…&state=…` — the same handler the manual
+    // login button flow reaches. /sso/login exchanges the code, sets session
+    // cookies, and redirects to /admin. Runs on initial /admin/login load and
+    // after logout. See `./iframeAutoLogin.ts` for the flow + tests.
+    //
+    // If the flow fails — synchronously via `onFailed`, or silently via the
+    // timeout — we flip `autoLoginFailed` so the manual login button renders
+    // as a fallback instead of leaving the user on a blank screen.
+    useEffect(()=>{
+        if (isInIframe !== true || disabled) {
+            return;
+        }
+        const fallbackTimer = window.setTimeout(()=>{
+            // eslint-disable-next-line no-console -- surface silent parent failures
+            console.warn(`[payload iframe auto-login] parent did not reply with cms-oauth-code within ${AUTO_LOGIN_PARENT_REPLY_TIMEOUT_MS}ms — falling back to manual login`);
+            setAutoLoginFailed(true);
+        }, AUTO_LOGIN_PARENT_REPLY_TIMEOUT_MS);
+        const cleanup = setupIframeAutoLogin({
+            doFetch: window.fetch.bind(window),
+            metaUrl: `${serverURL}${api}/${userSlug}/${endpointSlug}/meta?serverURL=${window.location.origin}`,
+            navigate: (url)=>{
+                window.location.href = url;
+            },
+            onFailed: ()=>setAutoLoginFailed(true),
+            parentReferrer: document.referrer,
+            postMessageToParent: (msg, target)=>window.parent.postMessage(msg, target),
+            win: window
+        });
+        return ()=>{
+            window.clearTimeout(fallbackTimer);
+            cleanup();
+        };
+    }, [
+        isInIframe,
+        disabled,
+        serverURL,
+        api,
+        userSlug,
+        endpointSlug
+    ]);
     useEffect(()=>{
         if (payloadRedirect && !disabled) {
             // set cookie to redirect to the original page
@@ -58,23 +114,48 @@ export const DefaultLoginButton = ({ disabled, endpointSlug })=>{
         payloadRedirect,
         disabled
     ]);
+    // Fetch the manual login URL whenever we'd render the button — either we
+    // aren't in an iframe, or we're in an iframe but auto-login has given up.
+    const shouldRenderButton = !disabled && (isInIframe === false || autoLoginFailed);
     useEffect(()=>{
+        if (!shouldRenderButton) {
+            return;
+        }
         const getAuthorizeURL = async ()=>{
             const serverURLFromWindow = window.location.origin;
             const data = await fetch(`${serverURL}${api}/${userSlug}/${endpointSlug}/meta?serverURL=${serverURLFromWindow}`).then((res)=>res.json());
-            if (!disabled) {
-                setAuthorizeURL(data.authorizeURL);
-            }
+            setAuthorizeURL(data.authorizeURL);
         };
         void getAuthorizeURL();
     }, [
         api,
         serverURL,
         userSlug,
-        disabled,
+        shouldRenderButton,
         endpointSlug
     ]);
-    if (disabled) {
+    if (!shouldRenderButton) {
+        // In the iframe auto-login window, show a "Signing in…" hint so the
+        // user sees something is happening instead of a blank slot until the
+        // flow either navigates them away or times out into the manual button.
+        if (isInIframe === true && !disabled) {
+            return /*#__PURE__*/ _jsx("div", {
+                className: baseClass,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: `${baseClass}__signing-in`,
+                    role: "status",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            children: "Signing in"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            "aria-hidden": "true",
+                            className: `${baseClass}__spinner`
+                        })
+                    ]
+                })
+            });
+        }
         return null;
     }
     return /*#__PURE__*/ _jsx("div", {

package/dist/oauth/components/LoginButton/index.scss

@@ -54,4 +54,29 @@
     font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
       Oxygen, Ubuntu, Cantarell, sans-serif;
   }
+
+  &__signing-in {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 1rem;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Oxygen, Ubuntu, Cantarell, sans-serif;
+  }
+
+  &__spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--theme-elevation-200, #e5e5e5);
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: oauth-login-spin 0.8s linear infinite;
+  }
+}
+
+@keyframes oauth-login-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }

package/dist/oauth/components/LogoutButton/index.js

@@ -7,18 +7,30 @@ import './index.scss';
 const baseClass = 'oauth-logout';
 export const LogoutButton = ({ disabled, endpointSlug })=>{
     const { config, config: { admin: { user: userSlug }, routes: { api }, serverURL } } = useConfig();
+    // In an iframe (Figma Make Preview) the LoginButton auto-logs the user
+    // back in as soon as they hit /admin/login, which would silently undo the
+    // logout. Redirect to the site root instead so the user actually stays
+    // logged out. Outside an iframe, keep the original behavior of redirecting
+    // back to /admin.
     const [redirect, setRedirect] = React.useState('');
     React.useEffect(()=>{
         const protocol = window.location.protocol;
         const domain = window.location.hostname;
         const port = window.location.port;
-        let redirectToSet = `${protocol}//${domain}`;
+        let origin = `${protocol}//${domain}`;
         if (port) {
-            redirectToSet += `:${port}`;
+            origin += `:${port}`;
         }
-        setRedirect(formatAdminURL({
+        let isInIframe;
+        try {
+            isInIframe = window.self !== window.top;
+        } catch  {
+            // Cross-origin access throws — that itself means we're in an iframe.
+            isInIframe = true;
+        }
+        setRedirect(isInIframe ? origin : formatAdminURL({
             adminRoute: config.routes.admin,
-            serverURL: redirectToSet
+            serverURL: origin
         }));
     }, [
         config

package/dist/oauth/endpoints/getLoginEndpoint.js

@@ -4,6 +4,7 @@ import { createDebugLogger } from '../utilities/createDebugLogger.js';
 import { establishSession } from '../utilities/establishSession.js';
 import { exchangeCodeForAccessToken } from '../utilities/exchangeCodeForAccessToken.js';
 import { extractOrigin } from '../utilities/extractOrigin.js';
+import { buildCsrfCookieClearHeader, OAUTH_STATE_CSRF_COOKIE_NAME } from '../utilities/getAuthorizeURL.js';
 import { isAbsoluteURL } from '../utilities/isAbsoluteURL.js';
 export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug, pluginOptions, strategy })=>({
         handler: async (req)=>{
@@ -98,6 +99,16 @@ export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug,
                     req.payload.logger.error('Signature mismatch. Failing login and redirecting.');
                     return Response.redirect(failedRedirect);
                 }
+                // Verify CSRF cookie matches the nonce baked into state at /meta time.
+                // This is the browser-binding required by RFC 6749 §10.12 — without
+                // it, an attacker who mints (code, state) via /meta + consent could
+                // replay them into a victim's browser by URL.
+                const cookies = parseCookies(req.headers);
+                const cookieCsrf = cookies.get(OAUTH_STATE_CSRF_COOKIE_NAME);
+                if (!cookieCsrf || cookieCsrf !== state.csrf) {
+                    req.payload.logger.error('CSRF cookie mismatch. Failing login and redirecting.');
+                    return Response.redirect(failedRedirect);
+                }
                 if (!strategy.meta?.token_endpoint) {
                     debugLogger.error({
                         msg: `No metadata was obtained from the identity provider. Failing login and redirecting.`,
@@ -164,11 +175,13 @@ export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug,
                     });
                     throw new APIError(errMsg);
                 }
-                const cookies = parseCookies(req.headers);
-                const payloadRedirect = 'payloadRedirect' in cookies ? cookies.payloadRedirect : '';
+                const payloadRedirect = cookies.get('payloadRedirect') ?? '';
                 if (!req.responseHeaders) {
                     req.responseHeaders = new Headers();
                 }
+                // Clear the CSRF cookie now that the flow has completed — the nonce
+                // is single-use; leaving it around lets a replay try again.
+                req.responseHeaders.append('Set-Cookie', buildCsrfCookieClearHeader());
                 if (payloadRedirect) {
                     if (isAbsoluteURL(payloadRedirect)) {
                         redirectToUse = payloadRedirect;

package/dist/oauth/endpoints/getMetaEndpoint.js

@@ -1,10 +1,18 @@
-import { getAuthorizeURL } from '../utilities/getAuthorizeURL.js';
+import { parseCookies } from 'payload';
+import { buildCsrfCookieHeader, getAuthorizeURL, OAUTH_STATE_CSRF_COOKIE_NAME } from '../utilities/getAuthorizeURL.js';
 export const getMetaEndpoint = ({ collection, collectionOptions, endpointSlug, pluginOptions, strategy })=>({
         handler: async (req)=>{
-            const authorizeURL = await getAuthorizeURL({
+            // Reuse the CSRF nonce from the existing cookie if one is set. Makes
+            // `/meta` idempotent: a second call from the same browser (Strict Mode
+            // re-mount, retry, multi-tab) returns the SAME state.csrf, so the
+            // cookie never has to change after the first call — no last-write-wins
+            // race between the cookie and the iframe's already-captured state.
+            const existingCsrfNonce = parseCookies(req.headers).get(OAUTH_STATE_CSRF_COOKIE_NAME);
+            const { authorizeURL, csrfNonce, params } = await getAuthorizeURL({
                 collection,
                 collectionOptions,
                 endpointSlug,
+                existingCsrfNonce,
                 failedRedirect: req.query.failedRedirect,
                 payload: req.payload,
                 pluginOptions,
@@ -12,8 +20,15 @@ export const getMetaEndpoint = ({ collection, collectionOptions, endpointSlug, p
                 serverURLOverride: req.query.serverURL,
                 strategy
             });
+            if (!req.responseHeaders) {
+                req.responseHeaders = new Headers();
+            }
+            // Always re-emit Set-Cookie — when reusing, this just refreshes Max-Age
+            // so long-lived tabs don't expire the cookie mid-consent.
+            req.responseHeaders.append('Set-Cookie', buildCsrfCookieHeader(csrfNonce));
             return Response.json({
-                authorizeURL
+                authorizeURL,
+                params
             }, {
                 status: 200
             });

package/dist/oauth/endpoints/getRedirectToLoginEndpoint.js

@@ -1,10 +1,15 @@
-import { getAuthorizeURL } from '../utilities/getAuthorizeURL.js';
+import { parseCookies } from 'payload';
+import { buildCsrfCookieHeader, getAuthorizeURL, OAUTH_STATE_CSRF_COOKIE_NAME } from '../utilities/getAuthorizeURL.js';
 export const getRedirectToLoginEndpoint = ({ collection, collectionOptions, endpointSlug, pluginOptions, strategy })=>({
         handler: async (req)=>{
-            const authorizeURL = await getAuthorizeURL({
+            // Reuse the CSRF nonce from the existing cookie if one is set. See
+            // getMetaEndpoint.ts for the idempotency rationale.
+            const existingCsrfNonce = parseCookies(req.headers).get(OAUTH_STATE_CSRF_COOKIE_NAME);
+            const { authorizeURL, csrfNonce } = await getAuthorizeURL({
                 collection,
                 collectionOptions,
                 endpointSlug,
+                existingCsrfNonce,
                 failedRedirect: req.query.failedRedirect,
                 payload: req.payload,
                 pluginOptions,
@@ -12,6 +17,10 @@ export const getRedirectToLoginEndpoint = ({ collection, collectionOptions, endp
                 serverURLOverride: req.query.serverURL,
                 strategy
             });
+            if (!req.responseHeaders) {
+                req.responseHeaders = new Headers();
+            }
+            req.responseHeaders.append('Set-Cookie', buildCsrfCookieHeader(csrfNonce));
             return Response.redirect(authorizeURL);
         },
         method: 'get',

package/dist/oauth/index.js

@@ -4,7 +4,6 @@ import { getLoginEndpoint } from './endpoints/getLoginEndpoint.js';
 import { getLogoutEndpoint } from './endpoints/getLogoutEndpoint.js';
 import { getMetaEndpoint } from './endpoints/getMetaEndpoint.js';
 import { getRedirectToLoginEndpoint } from './endpoints/getRedirectToLoginEndpoint.js';
-import { getTokenLoginEndpoint } from './endpoints/getTokenLoginEndpoint.js';
 import { getAfterLogout } from './hooks/afterLogout.js';
 import { getMeHook } from './hooks/me.js';
 import { getRefreshHook } from './hooks/refresh.js';
@@ -207,13 +206,6 @@ export const oAuth2Plugin = (pluginOptions)=>(config)=>{
                             endpointSlug,
                             pluginOptions,
                             strategy
-                        }),
-                        getTokenLoginEndpoint({
-                            collection: existingCollection,
-                            collectionOptions,
-                            endpointSlug,
-                            pluginOptions,
-                            strategy
                         })
                     ],
                     fields,

package/dist/oauth/types.d.ts

@@ -169,6 +169,13 @@ export type CookieOptions = {
     secure?: boolean;
 };
 export type StateObj = {
+    /**
+     * Random per-flow nonce. The server sets a matching HttpOnly cookie
+     * (`payload-oauth-state_csrf`) at the time the state is minted; `/sso/login`
+     * compares the value in state to the cookie on callback. This is the
+     * browser-bound CSRF defense required by RFC 6749 §10.12.
+     */
+    csrf: string;
     /**
      * Redirect to use if the login fails
      */

package/dist/oauth/utilities/figmaHostnames.d.ts

@@ -0,0 +1,3 @@
+export declare const FIGMA_HOSTNAMES: Set<string>;
+export declare const isFigmaOrigin: (origin: string) => boolean;
+//# sourceMappingURL=figmaHostnames.d.ts.map

package/dist/oauth/utilities/figmaHostnames.js

@@ -0,0 +1,26 @@
+// Copied from share/figma-url/src/hostnames.ts.
+// This package is published to npm (@payloadcms/figma) and cannot import from
+// the monorepo's internal share/ tree, so the list is duplicated here.
+export const FIGMA_HOSTNAMES = new Set([
+    'embed.figma.com',
+    'embed.figma-gov.com',
+    'embed.local.figma.engineering',
+    'embed.staging.figma.com',
+    'figma.com',
+    'figma-gov.com',
+    'local.figma.engineering',
+    'localhost',
+    'staging.figma.com',
+    'www.figma.com',
+    'www.figma-gov.com'
+]);
+export const isFigmaOrigin = (origin)=>{
+    try {
+        const { hostname } = new URL(origin);
+        return FIGMA_HOSTNAMES.has(hostname) || hostname.endsWith('.figdev.systems');
+    } catch  {
+        return false;
+    }
+};
+
+//# sourceMappingURL=figmaHostnames.js.map

package/dist/oauth/utilities/getAuthorizeURL.d.ts

@@ -5,6 +5,16 @@ interface Args {
     collection: CollectionConfig;
     collectionOptions: CollectionOptions;
     endpointSlug: string;
+    /**
+     * If the request already has an `__Host-payload-oauth-state_csrf` cookie,
+     * pass its value here — `getAuthorizeURL` will reuse it as `state.csrf`
+     * instead of minting a fresh nonce. This is what makes `/meta`
+     * idempotent across multiple calls in a single browser session (React
+     * Strict Mode re-mounts, retry-after-failure, multiple tabs) and
+     * prevents the cookie/state mismatch race where one call overwrites
+     * another call's cookie.
+     */
+    existingCsrfNonce?: null | string;
     failedRedirect?: unknown;
     payload: Payload;
     pluginOptions: PluginOptions;
@@ -12,6 +22,49 @@ interface Args {
     serverURLOverride?: unknown;
     strategy: Strategy;
 }
-export declare const getAuthorizeURL: ({ collection, collectionOptions, endpointSlug, failedRedirect, payload, pluginOptions, redirect, serverURLOverride, strategy, }: Args) => Promise<string>;
+export interface AuthorizeURLParams {
+    [key: string]: string;
+    client_id: string;
+    code_challenge: string;
+    code_challenge_method: string;
+    nonce: string;
+    redirect_uri: string;
+    response_mode: string;
+    response_type: string;
+    scope: string;
+    state: string;
+}
+export interface AuthorizeURLResult {
+    authorizeURL: string;
+    /**
+     * The plaintext CSRF nonce that the caller MUST set as an HttpOnly
+     * cookie on the response (see `OAUTH_STATE_CSRF_COOKIE_NAME`). `/sso/login`
+     * compares this value to the cookie on callback — this is the
+     * browser-binding required by RFC 6749 §10.12.
+     */
+    csrfNonce: string;
+    params: AuthorizeURLParams;
+}
+export declare const getAuthorizeURL: ({ collection, collectionOptions, endpointSlug, existingCsrfNonce, failedRedirect, payload, pluginOptions, redirect, serverURLOverride, strategy, }: Args) => Promise<AuthorizeURLResult>;
+/**
+ * Name of the HttpOnly cookie that carries the browser-bound CSRF nonce
+ * for the OAuth flow. The `__Host-` prefix instructs browsers to enforce:
+ * Secure, no Domain attribute (host-only), and Path=/ — which together
+ * prevent sibling subdomains from setting or overwriting it.
+ */
+export declare const OAUTH_STATE_CSRF_COOKIE_NAME = "__Host-payload-oauth-state_csrf";
+/**
+ * Build the `Set-Cookie` header value for the CSRF cookie. SameSite=None
+ * + Secure so the cookie survives the IdP cross-site redirect back into
+ * /sso/login, AND so the iframe auto-login path works (the iframe is a
+ * third-party context from the top-level Figma page). Path=/ is required
+ * by the `__Host-` prefix.
+ */
+export declare const buildCsrfCookieHeader: (nonce: string) => string;
+/**
+ * `Set-Cookie` header to clear the CSRF cookie after a successful (or
+ * failed) callback. Same attributes as the set version, plus Max-Age=0.
+ */
+export declare const buildCsrfCookieClearHeader: () => string;
 export {};
 //# sourceMappingURL=getAuthorizeURL.d.ts.map

package/dist/oauth/utilities/getAuthorizeURL.js

@@ -2,14 +2,21 @@ import crypto from 'crypto';
 import * as QueryString from 'qs-esm';
 import { v4 as uuid } from 'uuid';
 import { defaultScope } from '../defaults.js';
-export const getAuthorizeURL = async ({ collection, collectionOptions, endpointSlug, failedRedirect, payload, pluginOptions, redirect, serverURLOverride, strategy })=>{
+export const getAuthorizeURL = async ({ collection, collectionOptions, endpointSlug, existingCsrfNonce, failedRedirect, payload, pluginOptions, redirect, serverURLOverride, strategy })=>{
     const { redirectServerURL } = pluginOptions;
     await strategy.ensureMeta();
     // Generate a random code verifier
     const codeVerifier = crypto.randomBytes(32).toString('base64url');
     // Create a code challenge by hashing the code verifier
     const code_challenge = crypto.createHash('sha256').update(codeVerifier).digest('base64url');
+    // Nonce that goes in both `state.csrf` and the `__Host-payload-oauth-state_csrf`
+    // HttpOnly cookie. /sso/login compares the two on callback to defeat
+    // login-CSRF (RFC 6749 §10.12). Reused from the request's existing cookie
+    // when present so `/meta` is idempotent across multiple calls; otherwise
+    // freshly minted.
+    const csrfNonce = existingCsrfNonce || crypto.randomBytes(32).toString('base64url');
     const state = {
+        csrf: csrfNonce,
         sig: payload.encrypt(strategy.name),
         verifier: payload.encrypt(codeVerifier)
     };
@@ -39,7 +46,42 @@ export const getAuthorizeURL = async ({ collection, collectionOptions, endpointS
     const authorizeURL = `${strategy.meta?.authorization_endpoint}?${QueryString.stringify(params, {
         encode: false
     })}`;
-    return authorizeURL;
+    return {
+        authorizeURL,
+        csrfNonce,
+        params
+    };
 };
+/**
+ * Name of the HttpOnly cookie that carries the browser-bound CSRF nonce
+ * for the OAuth flow. The `__Host-` prefix instructs browsers to enforce:
+ * Secure, no Domain attribute (host-only), and Path=/ — which together
+ * prevent sibling subdomains from setting or overwriting it.
+ */ export const OAUTH_STATE_CSRF_COOKIE_NAME = '__Host-payload-oauth-state_csrf';
+/**
+ * Build the `Set-Cookie` header value for the CSRF cookie. SameSite=None
+ * + Secure so the cookie survives the IdP cross-site redirect back into
+ * /sso/login, AND so the iframe auto-login path works (the iframe is a
+ * third-party context from the top-level Figma page). Path=/ is required
+ * by the `__Host-` prefix.
+ */ export const buildCsrfCookieHeader = (nonce)=>[
+        `${OAUTH_STATE_CSRF_COOKIE_NAME}=${nonce}`,
+        'HttpOnly',
+        'Secure',
+        'SameSite=None',
+        'Path=/',
+        'Max-Age=600'
+    ].join('; ');
+/**
+ * `Set-Cookie` header to clear the CSRF cookie after a successful (or
+ * failed) callback. Same attributes as the set version, plus Max-Age=0.
+ */ export const buildCsrfCookieClearHeader = ()=>[
+        `${OAUTH_STATE_CSRF_COOKIE_NAME}=`,
+        'HttpOnly',
+        'Secure',
+        'SameSite=None',
+        'Path=/',
+        'Max-Age=0'
+    ].join('; ');
 
 //# sourceMappingURL=getAuthorizeURL.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/figma",
-  "version": "0.0.1-alpha.66",
+  "version": "0.0.1-alpha.67",
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
   "exports": {

package/dist/oauth/endpoints/getTokenLoginEndpoint.d.ts

@@ -1,17 +0,0 @@
-import type { CollectionConfig, Endpoint } from 'payload';
-import type { Strategy } from '../strategy/index.js';
-import type { CollectionOptions, PluginOptions } from '../types.js';
-interface Args {
-    collection: CollectionConfig;
-    collectionOptions: CollectionOptions;
-    endpointSlug: string;
-    pluginOptions: PluginOptions;
-    strategy: Strategy;
-}
-/**
- * Auto-login endpoint for embedded contexts where the interactive OAuth flow
- * cannot run.
- */
-export declare const getTokenLoginEndpoint: ({ collection, collectionOptions, endpointSlug, pluginOptions, strategy, }: Args) => Endpoint;
-export {};
-//# sourceMappingURL=getTokenLoginEndpoint.d.ts.map

package/dist/oauth/endpoints/getTokenLoginEndpoint.js

@@ -1,105 +0,0 @@
-import { formatAdminURL, getSafeRedirect } from 'payload/shared';
-import { createDebugLogger } from '../utilities/createDebugLogger.js';
-import { establishSession } from '../utilities/establishSession.js';
-import { exchangeCodeForAccessToken } from '../utilities/exchangeCodeForAccessToken.js';
-import { isAbsoluteURL } from '../utilities/isAbsoluteURL.js';
-/**
- * Auto-login endpoint for embedded contexts where the interactive OAuth flow
- * cannot run.
- */ export const getTokenLoginEndpoint = ({ collection, collectionOptions, endpointSlug, pluginOptions, strategy })=>({
-        handler: async (req)=>{
-            const { config } = req.payload;
-            const adminRoute = config.routes?.admin || '/admin';
-            const debugLogger = createDebugLogger(req.payload, pluginOptions.debug);
-            const adminURL = formatAdminURL({
-                adminRoute,
-                serverURL: config.serverURL
-            });
-            const failedRedirect = formatAdminURL({
-                adminRoute,
-                path: '/login',
-                serverURL: config.serverURL
-            });
-            try {
-                await strategy.ensureMeta();
-                const code = req.query.code;
-                const redirectQuery = req.query.redirect;
-                let redirectToUse = adminURL;
-                if (typeof redirectQuery === 'string' && redirectQuery.length > 0) {
-                    const safeRedirect = getSafeRedirect({
-                        allowAbsoluteUrls: false,
-                        redirectTo: redirectQuery
-                    });
-                    if (safeRedirect && !isAbsoluteURL(safeRedirect)) {
-                        redirectToUse = `${config.serverURL ?? ''}${safeRedirect}`;
-                    }
-                }
-                if (typeof code !== 'string' || code.length === 0) {
-                    debugLogger.error({
-                        msg: 'token_login: missing code'
-                    });
-                    return Response.redirect(failedRedirect);
-                }
-                if (!strategy.meta?.token_endpoint) {
-                    debugLogger.error({
-                        msg: 'token_login: no token_endpoint discovered from identity provider'
-                    });
-                    return Response.redirect(failedRedirect);
-                }
-                debugLogger.info({
-                    msg: 'token_login: exchanging code for access token'
-                });
-                const tokenRes = await exchangeCodeForAccessToken({
-                    code,
-                    redirectUri: formatAdminURL({
-                        apiRoute: config.routes?.api || '/api',
-                        path: `/${collection.slug}/${endpointSlug}/token_login`,
-                        serverURL: config.serverURL
-                    }),
-                    strategy
-                });
-                const { access_token, error, error_description, expires_in } = tokenRes;
-                if (error) {
-                    req.payload.logger.error({
-                        err: error,
-                        error_description,
-                        msg: 'token_login: error exchanging code for access token'
-                    });
-                    return Response.redirect(failedRedirect);
-                }
-                if (typeof access_token !== 'string' || access_token.length === 0) {
-                    req.payload.logger.error({
-                        msg: 'token_login: no access_token returned from identity provider'
-                    });
-                    return Response.redirect(failedRedirect);
-                }
-                await establishSession({
-                    accessToken: access_token,
-                    collection,
-                    collectionOptions,
-                    contentSystemId: config.custom.figma.contentSystemId,
-                    debugLogger,
-                    pluginOptions,
-                    refreshTokenExpiresIn: expires_in,
-                    req,
-                    strategy
-                });
-                return Response.redirect(redirectToUse);
-            } catch (err) {
-                req.payload.logger.error({
-                    err,
-                    msg: 'Error during token_login',
-                    path: req.pathname
-                });
-                return Response.json({
-                    error: 'Error during token_login'
-                }, {
-                    status: 500
-                });
-            }
-        },
-        method: 'get',
-        path: `/${endpointSlug}/token_login`
-    });
-
-//# sourceMappingURL=getTokenLoginEndpoint.js.map