payload-subscribers-plugin 0.0.1

package/src/endpoints/verifyMagicLink.ts

@@ -0,0 +1,164 @@
+import type { CollectionSlug, Endpoint, PayloadHandler } from 'payload'
+import type { Subscriber } from 'src/copied/payload-types.js'
+
+import { defaultCollectionSlug } from '../collections/Subscribers.js'
+import { getHash, getTokenAndHash } from '../helpers/token.js'
+
+export type VerifyMagicLinkResponse =
+  | {
+      error: string
+      now: string
+    }
+  | {
+      message: string
+      now: string
+    }
+
+/**
+ * createEndpointLogout
+ * @param options
+ * @returns
+ *
+ * Factory to generate the endpoint config with handler based on input option for subscribersCollectionSlug
+ *
+ */
+function createEndpointVerifyMagicLink({
+  subscribersCollectionSlug = defaultCollectionSlug,
+}: {
+  subscribersCollectionSlug: CollectionSlug
+}): Endpoint {
+  /**
+   * verifyMagicLink Endpoint Handler
+   * @param req
+   * @data { email, forwardUrl, token }
+   * @returns { status: 200, json: {message: string, now: date} }
+   * @returns { status: 400, json: {error: ('Bad data' | 'Token not verified' | 'Token expired'), now: date} }
+   */
+  const verifyMagicLinkHandler: PayloadHandler = async (req) => {
+    const reqData = req?.json ? await req.json() : {}
+    const { email, token }: { email: string; token: string } = reqData // if by POST reqData
+    // const { email, token } = req.routeParams // if by path
+
+    if (!email || !token) {
+      return Response.json(
+        { error: 'Bad data', now: new Date().toISOString() } as VerifyMagicLinkResponse,
+        { status: 400 },
+      )
+    }
+
+    const userResults = await req.payload.find({
+      collection: subscribersCollectionSlug,
+      where: {
+        email: { equals: email },
+      },
+    })
+
+    type SubscriberType = {
+      // @ts-expect-error Why is this not correct, isn't it how Payload does it?
+      collection: subscribersCollectionSlug
+    } & Subscriber
+
+    const user = userResults.docs[0] as SubscriberType
+
+    if (!user) {
+      return Response.json(
+        { error: 'Bad data', now: new Date().toISOString() } as VerifyMagicLinkResponse,
+        { status: 400 },
+      )
+    }
+
+    const { tokenHash } = getHash(token)
+
+    // req.payload.logger.info(
+    //   `verifyMagicLinkHandler ${email} \n ${tokenHash} \n ${user.verificationTokenExpires} \n ${user.verificationToken}`,
+    // )
+    if (!user.verificationTokenExpires || tokenHash != user.verificationToken) {
+      // req.payload.logger.info(`Token not verified: ${tokenHash} != ${user.verificationToken}`)
+      return Response.json(
+        { error: 'Token not verified', now: new Date().toISOString() } as VerifyMagicLinkResponse,
+        { status: 400 },
+      )
+    }
+
+    if (new Date(Date.now()) > new Date(user.verificationTokenExpires)) {
+      return Response.json(
+        { error: 'Token expired', now: new Date().toISOString() } as VerifyMagicLinkResponse,
+        { status: 400 },
+      )
+    }
+
+    // Update user
+    await req.payload.update({
+      collection: subscribersCollectionSlug,
+      data: {
+        password: tokenHash,
+      },
+      where: {
+        email: { equals: user.email },
+      },
+    })
+
+    // Log the user in via Payload headers
+    let headers
+    try {
+      const loginReq = await fetch(
+        `${req.payload.config.serverURL}/api/${subscribersCollectionSlug}/login`,
+        {
+          body: JSON.stringify({
+            email,
+            password: tokenHash,
+          }),
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          method: 'POST',
+        },
+      )
+      if (loginReq && loginReq.ok) {
+        headers = loginReq.headers
+      }
+    } catch (error) {
+      // console.log(error)
+      return Response.json({ error } as VerifyMagicLinkResponse, { status: 400 })
+    }
+    // console.log('login', headers)
+
+    const { tokenHash: tokenHash2 } = getTokenAndHash() // Unknowable
+    const data = {
+      password: tokenHash2,
+      status: 'subscribed' as 'pending' | 'subscribed' | 'unsubscribed' | undefined,
+      verificationToken: '',
+      verificationTokenExpires: null,
+    }
+    // Update user
+    await req.payload.update({
+      collection: subscribersCollectionSlug,
+      data,
+      where: {
+        email: { equals: user.email },
+      },
+    })
+
+    return Response.json(
+      {
+        message: 'Token verified',
+        now: new Date().toISOString(),
+      } as VerifyMagicLinkResponse,
+      { headers },
+    )
+  }
+
+  /**
+   * verifyMagicLink Endpoint Config
+   */
+  const verifyMagicLinkEndpoint: Endpoint = {
+    handler: verifyMagicLinkHandler,
+    method: 'post',
+    path: '/verifyToken',
+  }
+
+  return verifyMagicLinkEndpoint
+}
+
+export default createEndpointVerifyMagicLink

