@payloadcms/figma 0.0.1-alpha.7 → 0.0.1-alpha.71

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

@@ -1,15 +1,122 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, useConfig } from '@payloadcms/ui';
+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 { 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');
+    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
@@ -19,32 +126,63 @@ 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;
+            // 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"
+                })
+            ]
         })
     });
 };

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.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",

package/dist/oauth/defaults.d.ts

@@ -1,10 +1,12 @@
 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

package/dist/oauth/defaults.js

@@ -1,5 +1,20 @@
+import { parseCookies } from 'payload';
 import { v4 as uuid } from 'uuid';
 import { hasUserTokenPropsChanged } from './utilities/hasUserTokenPropsChanged.js';
+import { isDuplicateKeyError } from './utilities/isDuplicateKeyError.js';
+export const DEFAULT_USER_INFO_COOKIE_NAME = 'figma-user-info';
+function getFigmaUserInfo(headers, cookieName) {
+    try {
+        const cookies = parseCookies(headers);
+        const encoded = cookies.get(cookieName);
+        if (!encoded) {
+            return null;
+        }
+        return JSON.parse(Buffer.from(encoded, 'base64').toString('utf-8'));
+    } catch  {
+        return null;
+    }
+}
 export const defaultScope = [
     'openid',
     'profile',
@@ -14,7 +29,7 @@ export const defaultUsernameField = {
     },
     unique: true
 };
-export const defaultVerify = ({ collection, strategyName, usernameField })=>async ({ payload, token })=>{
+export const defaultVerify = ({ collection, strategyName, userInfoCookieName = DEFAULT_USER_INFO_COOKIE_NAME, usernameField })=>async ({ headers, payload, token })=>{
         let tokenUsername = 'preferred_username';
         if (usernameField.name !== 'preferredUsername') {
             tokenUsername = usernameField.name;
@@ -24,6 +39,13 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
                 user: null
             };
         }
+        const figmaUserInfo = getFigmaUserInfo(headers, userInfoCookieName);
+        let responseHeaders;
+        // Clear the cookie after reading
+        if (figmaUserInfo) {
+            responseHeaders = new Headers();
+            responseHeaders.append('Set-Cookie', `${userInfoCookieName}=; Max-Age=0; Path=/;`);
+        }
         let user = null;
         const depth = typeof collection.auth === 'object' ? collection.auth.depth : undefined;
         try {
@@ -40,13 +62,19 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
             });
             if (results.docs.length > 0) {
                 user = results.docs[0];
-                // Update user with new token data
-                if (hasUserTokenPropsChanged(user, token)) {
+                // Check if update needed (token changed OR figma info missing/changed)
+                const userWithFigma = user;
+                const needsFigmaUpdate = figmaUserInfo && (userWithFigma.figmaHandle !== figmaUserInfo.handle || userWithFigma.figmaImageUrl !== figmaUserInfo.img_url);
+                if (hasUserTokenPropsChanged(user, token) || needsFigmaUpdate) {
                     user = await payload.update({
                         id: user.id,
                         collection: collection.slug,
                         data: {
-                            ...token
+                            ...token,
+                            ...figmaUserInfo && {
+                                figmaHandle: figmaUserInfo.handle,
+                                figmaImageUrl: figmaUserInfo.img_url
+                            }
                         },
                         depth
                     });
@@ -55,16 +83,43 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
                 const newUser = {
                     email: token.preferredUsername || token.email,
                     [usernameField.name]: token[tokenUsername],
-                    ...token
+                    ...token,
+                    ...figmaUserInfo && {
+                        figmaHandle: figmaUserInfo.handle,
+                        figmaImageUrl: figmaUserInfo.img_url
+                    }
                 };
                 if (typeof collection.auth === 'object' && !collection.auth.disableLocalStrategy) {
                     newUser.password = uuid();
                 }
-                user = await payload.create({
-                    collection: collection.slug,
-                    data: newUser,
-                    depth
-                });
+                try {
+                    user = await payload.create({
+                        collection: collection.slug,
+                        data: newUser,
+                        depth,
+                        overrideAccess: true
+                    });
+                } catch (createErr) {
+                    // Race condition: if unique constraint violation, user was created by concurrent request
+                    if (isDuplicateKeyError(createErr)) {
+                        const retryResults = await payload.find({
+                            collection: collection.slug,
+                            depth,
+                            limit: 1,
+                            pagination: false,
+                            where: {
+                                [usernameField.name]: {
+                                    equals: token[tokenUsername]
+                                }
+                            }
+                        });
+                        if (retryResults.docs.length > 0) {
+                            user = retryResults.docs[0];
+                        }
+                    } else {
+                        throw createErr;
+                    }
+                }
             }
         } catch (err) {
             payload.logger.error({
@@ -72,6 +127,7 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
                 msg: 'Error verifying user from defaultVerify.'
             });
             return {
+                responseHeaders,
                 user: null
             };
         }
@@ -80,10 +136,12 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
             user._strategy = strategyName;
             user.exp = token.exp;
             return {
+                responseHeaders,
                 user
             };
         }
         return {
+            responseHeaders,
             user: null
         };
     };