@payloadcms/figma 0.0.1-alpha.6 → 0.0.1-alpha.60

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

@@ -1,10 +1,49 @@
 '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 './index.scss';
 const baseClass = 'oauth-login';
+// 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('');
@@ -40,11 +79,16 @@ export const DefaultLoginButton = ({ disabled, endpointSlug })=>{
     }
     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,57 @@
 .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;
+  }
 }

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

@@ -1,8 +1,8 @@
 '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 })=>{
@@ -16,9 +16,10 @@ export const LogoutButton = ({ disabled, endpointSlug })=>{
         if (port) {
             redirectToSet += `:${port}`;
         }
-        redirectToSet += getAdminPath(config);
-        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-        setRedirect(redirectToSet);
+        setRedirect(formatAdminURL({
+            adminRoute: config.routes.admin,
+            serverURL: redirectToSet
+        }));
     }, [
         config
     ]);

package/dist/oauth/defaults.js

@@ -1,5 +1,19 @@
+import { parseCookies } from 'payload';
 import { v4 as uuid } from 'uuid';
 import { hasUserTokenPropsChanged } from './utilities/hasUserTokenPropsChanged.js';
+import { isDuplicateKeyError } from './utilities/isDuplicateKeyError.js';
+function getFigmaUserInfo(headers) {
+    try {
+        const cookies = parseCookies(headers);
+        const encoded = cookies.get('figma-user-info');
+        if (!encoded) {
+            return null;
+        }
+        return JSON.parse(Buffer.from(encoded, 'base64').toString('utf-8'));
+    } catch  {
+        return null;
+    }
+}
 export const defaultScope = [
     'openid',
     'profile',
@@ -14,7 +28,7 @@ export const defaultUsernameField = {
     },
     unique: true
 };
-export const defaultVerify = ({ collection, strategyName, usernameField })=>async ({ payload, token })=>{
+export const defaultVerify = ({ collection, strategyName, usernameField })=>async ({ headers, payload, token })=>{
         let tokenUsername = 'preferred_username';
         if (usernameField.name !== 'preferredUsername') {
             tokenUsername = usernameField.name;
@@ -24,6 +38,13 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
                 user: null
             };
         }
+        const figmaUserInfo = getFigmaUserInfo(headers);
+        let responseHeaders;
+        // Clear the cookie after reading
+        if (figmaUserInfo) {
+            responseHeaders = new Headers();
+            responseHeaders.append('Set-Cookie', 'figma-user-info=; Max-Age=0; Path=/;');
+        }
         let user = null;
         const depth = typeof collection.auth === 'object' ? collection.auth.depth : undefined;
         try {
@@ -40,13 +61,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 +82,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 +126,7 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
                 msg: 'Error verifying user from defaultVerify.'
             });
             return {
+                responseHeaders,
                 user: null
             };
         }
@@ -80,10 +135,12 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
             user._strategy = strategyName;
             user.exp = token.exp;
             return {
+                responseHeaders,
                 user
             };
         }
         return {
+            responseHeaders,
             user: null
         };
     };

package/dist/oauth/endpoints/getLoginEndpoint.js

@@ -1,16 +1,15 @@
 import { APIError, generateCookie, parseCookies } from 'payload';
-import { getSafeRedirect } from 'payload/shared';
-import { getProjectToken } from '../../api/figma-api.js';
+import { formatAdminURL, getSafeRedirect } from 'payload/shared';
+import { getProjectToken, getUserInfo } from '../../api/figma-api.js';
 import { createCookieOptions } from '../utilities/createCookieOptions.js';
 import { createDebugLogger } from '../utilities/createDebugLogger.js';
 import { extractOrigin } from '../utilities/extractOrigin.js';
