payload-subscribers-plugin 0.0.8 → 0.0.10

package/dist/components/app/Unsubscribe.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useSearchParams } from 'next/navigation.js';
+import { useEffect } from 'react';
+import { useUnsubscribe } from '../../hooks/useUnsubscribe.js';
+import { mergeClassNames } from './helpers.js';
+import styles from './shared.module.css';
+/**
+ * Handles the unsubscribe action, for use with unsubscribe URLs in emails, etc.
+ * Uses URL params email and hash to call POST /api/unsubscribe. Displays children after attempt.
+ *
+ * @param props - Component props (see IUnsubscribe)
+ * @param props.children - Optional React nodes rendered after unsubscribe is attempted
+ * @param props.classNames - Optional class overrides for the component elements
+ * @param props.handleUnsubscribe - Callback when unsubscribe is attempted (success or error)
+ * @returns Loading status, result message, and children
+ */ export const Unsubscribe = ({ children, classNames = {
+    button: '',
+    container: '',
+    emailInput: '',
+    error: '',
+    form: '',
+    loading: '',
+    message: ''
+}, handleUnsubscribe })=>{
+    const { isError, isLoading, result, unsubscribe } = useUnsubscribe({
+        handleUnsubscribe
+    });
+    const searchParams = useSearchParams();
+    const email = searchParams.get('email');
+    const hash = searchParams.get('hash');
+    useEffect(()=>{
+        async function callUnsubscribe() {
+            if (email && hash) {
+                await unsubscribe({
+                    email,
+                    hash
+                });
+            }
+        }
+        void callUnsubscribe();
+    }, [
+        email,
+        hash,
+        unsubscribe
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: mergeClassNames([
+            'subscribers-callUnsubscribe subscribers-container',
+            styles.container,
+            classNames.container
+        ]),
+        children: [
+            isLoading && /*#__PURE__*/ _jsx("p", {
+                className: mergeClassNames([
+                    'subscribers-loading',
+                    styles.loading,
+                    classNames.loading
+                ]),
+                children: "unsubscribing..."
+            }),
+            !isLoading && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        className: mergeClassNames([
+                            'subscribers-message',
+                            styles.message,
+                            classNames.message,
+                            isError ? [
+                                'subscribers-error',
+                                styles.error,
+                                classNames.error
+                            ] : []
+                        ]),
+                        children: result
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: mergeClassNames([
+                            'subscribers-form',
+                            styles.form,
+                            classNames.form
+                        ]),
+                        children: children
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=Unsubscribe.js.map

package/dist/components/app/Unsubscribe.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/app/Unsubscribe.tsx"],"sourcesContent":["'use client'\n\nimport { useSearchParams } from 'next/navigation.js'\nimport { useEffect } from 'react'\n\nimport type { UnsubscribeResponse } from '../../endpoints/unsubscribe.js'\n\nexport { UnsubscribeResponse }\nimport { useSubscriber } from '../../exports/ui.js'\nimport { useUnsubscribe } from '../../hooks/useUnsubscribe.js'\nimport { mergeClassNames } from './helpers.js'\nimport styles from './shared.module.css'\n\n// const payload = await getPayload({\n//   config: configPromise,\n// })\n\n/**\n * Props for the Unsubscribe component.\n *\n * @property children - Optional React nodes rendered after unsubscribe is attempted\n * @property classNames - Optional CSS class overrides for the component elements\n * @property handleUnsubscribe - Callback when unsubscribe is attempted (success or error)\n */\nexport interface IUnsubscribe {\n  children?: React.ReactNode\n  classNames?: UnsubscribeClasses\n  handleUnsubscribe?: (result: UnsubscribeResponse) => void\n}\n\n/**\n * Optional CSS class overrides for Unsubscribe elements.\n *\n * @property button - Class for buttons\n * @property container - Class for the main container\n * @property emailInput - Class for the email input field\n * @property error - Class for error messages\n * @property form - Class for the form\n * @property loading - Class for loading state\n * @property message - Class for result message text\n */\nexport type UnsubscribeClasses = {\n  button?: string\n  container?: string\n  emailInput?: string\n  error?: string\n  form?: string\n  loading?: string\n  message?: string\n}\n\n/**\n * Handles the unsubscribe action, for use with unsubscribe URLs in emails, etc.\n * Uses URL params email and hash to call POST /api/unsubscribe. Displays children after attempt.\n *\n * @param props - Component props (see IUnsubscribe)\n * @param props.children - Optional React nodes rendered after unsubscribe is attempted\n * @param props.classNames - Optional class overrides for the component elements\n * @param props.handleUnsubscribe - Callback when unsubscribe is attempted (success or error)\n * @returns Loading status, result message, and children\n */\nexport const Unsubscribe = ({\n  children,\n  classNames = {\n    button: '',\n    container: '',\n    emailInput: '',\n    error: '',\n    form: '',\n    loading: '',\n    message: '',\n  },\n  handleUnsubscribe,\n}: IUnsubscribe) => {\n  const { isError, isLoading, result, unsubscribe } = useUnsubscribe({ handleUnsubscribe })\n\n  const searchParams = useSearchParams()\n  const email = searchParams.get('email')\n  const hash = searchParams.get('hash')\n\n  useEffect(() => {\n    async function callUnsubscribe() {\n      if (email && hash) {\n        await unsubscribe({ email, hash })\n      }\n    }\n    void callUnsubscribe()\n  }, [email, hash, unsubscribe])\n\n  return (\n    <div\n      className={mergeClassNames([\n        'subscribers-callUnsubscribe subscribers-container',\n        styles.container,\n        classNames.container,\n      ])}\n    >\n      {isLoading && (\n        <p className={mergeClassNames(['subscribers-loading', styles.loading, classNames.loading])}>\n          unsubscribing...\n        </p>\n      )}\n      {!isLoading && (\n        <>\n          <p\n            className={mergeClassNames([\n              'subscribers-message',\n              styles.message,\n              classNames.message,\n              isError ? ['subscribers-error', styles.error, classNames.error] : [],\n            ])}\n          >\n            {result}\n          </p>\n          <div className={mergeClassNames(['subscribers-form', styles.form, classNames.form])}>\n            {children}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],"names":["useSearchParams","useEffect","useUnsubscribe","mergeClassNames","styles","Unsubscribe","children","classNames","button","container","emailInput","error","form","loading","message","handleUnsubscribe","isError","isLoading","result","unsubscribe","searchParams","email","get","hash","callUnsubscribe","div","className","p"],"mappings":"AAAA;;AAEA,SAASA,eAAe,QAAQ,qBAAoB;AACpD,SAASC,SAAS,QAAQ,QAAO;AAMjC,SAASC,cAAc,QAAQ,gCAA+B;AAC9D,SAASC,eAAe,QAAQ,eAAc;AAC9C,OAAOC,YAAY,sBAAqB;AAwCxC;;;;;;;;;CASC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,QAAQ,EACRC,aAAa;IACXC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,SAAS;AACX,CAAC,EACDC,iBAAiB,EACJ;IACb,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,MAAM,EAAEC,WAAW,EAAE,GAAGjB,eAAe;QAAEa;IAAkB;IAEvF,MAAMK,eAAepB;IACrB,MAAMqB,QAAQD,aAAaE,GAAG,CAAC;IAC/B,MAAMC,OAAOH,aAAaE,GAAG,CAAC;IAE9BrB,UAAU;QACR,eAAeuB;YACb,IAAIH,SAASE,MAAM;gBACjB,MAAMJ,YAAY;oBAAEE;oBAAOE;gBAAK;YAClC;QACF;QACA,KAAKC;IACP,GAAG;QAACH;QAAOE;QAAMJ;KAAY;IAE7B,qBACE,MAACM;QACCC,WAAWvB,gBAAgB;YACzB;YACAC,OAAOK,SAAS;YAChBF,WAAWE,SAAS;SACrB;;YAEAQ,2BACC,KAACU;gBAAED,WAAWvB,gBAAgB;oBAAC;oBAAuBC,OAAOS,OAAO;oBAAEN,WAAWM,OAAO;iBAAC;0BAAG;;YAI7F,CAACI,2BACA;;kCACE,KAACU;wBACCD,WAAWvB,gBAAgB;4BACzB;4BACAC,OAAOU,OAAO;4BACdP,WAAWO,OAAO;4BAClBE,UAAU;gCAAC;gCAAqBZ,OAAOO,KAAK;gCAAEJ,WAAWI,KAAK;6BAAC,GAAG,EAAE;yBACrE;kCAEAO;;kCAEH,KAACO;wBAAIC,WAAWvB,gBAAgB;4BAAC;4BAAoBC,OAAOQ,IAAI;4BAAEL,WAAWK,IAAI;yBAAC;kCAC/EN;;;;;;AAMb,EAAC"}

package/dist/components/app/VerifyMagicLink.d.ts

@@ -1,20 +1,33 @@
-import type { RequestMagicLinkResponse } from '../..//endpoints/requestMagicLink.js';
+import type { RequestMagicLinkResponse } from '../../endpoints/requestMagicLink.js';
 import type { VerifyMagicLinkResponse } from '../../endpoints/verifyMagicLink.js';
 export { VerifyMagicLinkResponse };
-/** Props for the VerifyMagicLink component. */
+/**
+ * Props for the VerifyMagicLink component.
+ *
+ * @property children - Optional React nodes rendered after the verify action (e.g. when error)
+ * @property classNames - Optional CSS class overrides for the component elements
+ * @property handleMagicLinkRequested - Callback when a new magic link is requested
+ * @property handleMagicLinkVerified - Callback when the magic link is verified
+ * @property verifyData - Optional data for verification (e.g. email/token from URL)
+ */
 export interface IVerifyMagicLink {
     children?: React.ReactNode;
     classNames?: VerifyMagicLinkClasses;
     handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void;
-    handleMagicLinkVerified?: (result: VerifyMagicLinkResponse) => void;
-    renderButton?: (props: {
-        name?: string;
-        onClick?: () => any;
-        text?: string;
-    }) => React.ReactNode;
-    verifyUrl?: string | URL;
+    handleMagicLinkVerified?: (result: string) => void;
+    verifyData?: string;
 }
-/** Optional CSS class overrides for VerifyMagicLink elements. */
+/**
+ * Optional CSS class overrides for VerifyMagicLink elements.
+ *
+ * @property button - Class for buttons
+ * @property container - Class for the main container
+ * @property emailInput - Class for the email input field
+ * @property error - Class for error messages
+ * @property form - Class for the form
+ * @property loading - Class for loading state
+ * @property message - Class for result message text
+ */
 export type VerifyMagicLinkClasses = {
     button?: string;
     container?: string;
@@ -27,9 +40,14 @@ export type VerifyMagicLinkClasses = {
 /**
  * Handles the verify step of magic-link flow. When URL has email and token query params, calls
  * POST /api/verifyToken to verify and log in; otherwise shows RequestMagicLink. Supports
- * "Request another magic link" via renderButton and optional callbacks.
+ * "Request another magic link" and optional callbacks.
  *
- * @param props - See IVerifyMagicLink
- * @returns RequestMagicLink when no token/email; otherwise verifying state, result message, and optional button/children
+ * @param props - Component props (see IVerifyMagicLink)
+ * @param props.children - Optional React nodes rendered after the verify action (e.g. when error)
+ * @param props.classNames - Optional class overrides for the component elements
+ * @param props.handleMagicLinkRequested - Callback when a new magic link is requested
+ * @param props.handleMagicLinkVerified - Callback when the magic link is verified
+ * @param props.verifyData - Optional data for verification (e.g. email/token from URL)
+ * @returns Loading status, error/result message, and children. Shows RequestMagicLink when no token/email.
  */
-export declare const VerifyMagicLink: ({ children, classNames, handleMagicLinkRequested, handleMagicLinkVerified, renderButton, verifyUrl, }: IVerifyMagicLink) => import("react").JSX.Element;
+export declare const VerifyMagicLink: ({ children, classNames, handleMagicLinkRequested, handleMagicLinkVerified, verifyData, }: IVerifyMagicLink) => import("react").JSX.Element;

package/dist/components/app/VerifyMagicLink.js

@@ -1,19 +1,24 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { PayloadSDK } from '@payloadcms/sdk';
 import { useSearchParams } from 'next/navigation.js';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { RequestMagicLink, useSubscriber } from '../../exports/ui.js';
-import { useServerUrl } from '../../react-hooks/useServerUrl.js';
+import { useRequestMagicLink } from '../../hooks/useRequestMagicLink.js';
+import { useVerifyMagicLink } from '../../hooks/useVerifyMagicLink.js';
 import { mergeClassNames } from './helpers.js';
 import styles from './shared.module.css';
 /**
  * Handles the verify step of magic-link flow. When URL has email and token query params, calls
  * POST /api/verifyToken to verify and log in; otherwise shows RequestMagicLink. Supports
- * "Request another magic link" via renderButton and optional callbacks.
+ * "Request another magic link" and optional callbacks.
  *
- * @param props - See IVerifyMagicLink
- * @returns RequestMagicLink when no token/email; otherwise verifying state, result message, and optional button/children
+ * @param props - Component props (see IVerifyMagicLink)
+ * @param props.children - Optional React nodes rendered after the verify action (e.g. when error)
+ * @param props.classNames - Optional class overrides for the component elements
+ * @param props.handleMagicLinkRequested - Callback when a new magic link is requested
+ * @param props.handleMagicLinkVerified - Callback when the magic link is verified
+ * @param props.verifyData - Optional data for verification (e.g. email/token from URL)
+ * @returns Loading status, error/result message, and children. Shows RequestMagicLink when no token/email.
  */ export const VerifyMagicLink = ({ children, classNames = {
     button: '',
     container: '',
@@ -22,122 +27,57 @@ import styles from './shared.module.css';
     form: '',
     loading: '',
     message: ''
-}, handleMagicLinkRequested, handleMagicLinkVerified, renderButton = ({ name, onClick, text })=>/*#__PURE__*/ _jsx("button", {
-        className: mergeClassNames([
-            'subscribers-button',
-            styles.button,
-            classNames.button
-        ]),
-        name: name,
-        onClick: onClick,
-        type: "button",
-        children: text
-    }), verifyUrl })=>{
-    if (typeof verifyUrl == 'string') {
-        verifyUrl = new URL(verifyUrl);
-    }
-    const { serverURL } = useServerUrl();
-    const { // refreshSubscriber,
-    subscriber } = useSubscriber();
+}, handleMagicLinkRequested, handleMagicLinkVerified, verifyData })=>{
     const searchParams = useSearchParams();
     const email = searchParams.get('email');
     const token = searchParams.get('token');
-    const [result, setResult] = useState();
-    const [isError, setIsError] = useState(false);
-    // const [email, setEmail] = useState('')
-    const { refreshSubscriber } = useSubscriber();
-    const callVerify = useCallback(async ()=>{
-        if (!email || !token) {
-            console.info('Invalid input');
-            return {
-                error: 'Invalid input'
-            };
+    const { subscriber } = useSubscriber();
+    const { isError: verifyIsError, isLoading: verifyIsLoading, result: verifyResult, verify } = useVerifyMagicLink();
+    useEffect(()=>{
+        async function asyncVerify() {
+            await verify();
         }
-        try {
-            // I tried using PayloadSDK.request, but when the endpoint
-            // returns a not-okay status, PayloadSDK.request returns its
-            // own "Bad request" error, and doesn't share the endpoint
-            // result data.
-            const verifyEndpointResult = await fetch(serverURL + '/api/verifyToken', {
-                body: JSON.stringify({
-                    email,
-                    token
-                }),
-                method: 'POST'
-            });
-            // return verifyEndpointResult
-            if (verifyEndpointResult && verifyEndpointResult.json) {
-                console.log(1);
-                const resultJson = await verifyEndpointResult.json();
-                return {
-                    error: resultJson.error,
-                    message: resultJson.message
-                };
-            } else if (verifyEndpointResult && verifyEndpointResult.text) {
-                console.log(2);
-                const resultText = await verifyEndpointResult.text();
-                return {
-                    error: resultText
-                };
-            } else {
-                console.log(3);
-                return {
-                    error: verifyEndpointResult.status
-                };
-            }
-        } catch (error) {
-            console.log('catch');
-            return {
-                error
-            };
+        if (!subscriber) {
+            void asyncVerify();
+        } else {
+            setIsError(false);
+            setResult('Already logged in');
         }
     }, [
-        email,
-        serverURL,
-        token
+        subscriber,
+        verify
     ]);
     useEffect(()=>{
-        async function verify() {
-            const { error, message } = await callVerify();
-            setResult(message || `An error occured. Please try again. (${error})`);
-            setIsError(error && !message);
-        // console.info('callVerify not okay', { error, message })
-        }
-        if (!subscriber) {
-            void verify();
+        setResult(verifyResult);
+        setIsError(verifyIsError);
+        setIsLoading(verifyIsLoading);
+        if (!verifyIsError && handleMagicLinkVerified) {
+            handleMagicLinkVerified(verifyResult);
         }
     }, [
-        callVerify,
-        serverURL,
-        email,
         handleMagicLinkVerified,
-        refreshSubscriber,
-        subscriber,
-        token
+        verifyResult,
+        verifyIsError,
+        verifyIsLoading
     ]);
-    const handleRequestAnother = async ()=>{
-        const sdk = new PayloadSDK({
-            baseURL: serverURL || ''
-        });
-        const emailResult = await sdk.request({
-            json: {
-                email,
-                verifyUrl: verifyUrl?.href
-            },
-            method: 'POST',
-            path: '/api/emailToken'
-        });
-        if (emailResult.ok) {
-            const resultJson = await emailResult.json();
-            setResult('An email has been sent containing your magic link.');
-            setIsError(false);
-            if (handleMagicLinkRequested) {
-                handleMagicLinkRequested(resultJson);
-            }
-        } else {
-            // const resultText = await emailResult.text()
-            setResult('An error occured. Please try again.');
-            setIsError(true);
+    const [result, setResult] = useState();
+    const [isError, setIsError] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const { result: requestResult, sendMagicLink, status: requestStatus } = useRequestMagicLink({
+        handleMagicLinkRequested,
+        verifyData
+    });
+    useEffect(()=>{
+        setIsError(requestStatus == 'error');
+        setResult(requestResult);
+        setIsLoading(false);
+    }, [
+        requestResult,
+        requestStatus
+    ]);
+    const handleRequestAnother = ()=>{
+        if (email) {
+            void sendMagicLink(email);
         }
     };
     return /*#__PURE__*/ _jsxs(_Fragment, {
@@ -152,7 +92,7 @@ import styles from './shared.module.css';
                     classNames.container
                 ]),
                 children: [
-                    !result && /*#__PURE__*/ _jsx("p", {
+                    isLoading && /*#__PURE__*/ _jsx("p", {
                         className: mergeClassNames([
                             'subscribers-loading',
                             styles.loading,
@@ -160,7 +100,7 @@ import styles from './shared.module.css';
                         ]),
                         children: "verifying..."
                     }),
-                    result && /*#__PURE__*/ _jsx("p", {
+                    !isLoading && result && /*#__PURE__*/ _jsx("p", {
                         className: mergeClassNames([
                             'subscribers-message',
                             styles.message,
@@ -180,10 +120,16 @@ import styles from './shared.module.css';
                             classNames.form
                         ]),
                         children: [
-                            result && isError && renderButton && renderButton({
+                            result && isError && /*#__PURE__*/ _jsx("button", {
+                                className: mergeClassNames([
+                                    'subscribers-button',
+                                    styles.button,
+                                    classNames.button
+                                ]),
                                 name: 'request',
                                 onClick: handleRequestAnother,
-                                text: 'Request another magic link'
+                                type: "button",
+                                children: 'Request another magic link'
                             }),
                             result && children
                         ]

package/dist/components/app/VerifyMagicLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/app/VerifyMagicLink.tsx"],"sourcesContent":["'use client'\n\nimport { PayloadSDK } from '@payloadcms/sdk'\nimport { useSearchParams } from 'next/navigation.js'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport type { RequestMagicLinkResponse } from '../..//endpoints/requestMagicLink.js'\nimport type { Config } from '../../copied/payload-types.js'\nimport type { VerifyMagicLinkResponse } from '../../endpoints/verifyMagicLink.js'\n\nexport { VerifyMagicLinkResponse }\nimport { RequestMagicLink, useSubscriber } from '../../exports/ui.js'\nimport { useServerUrl } from '../../react-hooks/useServerUrl.js'\nimport { mergeClassNames } from './helpers.js'\nimport styles from './shared.module.css'\n\n// const payload = await getPayload({\n//   config: configPromise,\n// })\n\n/** Props for the VerifyMagicLink component. */\nexport interface IVerifyMagicLink {\n  children?: React.ReactNode\n  classNames?: VerifyMagicLinkClasses\n  handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void\n  handleMagicLinkVerified?: (result: VerifyMagicLinkResponse) => void\n  renderButton?: (props: { name?: string; onClick?: () => any; text?: string }) => React.ReactNode\n  verifyUrl?: string | URL\n}\n\n/** Optional CSS class overrides for VerifyMagicLink elements. */\nexport type VerifyMagicLinkClasses = {\n  button?: string\n  container?: string\n  emailInput?: string\n  error?: string\n  form?: string\n  loading?: string\n  message?: string\n}\n\n/**\n * Handles the verify step of magic-link flow. When URL has email and token query params, calls\n * POST /api/verifyToken to verify and log in; otherwise shows RequestMagicLink. Supports\n * \"Request another magic link\" via renderButton and optional callbacks.\n *\n * @param props - See IVerifyMagicLink\n * @returns RequestMagicLink when no token/email; otherwise verifying state, result message, and optional button/children\n */\nexport const VerifyMagicLink = ({\n  children,\n  classNames = {\n    button: '',\n    container: '',\n    emailInput: '',\n    error: '',\n    form: '',\n    loading: '',\n    message: '',\n  },\n  handleMagicLinkRequested,\n  handleMagicLinkVerified,\n  renderButton = ({ name, onClick, text }) => (\n    <button\n      className={mergeClassNames(['subscribers-button', styles.button, classNames.button])}\n      name={name}\n      onClick={onClick}\n      type=\"button\"\n    >\n      {text}\n    </button>\n  ),\n  verifyUrl,\n}: IVerifyMagicLink) => {\n  if (typeof verifyUrl == 'string') {\n    verifyUrl = new URL(verifyUrl)\n  }\n  const { serverURL } = useServerUrl()\n  const {\n    // refreshSubscriber,\n    subscriber,\n  } = useSubscriber()\n\n  const searchParams = useSearchParams()\n  const email = searchParams.get('email')\n  const token = searchParams.get('token')\n\n  const [result, setResult] = useState<string>()\n  const [isError, setIsError] = useState<boolean>(false)\n  // const [email, setEmail] = useState('')\n\n  const { refreshSubscriber } = useSubscriber()\n\n  const callVerify = useCallback(async () => {\n    if (!email || !token) {\n      console.info('Invalid input')\n      return { error: 'Invalid input' }\n    }\n    try {\n      // I tried using PayloadSDK.request, but when the endpoint\n      // returns a not-okay status, PayloadSDK.request returns its\n      // own \"Bad request\" error, and doesn't share the endpoint\n      // result data.\n      const verifyEndpointResult = await fetch(serverURL + '/api/verifyToken', {\n        body: JSON.stringify({\n          email,\n          token,\n        }),\n        method: 'POST',\n      })\n\n      // return verifyEndpointResult\n      if (verifyEndpointResult && verifyEndpointResult.json) {\n        console.log(1)\n        const resultJson = await verifyEndpointResult.json()\n        return { error: resultJson.error, message: resultJson.message }\n      } else if (verifyEndpointResult && verifyEndpointResult.text) {\n        console.log(2)\n        const resultText = await verifyEndpointResult.text()\n        return { error: resultText }\n      } else {\n        console.log(3)\n        return { error: verifyEndpointResult.status }\n      }\n    } catch (error: unknown) {\n      console.log('catch')\n      return { error }\n    }\n  }, [email, serverURL, token])\n\n  useEffect(() => {\n    async function verify() {\n      const { error, message } = await callVerify()\n      setResult(message || `An error occured. Please try again. (${error})`)\n      setIsError(error && !message)\n      // console.info('callVerify not okay', { error, message })\n    }\n    if (!subscriber) {\n      void verify()\n    }\n  }, [callVerify, serverURL, email, handleMagicLinkVerified, refreshSubscriber, subscriber, token])\n\n  const handleRequestAnother = async () => {\n    const sdk = new PayloadSDK<Config>({\n      baseURL: serverURL || '',\n    })\n\n    const emailResult = await sdk.request({\n      json: {\n        email,\n        verifyUrl: verifyUrl?.href,\n      },\n      method: 'POST',\n      path: '/api/emailToken',\n    })\n    if (emailResult.ok) {\n      const resultJson = await emailResult.json()\n      setResult('An email has been sent containing your magic link.')\n      setIsError(false)\n      if (handleMagicLinkRequested) {\n        handleMagicLinkRequested(resultJson)\n      }\n    } else {\n      // const resultText = await emailResult.text()\n      setResult('An error occured. Please try again.')\n      setIsError(true)\n    }\n  }\n\n  return (\n    <>\n      {(!email || !token) && <RequestMagicLink classNames={classNames} />}\n      {email && token && (\n        <div\n          className={mergeClassNames([\n            'subscribers-verify subscribers-container',\n            styles.container,\n            classNames.container,\n          ])}\n        >\n          {!result && (\n            <p\n              className={mergeClassNames([\n                'subscribers-loading',\n                styles.loading,\n                classNames.loading,\n              ])}\n            >\n              verifying...\n            </p>\n          )}\n          {result && (\n            <p\n              className={mergeClassNames([\n                'subscribers-message',\n                styles.message,\n                classNames.message,\n                isError ? ['subscribers-error', styles.error, classNames.error] : [],\n              ])}\n            >\n              {result}\n            </p>\n          )}\n          <div className={mergeClassNames(['subscribers-form', styles.form, classNames.form])}>\n            {result &&\n              isError &&\n              renderButton &&\n              renderButton({\n                name: 'request',\n                onClick: handleRequestAnother,\n                text: 'Request another magic link',\n              })}\n            {result && children}\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n"],"names":["PayloadSDK","useSearchParams","useCallback","useEffect","useState","RequestMagicLink","useSubscriber","useServerUrl","mergeClassNames","styles","VerifyMagicLink","children","classNames","button","container","emailInput","error","form","loading","message","handleMagicLinkRequested","handleMagicLinkVerified","renderButton","name","onClick","text","className","type","verifyUrl","URL","serverURL","subscriber","searchParams","email","get","token","result","setResult","isError","setIsError","refreshSubscriber","callVerify","console","info","verifyEndpointResult","fetch","body","JSON","stringify","method","json","log","resultJson","resultText","status","verify","handleRequestAnother","sdk","baseURL","emailResult","request","href","path","ok","div","p"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/app/VerifyMagicLink.tsx"],"sourcesContent":["'use client'\n\nimport { useSearchParams } from 'next/navigation.js'\nimport { useEffect, useState } from 'react'\n\nimport type { RequestMagicLinkResponse } from '../../endpoints/requestMagicLink.js'\nimport type { VerifyMagicLinkResponse } from '../../endpoints/verifyMagicLink.js'\n\nexport { VerifyMagicLinkResponse }\nimport { RequestMagicLink, useSubscriber } from '../../exports/ui.js'\nimport { useRequestMagicLink } from '../../hooks/useRequestMagicLink.js'\nimport { useVerifyMagicLink } from '../../hooks/useVerifyMagicLink.js'\nimport { mergeClassNames } from './helpers.js'\nimport styles from './shared.module.css'\n\n// const payload = await getPayload({\n//   config: configPromise,\n// })\n\n/**\n * Props for the VerifyMagicLink component.\n *\n * @property children - Optional React nodes rendered after the verify action (e.g. when error)\n * @property classNames - Optional CSS class overrides for the component elements\n * @property handleMagicLinkRequested - Callback when a new magic link is requested\n * @property handleMagicLinkVerified - Callback when the magic link is verified\n * @property verifyData - Optional data for verification (e.g. email/token from URL)\n */\nexport interface IVerifyMagicLink {\n  children?: React.ReactNode\n  classNames?: VerifyMagicLinkClasses\n  handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void\n  handleMagicLinkVerified?: (result: string) => void\n  verifyData?: string\n}\n\n/**\n * Optional CSS class overrides for VerifyMagicLink elements.\n *\n * @property button - Class for buttons\n * @property container - Class for the main container\n * @property emailInput - Class for the email input field\n * @property error - Class for error messages\n * @property form - Class for the form\n * @property loading - Class for loading state\n * @property message - Class for result message text\n */\nexport type VerifyMagicLinkClasses = {\n  button?: string\n  container?: string\n  emailInput?: string\n  error?: string\n  form?: string\n  loading?: string\n  message?: string\n}\n\n/**\n * Handles the verify step of magic-link flow. When URL has email and token query params, calls\n * POST /api/verifyToken to verify and log in; otherwise shows RequestMagicLink. Supports\n * \"Request another magic link\" and optional callbacks.\n *\n * @param props - Component props (see IVerifyMagicLink)\n * @param props.children - Optional React nodes rendered after the verify action (e.g. when error)\n * @param props.classNames - Optional class overrides for the component elements\n * @param props.handleMagicLinkRequested - Callback when a new magic link is requested\n * @param props.handleMagicLinkVerified - Callback when the magic link is verified\n * @param props.verifyData - Optional data for verification (e.g. email/token from URL)\n * @returns Loading status, error/result message, and children. Shows RequestMagicLink when no token/email.\n */\nexport const VerifyMagicLink = ({\n  children,\n  classNames = {\n    button: '',\n    container: '',\n    emailInput: '',\n    error: '',\n    form: '',\n    loading: '',\n    message: '',\n  },\n  handleMagicLinkRequested,\n  handleMagicLinkVerified,\n  verifyData,\n}: IVerifyMagicLink) => {\n  const searchParams = useSearchParams()\n  const email = searchParams.get('email')\n  const token = searchParams.get('token')\n\n  const { subscriber } = useSubscriber()\n\n  const {\n    isError: verifyIsError,\n    isLoading: verifyIsLoading,\n    result: verifyResult,\n    verify,\n  } = useVerifyMagicLink()\n\n  useEffect(() => {\n    async function asyncVerify() {\n      await verify()\n    }\n    if (!subscriber) {\n      void asyncVerify()\n    } else {\n      setIsError(false)\n      setResult('Already logged in')\n    }\n  }, [subscriber, verify])\n\n  useEffect(() => {\n    setResult(verifyResult)\n    setIsError(verifyIsError)\n    setIsLoading(verifyIsLoading)\n    if (!verifyIsError && handleMagicLinkVerified) {\n      handleMagicLinkVerified(verifyResult)\n    }\n  }, [handleMagicLinkVerified, verifyResult, verifyIsError, verifyIsLoading])\n\n  const [result, setResult] = useState<string>()\n  const [isError, setIsError] = useState<boolean>(false)\n  const [isLoading, setIsLoading] = useState<boolean>(false)\n\n  const {\n    result: requestResult,\n    sendMagicLink,\n    status: requestStatus,\n  } = useRequestMagicLink({\n    handleMagicLinkRequested,\n    verifyData,\n  })\n\n  useEffect(() => {\n    setIsError(requestStatus == 'error')\n    setResult(requestResult)\n    setIsLoading(false)\n  }, [requestResult, requestStatus])\n\n  const handleRequestAnother = () => {\n    if (email) {\n      void sendMagicLink(email)\n    }\n  }\n\n  return (\n    <>\n      {(!email || !token) && <RequestMagicLink classNames={classNames} />}\n      {email && token && (\n        <div\n          className={mergeClassNames([\n            'subscribers-verify subscribers-container',\n            styles.container,\n            classNames.container,\n          ])}\n        >\n          {isLoading && (\n            <p\n              className={mergeClassNames([\n                'subscribers-loading',\n                styles.loading,\n                classNames.loading,\n              ])}\n            >\n              verifying...\n            </p>\n          )}\n          {!isLoading && result && (\n            <p\n              className={mergeClassNames([\n                'subscribers-message',\n                styles.message,\n                classNames.message,\n                isError ? ['subscribers-error', styles.error, classNames.error] : [],\n              ])}\n            >\n              {result}\n            </p>\n          )}\n          <div className={mergeClassNames(['subscribers-form', styles.form, classNames.form])}>\n            {result && isError && (\n              <button\n                className={mergeClassNames([\n                  'subscribers-button',\n                  styles.button,\n                  classNames.button,\n                ])}\n                name={'request'}\n                onClick={handleRequestAnother}\n                type=\"button\"\n              >\n                {'Request another magic link'}\n              </button>\n            )}\n            {result && children}\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n"],"names":["useSearchParams","useEffect","useState","RequestMagicLink","useSubscriber","useRequestMagicLink","useVerifyMagicLink","mergeClassNames","styles","VerifyMagicLink","children","classNames","button","container","emailInput","error","form","loading","message","handleMagicLinkRequested","handleMagicLinkVerified","verifyData","searchParams","email","get","token","subscriber","isError","verifyIsError","isLoading","verifyIsLoading","result","verifyResult","verify","asyncVerify","setIsError","setResult","setIsLoading","requestResult","sendMagicLink","status","requestStatus","handleRequestAnother","div","className","p","name","onClick","type"],"mappings":"AAAA;;AAEA,SAASA,eAAe,QAAQ,qBAAoB;AACpD,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAM3C,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,sBAAqB;AACrE,SAASC,mBAAmB,QAAQ,qCAAoC;AACxE,SAASC,kBAAkB,QAAQ,oCAAmC;AACtE,SAASC,eAAe,QAAQ,eAAc;AAC9C,OAAOC,YAAY,sBAAqB;AA4CxC;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,aAAa;IACXC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,SAAS;AACX,CAAC,EACDC,wBAAwB,EACxBC,uBAAuB,EACvBC,UAAU,EACO;IACjB,MAAMC,eAAetB;IACrB,MAAMuB,QAAQD,aAAaE,GAAG,CAAC;IAC/B,MAAMC,QAAQH,aAAaE,GAAG,CAAC;IAE/B,MAAM,EAAEE,UAAU,EAAE,GAAGtB;IAEvB,MAAM,EACJuB,SAASC,aAAa,EACtBC,WAAWC,eAAe,EAC1BC,QAAQC,YAAY,EACpBC,MAAM,EACP,GAAG3B;IAEJL,UAAU;QACR,eAAeiC;YACb,MAAMD;QACR;QACA,IAAI,CAACP,YAAY;YACf,KAAKQ;QACP,OAAO;YACLC,WAAW;YACXC,UAAU;QACZ;IACF,GAAG;QAACV;QAAYO;KAAO;IAEvBhC,UAAU;QACRmC,UAAUJ;QACVG,WAAWP;QACXS,aAAaP;QACb,IAAI,CAACF,iBAAiBR,yBAAyB;YAC7CA,wBAAwBY;QAC1B;IACF,GAAG;QAACZ;QAAyBY;QAAcJ;QAAeE;KAAgB;IAE1E,MAAM,CAACC,QAAQK,UAAU,GAAGlC;IAC5B,MAAM,CAACyB,SAASQ,WAAW,GAAGjC,SAAkB;IAChD,MAAM,CAAC2B,WAAWQ,aAAa,GAAGnC,SAAkB;IAEpD,MAAM,EACJ6B,QAAQO,aAAa,EACrBC,aAAa,EACbC,QAAQC,aAAa,EACtB,GAAGpC,oBAAoB;QACtBc;QACAE;IACF;IAEApB,UAAU;QACRkC,WAAWM,iBAAiB;QAC5BL,UAAUE;QACVD,aAAa;IACf,GAAG;QAACC;QAAeG;KAAc;IAEjC,MAAMC,uBAAuB;QAC3B,IAAInB,OAAO;YACT,KAAKgB,cAAchB;QACrB;IACF;IAEA,qBACE;;YACI,CAAA,CAACA,SAAS,CAACE,KAAI,mBAAM,KAACtB;gBAAiBQ,YAAYA;;YACpDY,SAASE,uBACR,MAACkB;gBACCC,WAAWrC,gBAAgB;oBACzB;oBACAC,OAAOK,SAAS;oBAChBF,WAAWE,SAAS;iBACrB;;oBAEAgB,2BACC,KAACgB;wBACCD,WAAWrC,gBAAgB;4BACzB;4BACAC,OAAOS,OAAO;4BACdN,WAAWM,OAAO;yBACnB;kCACF;;oBAIF,CAACY,aAAaE,wBACb,KAACc;wBACCD,WAAWrC,gBAAgB;4BACzB;4BACAC,OAAOU,OAAO;4BACdP,WAAWO,OAAO;4BAClBS,UAAU;gCAAC;gCAAqBnB,OAAOO,KAAK;gCAAEJ,WAAWI,KAAK;6BAAC,GAAG,EAAE;yBACrE;kCAEAgB;;kCAGL,MAACY;wBAAIC,WAAWrC,gBAAgB;4BAAC;4BAAoBC,OAAOQ,IAAI;4BAAEL,WAAWK,IAAI;yBAAC;;4BAC/Ee,UAAUJ,yBACT,KAACf;gCACCgC,WAAWrC,gBAAgB;oCACzB;oCACAC,OAAOI,MAAM;oCACbD,WAAWC,MAAM;iCAClB;gCACDkC,MAAM;gCACNC,SAASL;gCACTM,MAAK;0CAEJ;;4BAGJjB,UAAUrB;;;;;;;AAMvB,EAAC"}

package/dist/contexts/SubscriberProvider.js

@@ -75,7 +75,7 @@ const SubscriberContext = /*#__PURE__*/ createContext(undefined);
         void refreshSubscriber();
     }, [
         refreshSubscriber
-    ]); // Empty dependency array for mount/unmount
+    ]);
     // Memoize the value to prevent unnecessary re-renders in consumers
     const contextValue = useMemo(()=>({
             isLoaded,

package/dist/contexts/SubscriberProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/contexts/SubscriberProvider.tsx"],"sourcesContent":["'use client'\n\nimport { PayloadSDK } from '@payloadcms/sdk'\nimport { type ReactNode, useCallback, useEffect } from 'react'\nimport { createContext, useContext, useMemo, useState } from 'react'\n\nimport type { Config, Subscriber } from '../copied/payload-types.js'\n\nimport { useServerUrl } from '../react-hooks/useServerUrl.js'\n\n/** Value provided by SubscriberProvider: current subscriber, auth state, and actions. */\nexport type SubscriberContextType = {\n  isLoaded: boolean\n  logOut: () => void\n  permissions: any\n  refreshSubscriber: () => void\n  subscriber: null | Subscriber\n}\n\nconst SubscriberContext = createContext<SubscriberContextType | undefined>(undefined)\n\n/** Props for SubscriberProvider. */\ninterface ProviderProps {\n  children?: ReactNode\n}\n\n/**\n * Provider that fetches and holds the current subscriber auth state (via POST /api/subscriberAuth).\n * Exposes subscriber, permissions, refreshSubscriber, and logOut to descendants. Must wrap any\n * component that uses useSubscriber().\n *\n * @param props.children - React tree to wrap\n * @returns SubscriberContext.Provider with current auth state and actions\n */\nexport function SubscriberProvider({ children }: ProviderProps) {\n  // eslint-disable-next-line\n  const [subscriber, setSubscriber] = useState<null | (Subscriber & { optIns: string[] })>(null)\n\n  const { serverURL } = useServerUrl()\n\n  // Keep track of if the selection content is loaded yet\n  const [isLoaded, setIsLoaded] = useState(false)\n\n  const [permissions, setPermissions] = useState<any>()\n\n  const refreshSubscriber = useCallback(async () => {\n    const initSubscriber = async () => {\n      setIsLoaded(false)\n      try {\n        const authResponse = await fetch('/api/subscriberAuth', {\n          // body: JSON.stringify({}),\n          method: 'POST',\n        })\n\n        if (authResponse.ok) {\n          // Call the server function to get the user data\n          const { permissions, subscriber } = await authResponse.json()\n          // console.log(`subscriber = `, subscriber)\n          // console.log(`permissions = `, permissions)\n          setPermissions(permissions)\n          setSubscriber(subscriber)\n        } else {\n          setPermissions(null)\n          setSubscriber(null)\n        }\n      } catch (error: unknown) {\n        console.log(`authResponse error`, error)\n      }\n      setIsLoaded(true)\n    }\n    await initSubscriber()\n  }, [serverURL])\n\n  const logOut = useCallback(async () => {\n    setIsLoaded(false)\n    try {\n      // const sdk = new PayloadSDK<Config>({\n      //   baseURL: serverURL || '',\n      // })\n      // const logoutResponse = await sdk.request({\n      //   json: {},\n      //   method: 'POST',\n      //   path: '/api/logout',\n      // })\n      // Unsure why sdk isn't working here\n      const logoutResponse = await fetch('/api/logout', {\n        method: 'POST',\n      })\n\n      // console.log(`logoutResponse`, logoutResponse)\n\n      if (logoutResponse.ok) {\n        setSubscriber(null)\n        setPermissions(null)\n      }\n    } catch (error: unknown) {\n      console.log(`logoutResponse error`, error)\n    }\n    setIsLoaded(true)\n  }, [])\n\n  useEffect(() => {\n    void refreshSubscriber()\n  }, [refreshSubscriber]) // Empty dependency array for mount/unmount\n\n  // Memoize the value to prevent unnecessary re-renders in consumers\n  const contextValue: SubscriberContextType = useMemo(\n    () => ({\n      isLoaded,\n      logOut,\n      permissions,\n      refreshSubscriber,\n      subscriber,\n    }),\n    [isLoaded, logOut, permissions, refreshSubscriber, subscriber],\n  )\n\n  return <SubscriberContext.Provider value={contextValue}>{children}</SubscriberContext.Provider>\n}\n\n/**\n * Consumes SubscriberContext. Use only inside a SubscriberProvider.\n *\n * @returns Current subscriber (or null), permissions, isLoaded, refreshSubscriber, and logOut\n * @throws Error if used outside SubscriberProvider\n */\nexport function useSubscriber() {\n  const context = useContext(SubscriberContext)\n  if (context === undefined) {\n    throw new Error('useSubscriber must be used within a SubscriberProvider')\n  }\n  return context\n}\n"],"names":["useCallback","useEffect","createContext","useContext","useMemo","useState","useServerUrl","SubscriberContext","undefined","SubscriberProvider","children","subscriber","setSubscriber","serverURL","isLoaded","setIsLoaded","permissions","setPermissions","refreshSubscriber","initSubscriber","authResponse","fetch","method","ok","json","error","console","log","logOut","logoutResponse","contextValue","Provider","value","useSubscriber","context","Error"],"mappings":"AAAA;;AAGA,SAAyBA,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAC9D,SAASC,aAAa,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAIpE,SAASC,YAAY,QAAQ,iCAAgC;AAW7D,MAAMC,kCAAoBL,cAAiDM;AAO3E;;;;;;;CAOC,GACD,OAAO,SAASC,mBAAmB,EAAEC,QAAQ,EAAiB;IAC5D,2BAA2B;IAC3B,MAAM,CAACC,YAAYC,cAAc,GAAGP,SAAqD;IAEzF,MAAM,EAAEQ,SAAS,EAAE,GAAGP;IAEtB,uDAAuD;IACvD,MAAM,CAACQ,UAAUC,YAAY,GAAGV,SAAS;IAEzC,MAAM,CAACW,aAAaC,eAAe,GAAGZ;IAEtC,MAAMa,oBAAoBlB,YAAY;QACpC,MAAMmB,iBAAiB;YACrBJ,YAAY;YACZ,IAAI;gBACF,MAAMK,eAAe,MAAMC,MAAM,uBAAuB;oBACtD,4BAA4B;oBAC5BC,QAAQ;gBACV;gBAEA,IAAIF,aAAaG,EAAE,EAAE;oBACnB,gDAAgD;oBAChD,MAAM,EAAEP,WAAW,EAAEL,UAAU,EAAE,GAAG,MAAMS,aAAaI,IAAI;oBAC3D,2CAA2C;oBAC3C,6CAA6C;oBAC7CP,eAAeD;oBACfJ,cAAcD;gBAChB,OAAO;oBACLM,eAAe;oBACfL,cAAc;gBAChB;YACF,EAAE,OAAOa,OAAgB;gBACvBC,QAAQC,GAAG,CAAC,CAAC,kBAAkB,CAAC,EAAEF;YACpC;YACAV,YAAY;QACd;QACA,MAAMI;IACR,GAAG;QAACN;KAAU;IAEd,MAAMe,SAAS5B,YAAY;QACzBe,YAAY;QACZ,IAAI;YACF,uCAAuC;YACvC,8BAA8B;YAC9B,KAAK;YACL,6CAA6C;YAC7C,cAAc;YACd,oBAAoB;YACpB,yBAAyB;YACzB,KAAK;YACL,oCAAoC;YACpC,MAAMc,iBAAiB,MAAMR,MAAM,eAAe;gBAChDC,QAAQ;YACV;YAEA,gDAAgD;YAEhD,IAAIO,eAAeN,EAAE,EAAE;gBACrBX,cAAc;gBACdK,eAAe;YACjB;QACF,EAAE,OAAOQ,OAAgB;YACvBC,QAAQC,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAEF;QACtC;QACAV,YAAY;IACd,GAAG,EAAE;IAELd,UAAU;QACR,KAAKiB;IACP,GAAG;QAACA;KAAkB,GAAE,2CAA2C;IAEnE,mEAAmE;IACnE,MAAMY,eAAsC1B,QAC1C,IAAO,CAAA;YACLU;YACAc;YACAZ;YACAE;YACAP;QACF,CAAA,GACA;QAACG;QAAUc;QAAQZ;QAAaE;QAAmBP;KAAW;IAGhE,qBAAO,KAACJ,kBAAkBwB,QAAQ;QAACC,OAAOF;kBAAepB;;AAC3D;AAEA;;;;;CAKC,GACD,OAAO,SAASuB;IACd,MAAMC,UAAU/B,WAAWI;IAC3B,IAAI2B,YAAY1B,WAAW;QACzB,MAAM,IAAI2B,MAAM;IAClB;IACA,OAAOD;AACT"}
+{"version":3,"sources":["../../src/contexts/SubscriberProvider.tsx"],"sourcesContent":["'use client'\n\nimport { PayloadSDK } from '@payloadcms/sdk'\nimport { type ReactNode, useCallback, useEffect } from 'react'\nimport { createContext, useContext, useMemo, useState } from 'react'\n\nimport type { Config, Subscriber } from '../copied/payload-types.js'\n\nimport { useServerUrl } from '../react-hooks/useServerUrl.js'\n\n/** Value provided by SubscriberProvider: current subscriber, auth state, and actions. */\nexport type SubscriberContextType = {\n  isLoaded: boolean\n  logOut: () => void\n  permissions: any\n  refreshSubscriber: () => void\n  subscriber: null | Subscriber\n}\n\nconst SubscriberContext = createContext<SubscriberContextType | undefined>(undefined)\n\n/** Props for SubscriberProvider. */\ninterface ProviderProps {\n  children?: ReactNode\n}\n\n/**\n * Provider that fetches and holds the current subscriber auth state (via POST /api/subscriberAuth).\n * Exposes subscriber, permissions, refreshSubscriber, and logOut to descendants. Must wrap any\n * component that uses useSubscriber().\n *\n * @param props.children - React tree to wrap\n * @returns SubscriberContext.Provider with current auth state and actions\n */\nexport function SubscriberProvider({ children }: ProviderProps) {\n  // eslint-disable-next-line\n  const [subscriber, setSubscriber] = useState<null | (Subscriber & { optIns: string[] })>(null)\n\n  const { serverURL } = useServerUrl()\n\n  // Keep track of if the selection content is loaded yet\n  const [isLoaded, setIsLoaded] = useState(false)\n\n  const [permissions, setPermissions] = useState<any>()\n\n  const refreshSubscriber = useCallback(async () => {\n    const initSubscriber = async () => {\n      setIsLoaded(false)\n      try {\n        const authResponse = await fetch('/api/subscriberAuth', {\n          // body: JSON.stringify({}),\n          method: 'POST',\n        })\n\n        if (authResponse.ok) {\n          // Call the server function to get the user data\n          const { permissions, subscriber } = await authResponse.json()\n          // console.log(`subscriber = `, subscriber)\n          // console.log(`permissions = `, permissions)\n          setPermissions(permissions)\n          setSubscriber(subscriber)\n        } else {\n          setPermissions(null)\n          setSubscriber(null)\n        }\n      } catch (error: unknown) {\n        console.log(`authResponse error`, error)\n      }\n      setIsLoaded(true)\n    }\n    await initSubscriber()\n  }, [serverURL])\n\n  const logOut = useCallback(async () => {\n    setIsLoaded(false)\n    try {\n      // const sdk = new PayloadSDK<Config>({\n      //   baseURL: serverURL || '',\n      // })\n      // const logoutResponse = await sdk.request({\n      //   json: {},\n      //   method: 'POST',\n      //   path: '/api/logout',\n      // })\n      // Unsure why sdk isn't working here\n      const logoutResponse = await fetch('/api/logout', {\n        method: 'POST',\n      })\n\n      // console.log(`logoutResponse`, logoutResponse)\n\n      if (logoutResponse.ok) {\n        setSubscriber(null)\n        setPermissions(null)\n      }\n    } catch (error: unknown) {\n      console.log(`logoutResponse error`, error)\n    }\n    setIsLoaded(true)\n  }, [])\n\n  useEffect(() => {\n    void refreshSubscriber()\n  }, [refreshSubscriber])\n\n  // Memoize the value to prevent unnecessary re-renders in consumers\n  const contextValue: SubscriberContextType = useMemo(\n    () => ({\n      isLoaded,\n      logOut,\n      permissions,\n      refreshSubscriber,\n      subscriber,\n    }),\n    [isLoaded, logOut, permissions, refreshSubscriber, subscriber],\n  )\n\n  return <SubscriberContext.Provider value={contextValue}>{children}</SubscriberContext.Provider>\n}\n\n/**\n * Consumes SubscriberContext. Use only inside a SubscriberProvider.\n *\n * @returns Current subscriber (or null), permissions, isLoaded, refreshSubscriber, and logOut\n * @throws Error if used outside SubscriberProvider\n */\nexport function useSubscriber() {\n  const context = useContext(SubscriberContext)\n  if (context === undefined) {\n    throw new Error('useSubscriber must be used within a SubscriberProvider')\n  }\n  return context\n}\n"],"names":["useCallback","useEffect","createContext","useContext","useMemo","useState","useServerUrl","SubscriberContext","undefined","SubscriberProvider","children","subscriber","setSubscriber","serverURL","isLoaded","setIsLoaded","permissions","setPermissions","refreshSubscriber","initSubscriber","authResponse","fetch","method","ok","json","error","console","log","logOut","logoutResponse","contextValue","Provider","value","useSubscriber","context","Error"],"mappings":"AAAA;;AAGA,SAAyBA,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAC9D,SAASC,aAAa,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAIpE,SAASC,YAAY,QAAQ,iCAAgC;AAW7D,MAAMC,kCAAoBL,cAAiDM;AAO3E;;;;;;;CAOC,GACD,OAAO,SAASC,mBAAmB,EAAEC,QAAQ,EAAiB;IAC5D,2BAA2B;IAC3B,MAAM,CAACC,YAAYC,cAAc,GAAGP,SAAqD;IAEzF,MAAM,EAAEQ,SAAS,EAAE,GAAGP;IAEtB,uDAAuD;IACvD,MAAM,CAACQ,UAAUC,YAAY,GAAGV,SAAS;IAEzC,MAAM,CAACW,aAAaC,eAAe,GAAGZ;IAEtC,MAAMa,oBAAoBlB,YAAY;QACpC,MAAMmB,iBAAiB;YACrBJ,YAAY;YACZ,IAAI;gBACF,MAAMK,eAAe,MAAMC,MAAM,uBAAuB;oBACtD,4BAA4B;oBAC5BC,QAAQ;gBACV;gBAEA,IAAIF,aAAaG,EAAE,EAAE;oBACnB,gDAAgD;oBAChD,MAAM,EAAEP,WAAW,EAAEL,UAAU,EAAE,GAAG,MAAMS,aAAaI,IAAI;oBAC3D,2CAA2C;oBAC3C,6CAA6C;oBAC7CP,eAAeD;oBACfJ,cAAcD;gBAChB,OAAO;oBACLM,eAAe;oBACfL,cAAc;gBAChB;YACF,EAAE,OAAOa,OAAgB;gBACvBC,QAAQC,GAAG,CAAC,CAAC,kBAAkB,CAAC,EAAEF;YACpC;YACAV,YAAY;QACd;QACA,MAAMI;IACR,GAAG;QAACN;KAAU;IAEd,MAAMe,SAAS5B,YAAY;QACzBe,YAAY;QACZ,IAAI;YACF,uCAAuC;YACvC,8BAA8B;YAC9B,KAAK;YACL,6CAA6C;YAC7C,cAAc;YACd,oBAAoB;YACpB,yBAAyB;YACzB,KAAK;YACL,oCAAoC;YACpC,MAAMc,iBAAiB,MAAMR,MAAM,eAAe;gBAChDC,QAAQ;YACV;YAEA,gDAAgD;YAEhD,IAAIO,eAAeN,EAAE,EAAE;gBACrBX,cAAc;gBACdK,eAAe;YACjB;QACF,EAAE,OAAOQ,OAAgB;YACvBC,QAAQC,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAEF;QACtC;QACAV,YAAY;IACd,GAAG,EAAE;IAELd,UAAU;QACR,KAAKiB;IACP,GAAG;QAACA;KAAkB;IAEtB,mEAAmE;IACnE,MAAMY,eAAsC1B,QAC1C,IAAO,CAAA;YACLU;YACAc;YACAZ;YACAE;YACAP;QACF,CAAA,GACA;QAACG;QAAUc;QAAQZ;QAAaE;QAAmBP;KAAW;IAGhE,qBAAO,KAACJ,kBAAkBwB,QAAQ;QAACC,OAAOF;kBAAepB;;AAC3D;AAEA;;;;;CAKC,GACD,OAAO,SAASuB;IACd,MAAMC,UAAU/B,WAAWI;IAC3B,IAAI2B,YAAY1B,WAAW;QACzB,MAAM,IAAI2B,MAAM;IAClB;IACA,OAAOD;AACT"}

package/dist/endpoints/requestMagicLink.d.ts

@@ -11,10 +11,14 @@ export type RequestMagicLinkResponse = {
  * Sends a magic-link email to the given address (creates a pending subscriber if needed).
  *
  * @param options - Config options for the endpoint
- * @param options.subscribersCollectionSlug - Collection slug for subscribers (default from Subscribers collection)
+ * @param options.subscribersCollectionSlug - (required) Collection slug for subscribers (default from Subscribers collection)
+ * @param options.unsubscribeURL - (optional) The URL to use for unsubscribe links
+ * @param options.verifyURL - (required) The URL to use for verify links
  * @returns Payload Endpoint config for POST /emailToken
  */
-declare function createEndpointRequestMagicLink({ subscribersCollectionSlug, }: {
+declare function createEndpointRequestMagicLink({ subscribersCollectionSlug, unsubscribeURL, verifyURL, }: {
     subscribersCollectionSlug: CollectionSlug;
+    unsubscribeURL?: URL;
+    verifyURL: URL;
 }): Endpoint;
 export default createEndpointRequestMagicLink;

package/dist/endpoints/requestMagicLink.js

@@ -1,28 +1,32 @@
-import crypto from 'crypto';
 import { defaultCollectionSlug } from '../collections/Subscribers.js';
-import { getTokenAndHash } from '../helpers/token.js';
+import { getHmacHash, getTokenAndHash } from '../helpers/token.js';
 /**
  * Factory that creates the request-magic-link endpoint config and handler.
  * Sends a magic-link email to the given address (creates a pending subscriber if needed).
  *
  * @param options - Config options for the endpoint
- * @param options.subscribersCollectionSlug - Collection slug for subscribers (default from Subscribers collection)
+ * @param options.subscribersCollectionSlug - (required) Collection slug for subscribers (default from Subscribers collection)
+ * @param options.unsubscribeURL - (optional) The URL to use for unsubscribe links
+ * @param options.verifyURL - (required) The URL to use for verify links
  * @returns Payload Endpoint config for POST /emailToken
- */ function createEndpointRequestMagicLink({ subscribersCollectionSlug = defaultCollectionSlug }) {
+ */ function createEndpointRequestMagicLink({ subscribersCollectionSlug = defaultCollectionSlug, unsubscribeURL, verifyURL }) {
+    // verifyURL required
+    if (!verifyURL || !verifyURL.href) {
+        throw new Error('A verify URL is required');
+    }
     /**
-   * Handler for POST /emailToken. Accepts email and verifyUrl, creates/updates a pending
+   * Handler for POST /emailToken. Takes an email parameter. Creates/updates a pending
    * subscriber with a verification token, and sends a magic-link email.
    *
-   * @param req - Payload request; body must include `email` and `verifyUrl`
+   * @param req - Payload request. Expects body to be a json object { email, verifyData }
    * @returns 200 with `emailResult` and `now` on success; 400 with `error` and `now` on bad data or email failure
    */ const requestMagicLinkHandler = async (req)=>{
         const data = req?.json ? await req.json() : {};
-        const { email, verifyUrl } = data // if by POST data
+        const { email, verifyData } = data // if by POST data
         ;
-        // const { email } = req.routeParams // if by path
-        if (!email || !verifyUrl) {
+        if (!email) {
             return Response.json({
-                error: 'Bad data',
+                error: 'Email required',
                 now: new Date().toISOString()
             }, {
                 status: 400
@@ -55,7 +59,7 @@ import { getTokenAndHash } from '../helpers/token.js';
             });
             if (!createResult) {
                 return Response.json({
-                    error: 'Bad data',
+                    error: 'Error creating subscriber',
                     now: new Date().toISOString()
                 }, {
                     status: 400
@@ -63,15 +67,15 @@ import { getTokenAndHash } from '../helpers/token.js';
             }
         }
         // Update user with verificationToken
-        const token = crypto.randomBytes(32).toString('hex');
-        const tokenHash = crypto.createHash('sha256').update(token).digest('hex');
-        const expiresAt = new Date(Date.now() + 15 * 60 * 1000) // 15 mins
-        ;
+        // const token = crypto.randomBytes(32).toString('hex')
+        // const tokenHash = crypto.createHash('sha256').update(token).digest('hex')
+        // const expiresAt = new Date(Date.now() + 15 * 60 * 1000) // 15 mins
+        const { expiresAt, token, tokenHash } = getTokenAndHash(15 * 60 * 1000);
         await req.payload.update({
             collection: subscribersCollectionSlug,
             data: {
                 verificationToken: tokenHash,
-                verificationTokenExpires: expiresAt.toISOString()
+                verificationTokenExpires: expiresAt?.toISOString()
             },
             where: {
                 email: {
@@ -79,12 +83,15 @@ import { getTokenAndHash } from '../helpers/token.js';
                 }
             }
         });
+        const { hashToken: unsubscribeHash } = getHmacHash(email);
         // Send email
-        const magicLink = `${verifyUrl}${verifyUrl.search ? '&' : '?'}token=${token}&email=${email}`;
+        const magicLink = `${verifyURL?.href}${verifyURL?.search ? '&' : '?'}token=${encodeURIComponent(token)}&email=${encodeURIComponent(email)}&verifyData=${encodeURIComponent(verifyData)}`;
+        const unsubscribeLink = !unsubscribeURL ? undefined : `${unsubscribeURL?.href}${unsubscribeURL?.search ? '&' : '?'}email=${encodeURIComponent(email)}&hash=${encodeURIComponent(unsubscribeHash)}`;
         const subject = data.subject || 'Your Magic Login Link';
         const message = `
-  ${data.message || '<p>Use this link to log in:</p>'}
-  <p><a href="${magicLink}"><b>Login</b></a></p>
+  ${data.message || '<p>You requested a magic link to log in. Click the button below</p>'}
+  <p><a href="${magicLink}"><button><b>Login</b></button></a></p>
+  ${unsubscribeLink ? `<p>Click here to <a href="${unsubscribeLink}">unsubscribe</a></p>` : ``}
   `;
         const emailResult = await req.payload.sendEmail({
             html: message,