How we manually send an email in a server api route (stripe webhook)

[joelhooks]

For our app we need to send a new user a magic link after they make a purchase in response to a Stripe webhook. The problem I ran into was that sending an email generally seems to assume we are in a browser environment with access to cookie headers, and that's not the case when stripe sends a webhook to our api route function.

To make this happen, we are manually calling the /api/auth/csrf route and posting to /api/auth/signin/email

Of course when stripe posts to an api endpoint, there is no cookie!

I tried to import the utils and manually create the cookie header inline, but they throw an error when I try to import them from next-auth so I cut and pasted them into my module.

Would love feedback on this if you've got it. It works as is, but I particularly don't care for the copypasta (at all) and assume there's a much better way to accomplish this that I haven't discovered yet 😅

import {NextAuthOptions} from 'next-auth'

import {createHash, randomBytes} from 'crypto'

const baseUrl = process.env.NEXTAUTH_URL || process.env.VERCEL_URL

export async function sendServerEmail({
  email,
  callbackUrl,
  nextAuthOptions,
}: {
  email: string
  callbackUrl?: string
  nextAuthOptions: NextAuthOptions
}) {
  const signInUrl = `${baseUrl}/api/auth/signin/email`
  const url = parseUrl(`${baseUrl}/api/auth`)
  const secret = createSecret({userOptions: nextAuthOptions, url})
  const {cookie} = createCSRFToken({options: {secret}, isPost: false})
  const cookieHeader = `next-auth.csrf-token=${cookie}`
  const clientToken = await getClientCsrfToken(cookieHeader)

  return await fetch(signInUrl, {
    method: 'post',
    headers: {
      Cookie: cookieHeader,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    // @ts-expect-error
    body: new URLSearchParams({
      email,
      csrfToken: clientToken,
      callbackUrl: callbackUrl || baseUrl,
      json: true,
    }),
  }).then((response) => response.json())
}

export async function getClientCsrfToken(Cookie: string) {
  const {csrfToken} = await fetch(`${baseUrl}/api/auth/csrf`, {
    method: 'get',
    headers: {
      Cookie,
    },
  }).then((response) => response.json())

  return csrfToken
}

function createCSRFToken({options, cookieValue, isPost, bodyValue}: any) {
  if (cookieValue) {
    const [csrfToken, csrfTokenHash] = cookieValue.split('|')
    const expectedCsrfTokenHash = createHash('sha256')
      .update(`${csrfToken}${options.secret}`)
      .digest('hex')
    if (csrfTokenHash === expectedCsrfTokenHash) {
      // If hash matches then we trust the CSRF token value
      // If this is a POST request and the CSRF Token in the POST request matches
      // the cookie we have already verified is the one we have set, then the token is verified!
      const csrfTokenVerified = isPost && csrfToken === bodyValue

      return {csrfTokenVerified, csrfToken}
    }
  }

  // New CSRF token
  const csrfToken = randomBytes(32).toString('hex')
  const csrfTokenHash = createHash('sha256')
    .update(`${csrfToken}${options.secret}`)
    .digest('hex')
  const cookie = `${csrfToken}|${csrfTokenHash}`

  return {cookie, csrfToken}
}

function createSecret(params: {userOptions: NextAuthOptions; url: any}) {
  const {userOptions, url} = params

  return (
    userOptions.secret ??
    createHash('sha256')
      .update(JSON.stringify({...url, ...userOptions}))
      .digest('hex')
  )
}

interface InternalUrl {
  /** @default "http://localhost:3000" */
  origin: string
  /** @default "localhost:3000" */
  host: string
  /** @default "/api/auth" */
  path: string
  /** @default "http://localhost:3000/api/auth" */
  base: string
  /** @default "http://localhost:3000/api/auth" */
  toString: () => string
}

/** Returns an `URL` like object to make requests/redirects from server-side */
function parseUrl(url?: string): InternalUrl {
  const defaultUrl = new URL('http://localhost:3000/api/auth')

  if (url && !url.startsWith('http')) {
    url = `https://${url}`
  }

  const _url = new URL(url ?? defaultUrl)
  const path = (_url.pathname === '/' ? defaultUrl.pathname : _url.pathname)
    // Remove trailing slash
    .replace(/\/$/, '')

  const base = `${_url.origin}${path}`

  return {
    origin: _url.origin,
    host: _url.host,
    path,
    base,
    toString: () => base,
  }
}

[joelhooks]

I feel like this is a LOT closer. I still pulled the hashing util in, but it's not really needed and I'm effectively using my own /core/lib/email/signin implementation that has a bit more control and skips the csrf that I don't need in this context utilizing the provider and adapter more effectively 🎉

Thanks @goshacmd!

import {NextAuthOptions} from 'next-auth'

import {createHash, randomBytes} from 'crypto'

const baseUrl = process.env.NEXTAUTH_URL || process.env.VERCEL_URL

function hashToken(token: string, options: any) {
  const {provider, secret} = options
  return (
    createHash('sha256')
      // Prefer provider specific secret, but use default secret if none specified
      .update(`${token}${provider.secret ?? secret}`)
      .digest('hex')
  )
}

export async function sendServerEmail({
  email,
  callbackUrl,
  nextAuthOptions,
}: {
  email: string
  callbackUrl?: string
  nextAuthOptions: NextAuthOptions
}) {
  const emailProvider: any = nextAuthOptions.providers.find(
    (provider) => provider.id === 'email',
  )

  callbackUrl = (callbackUrl || baseUrl) as string

  const identifier = email

  const token =
    (await emailProvider.generateVerificationToken?.()) ??
    randomBytes(32).toString('hex')

  const ONE_DAY_IN_SECONDS = 86400
  const expires = new Date(
    Date.now() + (emailProvider.maxAge ?? ONE_DAY_IN_SECONDS) * 1000,
  )

  await nextAuthOptions?.adapter?.createVerificationToken?.({
    identifier,
    token: hashToken(token, {
      provider: emailProvider,
      secret: nextAuthOptions.secret,
    }),
    expires,
  })

  console.log(emailProvider)

  const params = new URLSearchParams({callbackUrl, token, email: identifier})
  const _url = `${baseUrl}/api/auth/callback/${emailProvider.id}?${params}`

  await emailProvider.sendVerificationRequest({
    identifier,
    url: _url,
    provider: emailProvider.options,
    token: token as string,
    expires,
  })
}

[sarahsimionescu]

Thank you @joelhooks ! Interested in an officially supported solution as well.