Using email-link auth strategy to send subsequent user invites

[ldmsh]

Looking to use remix-auth-email-link to invite other users to their own account within an application.

Example: a project management app which can invite multiple users to collaborate on a project.

Ideal solution: Using email-link strategy within a /users invite page for example, which triggers an action that essentially sends a magic link to the invited user.

Current action function:

export const action: ActionFunction = async ({ request }) => {
  const raw = await request.formData()
  const fields = Object.fromEntries(raw)

  if (fields._action === 'AddUser') {
    const email = fields.email.toString()
    const role = fields.role.toString()
    const newUser = await createNewInvitedUser(email, user.account_id, role)

    if (!newUser) {
      return json({ success: false, error: { message: "Internal server error while creating user." } }, { status: 500 })
    }

// here is where I'd like to trigger the magic link to send the new user
    await authenticator.authenticate('email-link', request, {
      successRedirect: '/valuers'
    })

  }

//...
}

Just looking for ideas on how to best implement this, as running into various errors thanks to little http experience and low understanding of how remix-auth works.

Thanks

[pbteja1998]

This already looks correct. The only thing I would change is: in the first line I would do await request.clone().formData()

[ldmsh]

Brilliant thank you so much, this worked!

In order to send a different email (rather than the standard login email) - how would you suggest to do this?

Is there a way to retrieve the request in auth.server and switch which email is sent based on this?

Current auth.server:

// auth.server.ts 

export const authenticator = new Authenticator<User>(authSessionStorage)

export async function login(email: string) {
  const user = await findOrCreateUser(email)
  if (!user) throw new Error("Unable to log you in. Please contact support.")
  return user
}

authenticator.use(
  new EmailLinkStrategy(
    { sendEmail, secret, callbackURL: '/magic' },
    async ({ email }: { email: string }) => {
      let user = await login(email)
      return user
    }
  )
)

Thanks again

[pbteja1998]

Just made a new release 1.3.1. Now, you should get your formData as an argument in your sendEmail function.

type SendEmailOptions<User> = {
  emailAddress: string
  magicLink: string
  user?: User | null
  domainUrl: string
  form: FormData // this is new
}

Since your formData already have an _action attribute, you can make use of that.

// app/services/email.server.tsx


if (options.form.get("_action") === "AddUser") {
    // send a different invite email
}

[ldmsh]

This is exactly what I need thank you again, really appreciate it.