payload-magic-login

Payload Magic Login Plugin

THIS IS A PACKAGE UNDER ACTIVE DEVELOPMENT - USE AT YOUR OWN RISK

This is built with the Payload CMS plugin template.

How to install this plugin

First install it with npm install payload-magic-login (or your preferred package manager).

To then install this plugin, simply add it to your payload.config() in the Plugin array.

import magicLoginPlugin from 'payload-magic-login';

export const config = buildConfig({
  plugins: [
    // You can pass options to the plugin
    magicLoginPlugin({
      secret: process.env.PAYLOAD_SECRET, // A secret used to sign the JWTs
      payload: payload, // Your payload instance
      enabled: true, 
      targets: [
         {
          target: "app-dev",
          uri: "exp://my-app-dev.exp.direct",
          subject: "GetRekd: Login Link",
          html: (link) => `Click this link to finish logging in: <a href="${link}">LOGIN LINK</a>, if you can't click the link, copy and paste this link into your browser: \n\n${link}`
        },
      ]
    })
  ]
});

It depends on these things in your config:

  // payload.config.ts
  ...
  email: {
    fromName: 'Oscar - GetRekd app',
    fromAddress: '[e-mail]',
    // You can use the ethereal mail in dev, 
    // but requires some sort of transport options for actual emails (See Payload Docs)
    transportOptions: {
      host: process.env.SMTP_HOST,
      auth: {
        user: process.env.SMTP_USER,
        pass: process.env.SMTP_PASS,
      },
      port: process.env.SMTP_PORT,
      secure: Number(process.env.SMTP_SECURE) === 465,
      requireTLS: Number(process.env.SMTP_SECURE) === 587,
    }
  },
  // It will redirect to this URL
  serverURL: process.env.SERVER_URL || 'http://localhost:3000',
  ...

Things to consider

At this moment, it creates a user collection for you - with an email and salt/hash (plan is to support this alongside local auth, working on that). I will add support to extend this or have it update the given collection at a later date.

Example

In the dev folder, you’ll find a basic payload project, created with npx create-payload-app.

The magicLoginPlugin has already been installed to the payload.config() file in this project.

plugins: [
  magicLoginPlugin({
      secret: process.env.PAYLOAD_SECRET, // A secret used to sign the JWTs
      payload: payload, // Your payload instance
      enabled: true, 
      // Targets are used to determine where the link should point to.
      // For example: target: "admin" (default) creates a link to the admin panel.
      // The targets "app" and "app-dev" could be for opening the link in an app.
      targets: [
        {
          target: "app",
          uri: "exp://my-app.exp.direct",
          subject: "GetRekd: Login Link",
          html: (link) => `Click this link to finish logging in: <a href="${link}">LOGIN LINK</a>, if you can't click the link, copy and paste this link into your browser: ${link}`
        },
        {
          target: "app-dev",
          uri: "exp://my-app-dev.exp.direct",
          subject: "GetRekd: Login Link",
          html: (link) => `Click this link to finish logging in: <a href="${link}">LOGIN LINK</a>, if you can't click the link, copy and paste this link into your browser: \n\n${link}`
        },
      ]
    })
]

When you’re ready to start development, navigate into this folder with cd dev

And then start the project with yarn dev and pull up http://localhost:3000/ in your browser.

Types.ts

These are the current types/options for the plugin.

export interface PluginTypes {
  /**
   * Enable or disable plugin
   * @default false
   */
  enabled?: boolean
  /**
   * Secret used to sign JWTs
   */
  secret: string
  /**
   * The payload instance
   * @default payload
   */
  payload: Payload
  /**
   * Your own custom targets:
   * @default []
   * @example
   * targets: [
   *  { 
   *   target: "app",
   *   uri: "exp://my-app.example.com",
   *   subject: "GetRekd: Login Link",
   *   html: `Click this link to finish logging in: <a href="${link}">LOGIN LINK</a>, if you can't click the link, copy and paste this link into your browser: ${link}`
   *  },
   *  {
   *   target: "admin",
   *   uri: "https://admin.getrekd.lol",
   *   subject: "GetRekd: Login Link",
   *   html: `Click this link to finish logging in: <a href="${link}">LOGIN LINK</a>, if you can't click the link, copy and paste this link into your browser: ${link}`
   *  }
   * ]
   */
  `targets?: Array<{ target: string, uri: string, subject: string, html: (link: string) => string }>`
}

Testing

I will implement tests shortlyTM.

Contribute

Feel free to submit PRs and suggestions, the code isn't perfect by any means and is provided as-is.