package/src/exports/index.ts

@@ -0,0 +1 @@
+export * from './ui.js'

package/src/exports/ui.ts

@@ -0,0 +1,17 @@
+export type { RequestMagicLinkResponse } from '../components/app/RequestMagicLink.js'
+export { RequestMagicLink } from '../components/app/RequestMagicLink.js'
+
+export { RequestOrSubscribe } from '../components/app/RequestOrSubscribe.js'
+
+export type { SubscribeResponse } from '../components/app/Subscribe.js'
+export { Subscribe } from '../components/app/Subscribe.js'
+
+export { SubscriberMenu } from '../components/app/SubscriberMenu.js'
+
+export type { VerifyMagicLinkResponse } from '../components/app/VerifyMagicLink.js'
+export { VerifyMagicLink } from '../components/app/VerifyMagicLink.js'
+
+export type { SubscriberContextType } from '../contexts/SubscriberProvider.js'
+export { SubscriberProvider, useSubscriber } from '../contexts/SubscriberProvider.js'
+
+export { getServerUrl } from '../server-functions/serverUrl.js'

package/src/helpers/testData.ts

@@ -0,0 +1,2 @@
+export const testEmail = 'seeded-by-plugin@crume.org'
+export const getTestEmail = () => testEmail

package/src/helpers/token.ts

@@ -0,0 +1,14 @@
+import crypto from 'crypto'
+
+export const getTokenAndHash = (milliseconds?: number) => {
+  const token = crypto.randomBytes(32).toString('hex')
+  const tokenHash = crypto.createHash('sha256').update(token).digest('hex')
+  const expiresAt = milliseconds ? new Date(Date.now() + milliseconds) : undefined
+
+  return { expiresAt, token, tokenHash }
+}
+
+export const getHash = (token: string) => {
+  const tokenHash = crypto.createHash('sha256').update(token).digest('hex')
+  return { token, tokenHash }
+}

package/src/helpers/verifyOptIns.ts

@@ -0,0 +1,39 @@
+import type { BasePayload, CollectionSlug } from 'payload'
+
+import OptInChannels from '../collections/OptInChannels.js'
+
+export const verifyOptIns = async (
+  payload: BasePayload,
+  optIns?: string[],
+): Promise<{
+  invalidOptInsInput: string[] | undefined
+  verifiedOptInIDs: string[] | undefined
+}> => {
+  if (optIns) {
+    //
+    // Get all matching OptInChannels
+    const optInChannelResults = await payload.find({
+      collection: OptInChannels.slug as CollectionSlug,
+      where: {
+        id: { in: optIns },
+      },
+    })
+    const verifiedOptInIDs: string[] | undefined = optInChannelResults.docs.map(
+      (channel) => channel.id,
+    )
+
+    //
+    // Separate all non-matching OptInChannels
+    const checkInvalidOptInsInput: string[] | undefined = optIns?.filter(
+      (channelID) => !verifiedOptInIDs.includes(channelID),
+    )
+    const invalidOptInsInput: string[] | undefined =
+      checkInvalidOptInsInput.length > 0 ? checkInvalidOptInsInput : undefined
+
+    // req.payload.logger.info(`optIns = ${JSON.stringify(optIns)}`)
+    // req.payload.logger.info(`invalidOptInsInput = ${JSON.stringify(invalidOptInsInput)}`)
+    // req.payload.logger.info(`verifiedOptInIDs = ${JSON.stringify(verifiedOptInIDs)}`)
+    return { invalidOptInsInput, verifiedOptInIDs }
+  }
+  return { invalidOptInsInput: undefined, verifiedOptInIDs: undefined }
+}

package/src/index.ts

