@payloadcms/figma 0.0.1-alpha.9 → 0.1.0-alpha.0

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

@@ -0,0 +1,28 @@
+@layer payload-default {
+  .figma-avatar-placeholder {
+    &__bg {
+      fill: var(--theme-elevation-50);
+      stroke: var(--theme-elevation-200);
+      stroke-width: 1px;
+    }
+
+    &__head,
+    &__body {
+      fill: var(--theme-elevation-200);
+    }
+
+    &:hover {
+      .figma-avatar-placeholder {
+        &__bg {
+          fill: var(--theme-elevation-200);
+          stroke: var(--theme-elevation-600);
+        }
+
+        &__head,
+        &__body {
+          fill: var(--theme-elevation-600);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+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;
+export interface ParentOriginSignals {
+    /**
+     * `ancestorOrigins[0]`: immediate embedder origin. `undefined` where the
+     * browser lacks `Location.ancestorOrigins`.
+     */
+    ancestorOrigin: null | string | undefined;
+    /** `window.location.origin` — this iframe's own origin. */
+    ownOrigin: null | string | undefined;
+    /** `document.referrer`. */
+    referrer: null | string | undefined;
+}
+/**
+ * Resolve the exact origin for `window.parent.postMessage`, or `null` if we
+ * can't establish a trusted embedder (caller must then NOT post). We never
+ * target `'*'`: the payload embeds PKCE material in `state`.
+ *
+ *  1. `ancestorOrigin` present (browser-set, unspoofable): trust iff Figma,
+ *     else `null` — no fall-through to weaker signals.
+ *  2. No `ancestorOrigins`: fall back to `referrer`, but only if
+ *     it's a Figma origin and not our own. (Payload's `/admin` -> `/admin/login`
+ *     307 leaves `referrer` as our own origin, never the embedder.)
+ *  3. Otherwise `null`.
+ */
+export declare const resolveParentTargetOrigin: ({ ancestorOrigin, ownOrigin, referrer, }: ParentOriginSignals) => null | 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;
+    /**
+     * Exact origin for `postMessage`, from `resolveParentTargetOrigin`. `null`
+     * means no trusted embedder: don't post, trigger `onFailed`. Never `'*'`.
+     */
+    parentTargetOrigin: null | string;
+    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);

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

@@ -0,0 +1,168 @@
+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
+    };
+};
+/**
+ * Resolve the exact origin for `window.parent.postMessage`, or `null` if we
+ * can't establish a trusted embedder (caller must then NOT post). We never
+ * target `'*'`: the payload embeds PKCE material in `state`.
+ *
+ *  1. `ancestorOrigin` present (browser-set, unspoofable): trust iff Figma,
+ *     else `null` — no fall-through to weaker signals.
+ *  2. No `ancestorOrigins`: fall back to `referrer`, but only if
+ *     it's a Figma origin and not our own. (Payload's `/admin` -> `/admin/login`
+ *     307 leaves `referrer` as our own origin, never the embedder.)
+ *  3. Otherwise `null`.
+ */ export const resolveParentTargetOrigin = ({ ancestorOrigin, ownOrigin, referrer })=>{
+    if (ancestorOrigin != null) {
+        return isFigmaOrigin(ancestorOrigin) ? ancestorOrigin : null;
+    }
+    if (referrer) {
+        try {
+            const candidate = new URL(referrer).origin;
+            if (candidate !== ownOrigin && isFigmaOrigin(candidate)) {
+                return candidate;
+            }
+        } catch  {
+        // unparseable referrer — fall through
+        }
+    }
+    return null;
+};
+/**
+ * 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;
+            }
+            // No trusted embedder origin: refuse to post (don't broadcast PKCE-bearing
+            // `state` to '*'). See `resolveParentTargetOrigin`.
+            if (deps.parentTargetOrigin === null) {
+                // eslint-disable-next-line no-console -- surface auto-login failures to dev tools
+                console.warn('[payload iframe auto-login] could not determine a trusted parent origin — falling back to manual login');
+                deps.onFailed?.();
+                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
+            }, deps.parentTargetOrigin);
+        } 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();
+    };
+};

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

@@ -6,4 +6,3 @@ type DefaultLoginButtonProps = {
 };
 export declare const DefaultLoginButton: React.FC<DefaultLoginButtonProps>;
 export {};
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,52 +1,190 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, useConfig } from '@payloadcms/ui';
-import { useSearchParams } from 'next/navigation.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfig, useSearchParams } from '@payloadcms/ui';
 import React, { useEffect, useState } from 'react';
+import { getSearchParam } from '../../utils/getSearchParam.js';
+import { resolveParentTargetOrigin, 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 = 10000;
+// Figma logo SVG colored version
+// const FigmaIcon: React.FC = () => (
+//   <svg fill="none" height="27" viewBox="0 0 400 600" width="18">
+//     <path
+//       d="M0 500C0 444.772 44.772 400 100 400H200V500C200 555.228 155.228 600 100 600C44.772 600 0 555.228 0 500Z"
+//       fill="#24CB71"
+//     />
+//     <path
+//       d="M200 0V200H300C355.228 200 400 155.228 400 100C400 44.772 355.228 0 300 0H200Z"
+//       fill="#FF7237"
+//     />
+//     <path
+//       d="M299.167 400C354.395 400 399.167 355.228 399.167 300C399.167 244.772 354.395 200 299.167 200C243.939 200 199.167 244.772 199.167 300C199.167 355.228 243.939 400 299.167 400Z"
+//       fill="#00B6FF"
+//     />
+//     <path
+//       d="M0 100C0 155.228 44.772 200 100 200H200V0H100C44.772 0 0 44.772 0 100Z"
+//       fill="#FF3737"
+//     />
+//     <path
+//       d="M0 300C0 355.228 44.772 400 100 400H200V200H100C44.772 200 0 244.772 0 300Z"
+//       fill="#874FFF"
+//     />
+//   </svg>
+// )
+// Figma logo SVG monochrome version
+const FigmaIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        fill: "none",
+        height: "20px",
+        viewBox: "0 0 15 15",
+        width: "20px",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ _jsx("path", {
+            clipRule: "evenodd",
+            d: "M7.00005 2.04999H5.52505C4.71043 2.04999 4.05005 2.71037 4.05005 3.52499C4.05005 4.33961 4.71043 4.99999 5.52505 4.99999H7.00005V2.04999ZM7.00005 1.04999H8.00005H9.47505C10.842 1.04999 11.95 2.15808 11.95 3.52499C11.95 4.33163 11.5642 5.04815 10.9669 5.49999C11.5642 5.95184 11.95 6.66836 11.95 7.475C11.95 8.8419 10.842 9.95 9.47505 9.95C8.92236 9.95 8.41198 9.76884 8.00005 9.46266V9.95L8.00005 11.425C8.00005 12.7919 6.89195 13.9 5.52505 13.9C4.15814 13.9 3.05005 12.7919 3.05005 11.425C3.05005 10.6183 3.43593 9.90184 4.03317 9.44999C3.43593 8.99814 3.05005 8.28163 3.05005 7.475C3.05005 6.66836 3.43594 5.95184 4.03319 5.5C3.43594 5.04815 3.05005 4.33163 3.05005 3.52499C3.05005 2.15808 4.15814 1.04999 5.52505 1.04999H7.00005ZM8.00005 2.04999V4.99999H9.47505C10.2897 4.99999 10.95 4.33961 10.95 3.52499C10.95 2.71037 10.2897 2.04999 9.47505 2.04999H8.00005ZM5.52505 8.94998H7.00005L7.00005 7.4788L7.00005 7.475L7.00005 7.4712V6H5.52505C4.71043 6 4.05005 6.66038 4.05005 7.475C4.05005 8.28767 4.70727 8.94684 5.5192 8.94999L5.52505 8.94998ZM4.05005 11.425C4.05005 10.6123 4.70727 9.95315 5.5192 9.94999L5.52505 9.95H7.00005L7.00005 11.425C7.00005 12.2396 6.33967 12.9 5.52505 12.9C4.71043 12.9 4.05005 12.2396 4.05005 11.425ZM8.00005 7.47206C8.00164 6.65879 8.66141 6 9.47505 6C10.2897 6 10.95 6.66038 10.95 7.475C10.95 8.28962 10.2897 8.95 9.47505 8.95C8.66141 8.95 8.00164 8.29121 8.00005 7.47794V7.47206Z",
+            fill: "#FFFFFF",
+            fillRule: "evenodd"
+        })
+    });
 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');
+    const payloadRedirect = getSearchParam(searchParams, '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);
+        // ancestorOrigins[0] is the immediate embedder's origin (browser-set,
+        // unspoofable) where supported; undefined on browsers that don't implement
+        // the non-standard Location.ancestorOrigins (older Firefox, pre-148).
+        const ancestorOrigins = window.location.ancestorOrigins;
+        // encodeURIComponent is required on Coder devbox: there a proxy hop rewrites
+        // an unencoded `serverURL=https://<host>` to http before it reaches the
+        // server, which then flows into state.serverURL / the OAuth redirect_uri and
+        // breaks login with an https→http navigation. Encoding the `://` avoids it.
+        const cleanup = setupIframeAutoLogin({
+            doFetch: window.fetch.bind(window),
+            metaUrl: `${serverURL}${api}/${userSlug}/${endpointSlug}/meta?serverURL=${encodeURIComponent(window.location.origin)}`,
+            navigate: (url)=>{
+                window.location.href = url;
+            },
+            onFailed: ()=>setAutoLoginFailed(true),
+            parentTargetOrigin: resolveParentTargetOrigin({
+                ancestorOrigin: ancestorOrigins?.[0],
+                ownOrigin: window.location.origin,
+                referrer: 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
-            document.cookie = `payloadRedirect=${payloadRedirect}; path=/`;
+            // set cookie to redirect to the original page. SameSite=None; Secure;
+            // Partitioned so it round-trips to /sso/login from the cross-site Make
+            // iframe (a Lax/unmarked cookie isn't sent, dropping the deep-link redirect).
+            document.cookie = `payloadRedirect=${payloadRedirect}; path=/; Secure; SameSite=None; Partitioned`;
         }
     }, [
         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;
+            // Encoded for the same reason as the auto-login metaUrl above.
+            const serverURLFromWindow = encodeURIComponent(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", {
         className: baseClass,
-        children: /*#__PURE__*/ _jsx(Button, {
+        children: /*#__PURE__*/ _jsxs("a", {
             className: `${baseClass}__btn`,
-            el: "anchor",
-            url: authorizeURL,
-            children: "Log in"
+            href: authorizeURL,
+            children: [
+                /*#__PURE__*/ _jsx(FigmaIcon, {}),
+                /*#__PURE__*/ _jsx("span", {
+                    className: `${baseClass}__text`,
+                    children: "Log in with Figma"
+                })
+            ]
         })
     });
 };
-
-//# sourceMappingURL=index.js.map

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

@@ -1,10 +1,82 @@
 .oauth-login {
   display: flex;
   justify-content: center;
+  padding: 1rem 0;
 
-  &__btn:focus {
-    .btn__icon {
-      background: none;
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1.5rem;
+    min-height: 3rem;
+    background-color: #4d49fc;
+    color: #ffffff;
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    font-weight: 450;
+    letter-spacing: 0.05px;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.1s ease;
+    box-shadow: none;
+
+    &:hover {
+      background-color: #4440e8;
+      transform: translateY(-1px);
+    }
+
+    &:active {
+      background-color: #3c38d4;
+      transform: translateY(0);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(77, 73, 252, 0.4);
     }
   }
+
+  &__icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+  }
+
+  &__text {
+    white-space: nowrap;
+    line-height: 1rem;
+    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.d.ts

@@ -4,4 +4,3 @@ export declare const LogoutButton: React.FC<{
     disabled?: boolean;
     endpointSlug: string;
 }>;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,24 +1,37 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Logout, useConfig } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
 import React from 'react';
-import { getAdminPath } from '../../utilities/getAdminPath.js';
 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}`;
         }
-        redirectToSet += getAdminPath(config);
-        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-        setRedirect(redirectToSet);
+        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: origin
+        }));
     }, [
         config
     ]);
@@ -32,7 +45,7 @@ export const LogoutButton = ({ disabled, endpointSlug })=>{
         className: baseClass,
         children: /*#__PURE__*/ _jsx("a", {
             "aria-label": "Logout",
-            href: `${serverURL}${api}/${userSlug}/${endpointSlug}/logout?redirect=${redirect}`,
+            href: `${serverURL}${api}/${userSlug}/${endpointSlug}/logout?redirect=${encodeURIComponent(redirect)}`,
             children: /*#__PURE__*/ _jsxs("svg", {
                 className: "icon icon--logout",
                 fill: "none",
@@ -63,5 +76,3 @@ export const LogoutButton = ({ disabled, endpointSlug })=>{
         })
     });
 };
-
-//# sourceMappingURL=index.js.map

package/dist/oauth/defaults.d.ts

@@ -1,10 +1,11 @@
 import type { CollectionConfig, EmailField, TextField } from 'payload';
 import type { VerifyFunction } from './types.js';
+export declare const DEFAULT_USER_INFO_COOKIE_NAME = "figma-user-info";
 export declare const defaultScope: string[];
 export declare const defaultUsernameField: TextField;
-export declare const defaultVerify: ({ collection, strategyName, usernameField, }: {
+export declare const defaultVerify: ({ collection, strategyName, userInfoCookieName, usernameField, }: {
     collection: CollectionConfig;
     strategyName: string;
+    userInfoCookieName?: string;
     usernameField: EmailField | TextField;
 }) => VerifyFunction;
-//# sourceMappingURL=defaults.d.ts.map