-import { getAdminPath } from '../utilities/getAdminPath.js';
 import { getCookieExpiration } from '../utilities/getCookieExpiration.js';
 const isAbsoluteURL = (url)=>/^[a-z][a-z\d+.-]*:/.test(url);
 export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug, pluginOptions, strategy })=>({
         handler: async (req)=>{
             const { config } = req.payload;
-            const adminPath = getAdminPath(config);
+            const adminRoute = config.routes?.admin || '/admin';
             try {
                 await strategy.ensureMeta();
                 const path = req.pathname;
@@ -37,9 +36,16 @@ export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug,
                 }
                 const stateRaw = jsonBody.state;
                 const state = JSON.parse(Buffer.from(stateRaw, 'base64').toString('utf-8'));
-                const redirectDestination = state.serverURL || pluginOptions.redirectServerURL || config.serverURL;
-                let failedRedirect = `${redirectDestination}${adminPath}/login`;
-                let redirectToUse = `${redirectDestination}${adminPath}`;
+                const redirectServerURL = state.serverURL || pluginOptions.redirectServerURL || config.serverURL;
+                let failedRedirect = formatAdminURL({
+                    adminRoute,
+                    path: '/login',
+                    serverURL: redirectServerURL
+                });
+                let redirectToUse = formatAdminURL({
+                    adminRoute,
+                    serverURL: redirectServerURL
+                });
                 if (state.redirect) {
                     redirectToUse = state.redirect;
                 }
@@ -126,16 +132,20 @@ export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug,
                     code,
                     code_verifier: req.payload.decrypt(state.verifier),
                     grant_type: 'authorization_code',
-                    redirect_uri: `${redirectDestination}${config?.routes?.api || '/api'}/${collection.slug}/${endpointSlug}/login`
+                    redirect_uri: formatAdminURL({
+                        apiRoute: config.routes?.api || '/api',
+                        path: `/${collection.slug}/${endpointSlug}/login`,
+                        serverURL: redirectServerURL
+                    })
                 };
+                if (strategy.collectionOptions.clientSecret) {
+                    body.client_secret = strategy.collectionOptions.clientSecret;
+                }
                 debugLogger.info({
                     msg: 'Exchanging code for access token',
                     path,
                     requestBody: body
                 });
-                if (strategy.clientSecret) {
-                    body.client_secret = strategy.clientSecret;
-                }
                 const tokenRes = await fetch(strategy.meta?.token_endpoint, {
                     body: new URLSearchParams(body),
                     headers: {
@@ -149,12 +159,48 @@ export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug,
                     tokenRes
                 });
                 const { access_token, error, error_description, expires_in: refreshTokenExpires } = tokenRes;
-                debugLogger.info({
-                    msg: 'tokenResss',
-                    tokenRes
-                });
+                if (error) {
+                    req.payload.logger.error('Error swapping access code with access token:');
+                    req.payload.logger.error({
+                        err: error,
+                        error_description
+                    });
+                    return Response.redirect(failedRedirect);
+                }
+                // Fetch Figma user info for handle and profile image
+                let figmaUserInfo = null;
+                try {
+                    const oauthCredential = {
+                        type: 'oauth',
+                        token: access_token
+                    };
+                    figmaUserInfo = await getUserInfo(oauthCredential);
+                    debugLogger.info({
+                        figmaUserInfo,
+                        msg: 'Fetched Figma user info'
+                    });
+                } catch (err) {
+                    // Non-fatal: user will just not have handle/image
+                    debugLogger.error({
+                        err,
+                        msg: 'Failed to fetch Figma user info'
+                    });
+                }
+                if (!access_token) {
+                    const errMsg = 'No access_token was returned from the identity provider.';
+                    req.payload.logger.error({
+                        msg: errMsg,
+                        path,
+                        tokenRes
+                    });
+                    throw new APIError(errMsg);
+                }
                 // Swap for project token
-                const project_token = await getProjectToken(tokenRes.access_token, 'someproject');
+                const oauthCredential = {
+                    type: 'oauth',
+                    token: access_token
+                };
+                const project_token = await getProjectToken(oauthCredential, config.custom.figma.contentSystemId);
                 const refresh_token = access_token;
                 // Store project token as access_token
                 const token = project_token.token;
@@ -172,14 +218,6 @@ export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug,
                     headers: req.headers,
                     pluginOptions
                 });
-                if (error) {
-                    req.payload.logger.error('Error swapping access code with access token:');
-                    req.payload.logger.error({
-                        err: error,
-                        error_description
-                    });
-                    return Response.redirect(failedRedirect);
-                }
                 // get the payloadRedirect cookie value
                 const cookies = parseCookies(req.headers);
                 const payloadRedirect = 'payloadRedirect' in cookies ? cookies.payloadRedirect : '';
@@ -216,6 +254,21 @@ export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug,
                     value: token
                 });
                 req.responseHeaders.append('Set-Cookie', tokenCookie);