@@ -0,0 +1,207 @@
+import type { BasePayload, CollectionSlug, Config } from 'payload'
+
+import { OptedInChannels } from './collections/fields/OptedInChannels.js'
+import OptInChannels from './collections/OptInChannels.js'
+import {
+  defaultTokenExpiration,
+  SubscribersCollectionFactory,
+  subscribersCollectionFields,
+} from './collections/Subscribers.js'
+import getOptInChannelsEndpoint from './endpoints/getOptInChannels.js'
+import createEndpointLogout from './endpoints/logout.js'
+import createEndpointRequestMagicLink from './endpoints/requestMagicLink.js'
+import createEndpointSubscribe from './endpoints/subscribe.js'
+import createEndpointSubscriberAuth from './endpoints/subscriberAuth.js'
+import createEndpointVerifyMagicLink from './endpoints/verifyMagicLink.js'
+import { getTestEmail } from './helpers/testData.js'
+import { getTokenAndHash } from './helpers/token.js'
+
+export type PayloadSubscribersConfig = {
+  /**
+   * List of collections to add a custom field
+   */
+  collections?: Partial<Record<CollectionSlug, true>>
+  /**
+   * Defaults to false-y. When true:
+   *  - Database schema changes are still made and seeded
+   *  - APIs return null or undefined success
+   *  - Admin components are not added
+   *  - App components return nothing
+   */
+  disabled?: boolean
+  /**
+   * The collection to make the subscribers collection
+   * - Set auth if not
+   * - Add optIns field
+   */
+  subscribersCollectionSlug?: CollectionSlug
+  /**
+   * Defaults to 30 minutes
+   */
+  tokenExpiration?: number
+}
+
+export const payloadSubscribersPlugin =
+  (pluginOptions: PayloadSubscribersConfig) =>
+  (config: Config): Config => {
+    if (!config.collections) {
+      config.collections = []
+    }
+
+    config.collections.push(OptInChannels)
+    let subscribersCollection = pluginOptions.subscribersCollectionSlug
+      ? config.collections.find(
+          (collection) => collection.slug == pluginOptions.subscribersCollectionSlug,
+        )
+      : undefined
+
+    if (subscribersCollection) {
+      // Configure the input collection to be the subscribers collection
+      config.collections = config.collections.filter(
+        (collection) => collection.slug != subscribersCollection?.slug,
+      )
+      subscribersCollection.fields.push(...subscribersCollectionFields)
+      if (!subscribersCollection.auth) {
+        subscribersCollection = {
+          ...subscribersCollection,
+          auth: { tokenExpiration: defaultTokenExpiration },
+        }
+      }
+      if (!subscribersCollection.admin?.useAsTitle) {
+        if (!subscribersCollection.admin) {
+          subscribersCollection.admin = { useAsTitle: 'email' }
+        } else {
+          // Throw error? Or override?
+          subscribersCollection.admin.useAsTitle = 'email'
+        }
+      }
+      config.collections.push(subscribersCollection)
+    } else {
+      // Configure the default built-in subscribers collection
+      subscribersCollection = SubscribersCollectionFactory({
+        slug: pluginOptions.subscribersCollectionSlug,
+        tokenExpiration: pluginOptions.tokenExpiration,
+      })
+      config.collections.push(subscribersCollection)
+    }
+
+    if (pluginOptions.collections) {
+      for (const collectionSlug in pluginOptions.collections) {
+        const collection = config.collections.find(
+          (collection) => collection.slug === collectionSlug,
+        )
+
+        if (collection) {
+          collection.fields.push(OptedInChannels)
+        }
+      }
+    }
+
+    /**
+     * If the plugin is disabled, we still want to keep added collections/fields so the database schema is consistent which is important for migrations.
+     * If your plugin heavily modifies the database schema, you may want to remove this property.
+     */
+    if (pluginOptions.disabled) {
+      return config
+    }
+
+    if (!config.admin) {
+      config.admin = {}
+    }
+
+    if (!config.admin.components) {
+      config.admin.components = {}
+    }
+
+    if (!config.admin.components.beforeDashboard) {
+      config.admin.components.beforeDashboard = []
+    }
+
+    if (!config.endpoints) {
+      config.endpoints = []
+    }
+
+    config.endpoints.push(
+      getOptInChannelsEndpoint,
+      createEndpointLogout({
+        subscribersCollectionSlug: subscribersCollection.slug as CollectionSlug,
+      }),
+      createEndpointRequestMagicLink({
+        subscribersCollectionSlug: subscribersCollection.slug as CollectionSlug,
+      }),
+      createEndpointSubscribe({
+        subscribersCollectionSlug: subscribersCollection.slug as CollectionSlug,
+      }),
+      createEndpointSubscriberAuth({
+        subscribersCollectionSlug: subscribersCollection.slug as CollectionSlug,
+      }),
+      createEndpointVerifyMagicLink({
+        subscribersCollectionSlug: subscribersCollection.slug as CollectionSlug,
+      }),
+    )
+
+    const incomingOnInit = config.onInit
+
+    const genInit = (testData: { testEmail: string }) => async (payload: BasePayload) => {
+      // Ensure we are executing any existing onInit functions before running our own.
+      if (incomingOnInit) {
+        await incomingOnInit(payload)
+      }
+
+      // console.log('Object.keys(payload.collections)', Object.keys(payload.collections))
+      const { totalDocs: totalOptIns } = await payload.count({
+        collection: 'opt-in-channels',
+        where: {
+          title: {
+            equals: 'seeded-by-plugin',
+          },
+        },
+      })
+
+      if (totalOptIns === 0) {
+        await payload.create({
+          collection: 'opt-in-channels',
+          data: {
+            active: true,
+            title: 'seeded-by-plugin',
+          },
+        })
+      }
+
+      // const { seededChannel } = await payload.find({
+      //   collection: 'opt-in-channels',
+      //   where: {
+      //     title: {
+      //       equals: 'seeded-by-plugin',
+      //     },
+      //   },
+      // })
+
+      const { totalDocs: totalSubscribers } = await payload.count({
+        collection: subscribersCollection.slug as CollectionSlug,
+        where: {
+          email: {
+            equals: testData.testEmail,
+          },
+        },
+      })
+
+      const { tokenHash } = getTokenAndHash() // Unknowable
+      // payload.logger.info(`testData.testEmail == '${testData.testEmail}'`)
+      if (totalSubscribers === 0) {
+        await payload.create({
+          collection: subscribersCollection.slug as CollectionSlug,
+          data: {
+            email: testData.testEmail,
+            password: tokenHash,
+            status: 'pending',
+          },
+        })
+      }
+    }
+
+    // console.log(`getTestEmail == '${getTestEmail()}'`)
+    config.onInit = genInit({ testEmail: getTestEmail() })
+
+    return config
+  }

package/src/react-hooks/useServerUrl.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { getServerUrl } from '../server-functions/serverUrl.js'
+
+// Custom hook to easily consume the context and add error handling
+export function useServerUrl() {
+  const [serverURL, setServerURL] = useState<string>()
+  useEffect(() => {
+    const fetchServerUrl = async () => {
+      const { serverURL } = await getServerUrl()
+      setServerURL(serverURL)
+    }
+    void fetchServerUrl()
+  }, [])
+  return { serverURL }
+}

package/src/server-functions/serverUrl.ts

@@ -0,0 +1,38 @@
+'use server'
+
+const getServerSideURL = () => {
+  const serverSideURL = process.env.NEXT_PUBLIC_VERCEL_URL
+    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+    : process.env.VERCEL_PROJECT_PRODUCTION_URL
+      ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+      : process.env.NEXT_PUBLIC_DEV_URL
+        ? `http://${process.env.NEXT_PUBLIC_DEV_URL}`
+        : 'http://localhost:3000'
+  // console.log(`process.env.NEXT_PUBLIC_DEV_URL: ${process.env.NEXT_PUBLIC_DEV_URL}`)
+  // console.log(`serverSideURL: ${serverSideURL}`)
+  return serverSideURL
+}
+
+// const canUseDOM = !!(
+//   typeof window !== 'undefined' &&
+//   window.document &&
+//   window.document.createElement
+// )
+
+// const getClientSideURL = () => {
+//   if (canUseDOM) {
+//     const protocol = window.location.protocol
+//     const domain = window.location.hostname
+//     const port = window.location.port
+//     // `${window.location.protocol}//${window.location.host}
+//     const clientSideURL = `${protocol}//${domain}${port ? `:${port}` : ''}`
+//     // console.log(`clientSideURL: ${clientSideURL}`)
+//     return clientSideURL
+//   }
+
+//   return getServerSideURL()
+// }
+
+export const getServerUrl = async (): Promise<{ serverURL: string }> => {
+  return { serverURL: getServerSideURL() }
+}