+                // Store user info in short-lived cookie for defaultVerify to consume
+                if (figmaUserInfo) {
+                    const userInfoValue = Buffer.from(JSON.stringify({
+                        handle: figmaUserInfo.handle,
+                        img_url: figmaUserInfo.img_url
+                    })).toString('base64');
+                    const userInfoCookie = generateCookie({
+                        ...cookieOptions,
+                        name: 'figma-user-info',
+                        expires: new Date(Date.now() + 60_000),
+                        returnCookieAsObject: false,
+                        value: userInfoValue
+                    });
+                    req.responseHeaders.append('Set-Cookie', userInfoCookie);
+                }
                 return Response.redirect(redirectToUse);
             } catch (err) {
                 req.payload.logger.error({

package/dist/oauth/endpoints/getLogoutEndpoint.js

@@ -1,9 +1,9 @@
 import jwt from 'jsonwebtoken';
 import { parseCookies } from 'payload';
+import { formatAdminURL } from 'payload/shared';
 import { clearCookie } from '../utilities/clearCookie.js';
 import { createCookieOptions } from '../utilities/createCookieOptions.js';
 import { createDebugLogger } from '../utilities/createDebugLogger.js';
-import { getAdminPath } from '../utilities/getAdminPath.js';
 export const getLogoutEndpoint = ({ collection, endpointSlug, pluginOptions, strategy })=>({
         handler: async (req)=>{
             const debugLogger = createDebugLogger(req.payload, pluginOptions.debug);
@@ -23,12 +23,15 @@ export const getLogoutEndpoint = ({ collection, endpointSlug, pluginOptions, str
             }
             try {
                 await strategy.ensureMeta();
-                const baseRedirectDestination = pluginOptions.redirectServerURL || config.serverURL;
-                let successfulLogoutRedirectDest = `${baseRedirectDestination}${getAdminPath(config)}`;
+                const redirectServerlURL = pluginOptions.redirectServerURL || config.serverURL;
+                let successfulLogoutRedirectDest = formatAdminURL({
+                    adminRoute: config.routes?.admin || '/admin',
+                    serverURL: redirectServerlURL
+                });
                 if (typeof req.query.redirect === 'string') {
                     successfulLogoutRedirectDest = req.query.redirect;
                 }
-                if (!baseRedirectDestination && !req.query.redirect) {
+                if (!redirectServerlURL && !req.query.redirect) {
                     debugLogger.error({
                         msg: 'No redirect URL provided',
                         path: req.pathname

package/dist/oauth/index.js

@@ -1,3 +1,4 @@
+import { fieldAffectsData } from 'payload/shared';
 import { defaultVerify } from './defaults.js';
 import { getLoginEndpoint } from './endpoints/getLoginEndpoint.js';
 import { getLogoutEndpoint } from './endpoints/getLogoutEndpoint.js';
@@ -84,23 +85,46 @@ export const oAuth2Plugin = (pluginOptions)=>(config)=>{
                 if (collectionOptions.usePayloadJWT) {
                     cookieName = `${config.cookiePrefix || 'payload'}-token`;
                 }
-                const usernameField = getUsernameField({
-                    collection: existingCollection,
-                    collectionOptions
-                });
                 // Check if email field exists, if not add it
                 const hasEmailField = existingCollection.fields.some((field)=>'name' in field && field.name === 'email');
-                const fields = [
-                    ...existingCollection.fields,
-                    ...typeof adminCollectionOptions.usernameField === 'string' ? [] : [
-                        usernameField
-                    ],
-                    ...!hasEmailField ? [
+                // Add email field to collection before getting username field
+                // This ensures getUsernameField can find the email field if it's configured as the username
+                const collectionWithEmail = hasEmailField ? existingCollection : {
+                    ...existingCollection,
+                    fields: [
+                        ...existingCollection.fields,
                         {
                             name: 'email',
-                            type: 'email'
+                            type: 'email',
+                            admin: {
+                                description: 'Managed by Figma',
+                                readOnly: true
+                            },
+                            unique: true
                         }
-                    ] : []
+                    ]
+                };
+                const usernameField = getUsernameField({
+                    collection: collectionWithEmail,
+                    collectionOptions
+                });
+                // Make username field readOnly (and add description for email fields)
+                const readOnlyUsernameField = {
+                    ...usernameField,
+                    admin: {
+                        ...usernameField.admin || {},
+                        ...usernameField.name === 'email' ? {
+                            description: 'Managed by Figma'
+                        } : {},
+                        readOnly: true
+                    }
+                };
+                const isUsernameFieldString = typeof adminCollectionOptions.usernameField === 'string';
+                const fields = [
+                    ...collectionWithEmail.fields.map((field)=>fieldAffectsData(field) && field.name === usernameField.name ? readOnlyUsernameField : field),
+                    ...isUsernameFieldString ? [] : [
+                        readOnlyUsernameField
+                    ]
                 ];
                 if (disabled) {
                     return {
@@ -110,7 +134,6 @@ export const oAuth2Plugin = (pluginOptions)=>(config)=>{
                 }
                 const strategy = new Strategy({
                     clientID: collectionOptions.clientID,
-                    clientSecret: collectionOptions.clientSecret,
                     collection: existingCollection,
                     collectionOptions,
                     cookieName,
@@ -142,6 +165,10 @@ export const oAuth2Plugin = (pluginOptions)=>(config)=>{
                 }
                 return {
                     ...existingCollection,
+                    access: {
+                        ...existingCollection.access || {},
+                        create: ()=>false
+                    },
                     auth: {
                         ...typeof existingCollection.auth === 'object' ? existingCollection.auth : {},
                         disableLocalStrategy,

package/dist/oauth/strategy/index.d.ts

@@ -4,7 +4,6 @@ import * as jose from 'jose';
 import type { CollectionOptions, PluginOptions, VerifyFunction } from '../types.js';
 export interface Options {
     clientID: string;
-    clientSecret?: string;
     collection: CollectionConfig;
     collectionOptions: CollectionOptions;
     cookieName: string;
@@ -16,7 +15,6 @@ export interface Options {
 }
 export declare class Strategy {
     clientID: string;
-    clientSecret?: string;
     collection: CollectionConfig;
     collectionOptions: CollectionOptions;
     cookieName: string;