ghost 6.0.4 → 6.0.6

package/core/server/services/koenig/node-renderers/header-v2-renderer.js

@@ -68,6 +68,73 @@ function cardTemplate(nodeData, options = {}) {
         `;
 }
 
+function generateMSOSplitHeaderImage(nodeData) {
+    const {backgroundSize, backgroundImageSrc, backgroundColor} = nodeData;
+
+    if (backgroundSize === 'contain') {
+        return `
+            <!--[if mso]>
+                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroke="false" style="width:600px;height:320px;">
+                    <v:fill type="frame" aspect="atmost" size="225pt,120pt" src="${backgroundImageSrc}" color="${backgroundColor}" />
+                    <v:textbox inset="0,0,0,0">
+                    </v:textbox>
+                </v:rect>
+            <![endif]-->
+            `;
+    } else {
+        return `
+            <!--[if mso]>
+                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:320px;">
+                    <v:fill type="frame" aspect="atleast" src="${backgroundImageSrc}" color="${backgroundColor}" />
+                    <v:textbox inset="0,0,0,0">
+                    </v:textbox>
+                </v:rect>
+            <![endif]-->
+            `;
+    }
+}
+
+function generateMSOContentWrapper(nodeData) {
+    const {backgroundImageSrc, backgroundColor} = nodeData;
+    const hasContainAndSplit = nodeData.backgroundSize === 'contain' && nodeData.layout === 'split';
+    const hasImageWithoutSplit = nodeData.backgroundImageSrc && nodeData.layout !== 'split';
+
+    // Outlook clients will return the first td, all other clients will return the second td
+    const msoOpenTag = `
+                    <!--[if mso]>
+                        <td class="kg-header-card-content" style="${hasImageWithoutSplit ? 'padding: 0;' : 'padding: 40px;'}${hasContainAndSplit ? 'padding-top: 0;' : ''}">
+                    <![endif]-->
+                    <!--[if !mso]><!-->
+                        <td class="kg-header-card-content" style="${hasContainAndSplit ? 'padding-top: 0;' : ''}">
+                    <!--<![endif]-->
+                    `;
+
+    const msoImageVML = hasImageWithoutSplit ? `
+                    <!--[if mso]>
+                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
+                            <v:fill src="${backgroundImageSrc}" color="${backgroundColor}" type="frame" aspect="atleast" focusposition="0.5,0.5" />
+                            <v:textbox inset="30pt,30pt,30pt,30pt" style="mso-fit-shape-to-text:true;">
+                    <![endif]-->
+                    ` : '';
+
+    return msoOpenTag + msoImageVML;
+}
+
+function generateMSOContentClosing(nodeData) {
+    const hasImageWithoutSplit = nodeData.backgroundImageSrc && nodeData.layout !== 'split';
+
+    if (!hasImageWithoutSplit) {
+        return '';
+    }
+
+    return `
+        <!--[if mso]>
+            </v:textbox>
+        </v:rect>
+        <![endif]-->
+        `;
+}
+
 function emailTemplate(nodeData, options) {
     const backgroundAccent = nodeData.backgroundColor === 'accent' ? `background-color: ${nodeData.accentColor};` : '';
     const alignment = nodeData.alignment === 'center' ? 'text-align: center;' : '';
@@ -88,17 +155,19 @@ function emailTemplate(nodeData, options) {
 
     return (
         `
-        <div class="kg-header-card kg-v2${hasDarkBg ? ' kg-header-card-dark-bg' : 'kg-header-card-light-bg'}" style="color:${nodeData.textColor}; ${alignment} ${backgroundImageStyle} ${backgroundAccent}">
+        <div class="kg-header-card kg-v2 ${hasDarkBg ? 'kg-header-card-dark-bg' : 'kg-header-card-light-bg'}" style="color:${nodeData.textColor}; ${alignment} ${backgroundImageStyle} ${backgroundAccent}">
             ${nodeData.layout === 'split' && nodeData.backgroundImageSrc ? `
                 <table border="0" cellpadding="0" cellspacing="0" width="100%">
                     <tr>
-                        <td background="${nodeData.backgroundImageSrc}" style="${splitImageStyle}" class="kg-header-card-image"></td>
+                        <td background="${nodeData.backgroundImageSrc}" style="${splitImageStyle}" class="kg-header-card-image" bgcolor="${nodeData.backgroundColor}" align="center">
+                            ${generateMSOSplitHeaderImage(nodeData) /* mso-only img, no shared markup */}
+                        </td>
                     </tr>
                 </table>
             ` : ''}
             <table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:${nodeData.textColor}; ${alignment} ${backgroundImageStyle} ${backgroundAccent}">
                 <tr>
-                    <td class="kg-header-card-content" style="${nodeData.layout === 'split' && nodeData.backgroundSize === 'contain' ? 'padding-top: 0;' : ''}">
+                    ${generateMSOContentWrapper(nodeData) /* creates correct opening td tag for any platform */}
                         <table border="0" cellpadding="0" cellspacing="0" width="100%">
                             <tr>
                                 <td align="${nodeData.alignment}">
@@ -118,6 +187,7 @@ function emailTemplate(nodeData, options) {
                                 ` : ''}
                             </tr>
                         </table>
+                ${generateMSOContentClosing(nodeData) /* mso-only closing tags, no shared markup */}
                     </td>
                 </tr>
             </table>
@@ -209,4 +279,4 @@ function getCardClasses(nodeData) {
     return cardClasses;
 }
 
-module.exports = renderHeaderNodeV2;
+module.exports = renderHeaderNodeV2;

package/core/server/services/lib/magic-link/MagicLink.js

@@ -1,6 +1,7 @@
 const {IncorrectUsageError, BadRequestError} = require('@tryghost/errors');
 const {isEmail} = require('@tryghost/validator');
 const tpl = require('@tryghost/tpl');
+
 const messages = {
     invalidEmail: 'Email is not valid'
 };
@@ -17,6 +18,8 @@ const messages = {
  * @typedef {Object} TokenProvider<T, D>
  * @prop {(data: D) => Promise<T>} create
  * @prop {(token: T) => Promise<D>} validate
+ * @prop {(token: T) => Promise<string | null>} [getIdByToken]
+ * @prop {(tokenId: string, tokenValue: T) => string} [deriveOTC]
  */
 
 /**
@@ -34,6 +37,7 @@ class MagicLink {
      * @param {typeof defaultGetHTML} [options.getHTML]
      * @param {typeof defaultGetSubject} [options.getSubject]
      * @param {object} [options.sentry]
+     * @param {{isSet(name: string): boolean}} [options.labsService]
      */
     constructor(options) {
         if (!options || !options.transporter || !options.tokenProvider || !options.getSigninURL) {
@@ -46,6 +50,7 @@ class MagicLink {
         this.getHTML = options.getHTML || defaultGetHTML;
         this.getSubject = options.getSubject || defaultGetSubject;
         this.sentry = options.sentry || undefined;
+        this.labsService = options.labsService || undefined;
     }
 
     /**
@@ -56,7 +61,8 @@ class MagicLink {
      * @param {TokenData} options.tokenData - The data for token
      * @param {string} [options.type='signin'] - The type to be passed to the url and content generator functions
      * @param {string} [options.referrer=null] - The referrer of the request, if exists. The member will be redirected back to this URL after signin.
-     * @returns {Promise<{token: Token, info: SentMessageInfo}>}
+     * @param {boolean} [options.includeOTC=false] - Whether to send a one-time-code in the email.
+     * @returns {Promise<{token: Token, tokenId: string | null, info: SentMessageInfo}>}
      */
     async sendMagicLink(options) {
         this.sentry?.captureMessage?.(`[Magic Link] Generating magic link`, {extra: options});
@@ -73,14 +79,38 @@ class MagicLink {
 
         const url = this.getSigninURL(token, type, options.referrer);
 
+        let otc = null;
+        if (this.labsService?.isSet('membersSigninOTC') && options.includeOTC) {
+            try {
+                otc = await this.getOTCFromToken(token);
+            } catch (err) {
+                this.sentry?.captureException?.(err);
+                otc = null;
+            }
+        }
+
         const info = await this.transporter.sendMail({
             to: options.email,
-            subject: this.getSubject(type),
-            text: this.getText(url, type, options.email),
-            html: this.getHTML(url, type, options.email)
+            subject: this.getSubject(type, otc),
+            text: this.getText(url, type, options.email, otc),
+            html: this.getHTML(url, type, options.email, otc)
         });
 
-        return {token, info};
+        // return tokenId so we can pass it as a reference to the client so it
+        // can pass it back as a reference when verifying the OTC. We only do
+        // this if we've successfully generated an OTC to avoid clients showing
+        // a token input field when the email doesn't contain an OTC
+        let tokenId = null;
+        if (this.labsService?.isSet('membersSigninOTC') && otc) {
+            try {
+                tokenId = await this.getIdFromToken(token);
+            } catch (err) {
+                this.sentry?.captureException?.(err);
+                tokenId = null;
+            }
+        }
+
+        return {token, tokenId, info};
     }
 
     /**
@@ -99,6 +129,38 @@ class MagicLink {
         return this.getSigninURL(token, type, options.referrer);
     }
 
+    /**
+     * getIdFromToken
+     *
+     * @param {Token} token - The token to get the id from
+     * @returns {Promise<string|null>} id - The id of the token
+     */
+    async getIdFromToken(token) {
+        if (typeof this.tokenProvider.getIdByToken !== 'function') {
+            return null;
+        }
+
+        const id = await this.tokenProvider.getIdByToken(token);
+        return id;
+    }
+
+    /**
+     * getOTCFromToken
+     *
+     * @param {Token} token - The token to get the otc from
+     * @returns {Promise<string|null>} otc - The otc of the token
+     */
+    async getOTCFromToken(token) {
+        const tokenId = await this.getIdFromToken(token);
+
+        if (!tokenId || typeof this.tokenProvider.deriveOTC !== 'function') {
+            return null;
+        }
+
+        const otc = await this.tokenProvider.deriveOTC(tokenId, token);
+        return otc;
+    }
+
     /**
      * getDataFromToken
      *
@@ -117,13 +179,19 @@ class MagicLink {
  * @param {URL} url - The url which will trigger sign in flow
  * @param {string} type - The type of email to send e.g. signin, signup
  * @param {string} email - The recipient of the email to send
+ * @param {string} otc - Optional one-time-code
  * @returns {string} text - The text content of an email to send
  */
-function defaultGetText(url, type, email) {
+function defaultGetText(url, type, email, otc) {
     let msg = 'sign in';
     if (type === 'signup') {
         msg = 'confirm your email address';
     }
+
+    if (otc) {
+        return `Enter the code ${otc} or click here to ${msg} ${url}. This msg was sent to ${email}`;
+    }
+
     return `Click here to ${msg} ${url}. This msg was sent to ${email}`;
 }
 
@@ -133,13 +201,19 @@ function defaultGetText(url, type, email) {
  * @param {URL} url - The url which will trigger sign in flow
  * @param {string} type - The type of email to send e.g. signin, signup
  * @param {string} email - The recipient of the email to send
+ * @param {string} otc - Optional one-time-code
  * @returns {string} HTML - The HTML content of an email to send
  */
-function defaultGetHTML(url, type, email) {
+function defaultGetHTML(url, type, email, otc) {
     let msg = 'sign in';
     if (type === 'signup') {
         msg = 'confirm your email address';
     }
+
+    if (otc) {
+        return `Enter the code ${otc} or <a href="${url}">click here to ${msg}</a> This msg was sent to ${email}`;
+    }
+
     return `<a href="${url}">Click here to ${msg}</a> This msg was sent to ${email}`;
 }
 
@@ -147,12 +221,18 @@ function defaultGetHTML(url, type, email) {
  * defaultGetSubject
  *
  * @param {string} type - The type of email to send e.g. signin, signup
+ * @param {string} otc - Optional one-time-code
  * @returns {string} subject - The subject of an email to send
  */
-function defaultGetSubject(type) {
+function defaultGetSubject(type, otc) {
     if (type === 'signup') {
         return `Signup!`;
     }
+
+    if (otc) {
+        return `Your signin verification code is ${otc}`;
+    }
+
     return `Signin!`;
 }
 

package/core/server/services/members/SingleUseTokenProvider.js

@@ -1,5 +1,7 @@
 // @ts-check
 const {ValidationError} = require('@tryghost/errors');
+const crypto = require('node:crypto');
+const {hotp} = require('otplib');
 
 class SingleUseTokenProvider {
     /**
@@ -8,12 +10,14 @@ class SingleUseTokenProvider {
      * @param {number} dependencies.validityPeriod - How long a token is valid for from it's creation in milliseconds.
      * @param {number} dependencies.validityPeriodAfterUsage - How long a token is valid after first usage, in milliseconds.
      * @param {number} dependencies.maxUsageCount - How many times a token can be used.
+     * @param {string} [dependencies.secret] - Secret for generating and verifying OTP codes.
      */
-    constructor({SingleUseTokenModel, validityPeriod, validityPeriodAfterUsage, maxUsageCount}) {
+    constructor({SingleUseTokenModel, validityPeriod, validityPeriodAfterUsage, maxUsageCount, secret}) {
         this.model = SingleUseTokenModel;
         this.validityPeriod = validityPeriod;
         this.validityPeriodAfterUsage = validityPeriodAfterUsage;
         this.maxUsageCount = maxUsageCount;
+        this.secret = secret;
     }
 
     /**
@@ -106,6 +110,62 @@ class SingleUseTokenProvider {
             return {};
         }
     }
+
+    /**
+     * @private
+     * @method deriveCounter
+     * Derives a counter from a token ID and value
+     *
+     * @param {string} tokenId
+     * @param {string} tokenValue
+     * @returns {number}
+     */
+    deriveCounter(tokenId, tokenValue) {
+        const msg = `${tokenId}|${tokenValue}`;
+        const digest = crypto.createHash('sha256').update(msg).digest();
+        return digest.readUInt32BE(0);
+    }
+
+    /**
+     * @method deriveOTC
+     * Derives an OTC (one-time code) from a token ID and value
+     *
+     * @param {string} tokenId - Token ID
+     * @param {string} tokenValue - Token value
+     * @returns {string} The generated one-time code
+     */
+    deriveOTC(tokenId, tokenValue) {
+        if (!this.secret) {
+            throw new ValidationError({
+                message: 'Cannot derive OTC: secret not configured'
+            });
+        }
+
+        if (!tokenId || !tokenValue) {
+            throw new ValidationError({
+                message: 'Cannot derive OTC: tokenId and tokenValue are required'
+            });
+        }
+
+        const counter = this.deriveCounter(tokenId, tokenValue);
+        return hotp.generate(this.secret, counter);
+    }
+
+    /**
+     * @method getIdByToken
+     * Retrieves the ID associated with a given token.
+     *
+     * @param {string} token - The token to look up.
+     * @returns {Promise<string|null>} The ID if found, or null if not found or on error.
+     */
+    async getIdByToken(token) {
+        try {
+            const model = await this.model.findOne({token});
+            return model ? model.get('id') : null;
+        } catch (err) {
+            return null;
+        }
+    }
 }
 
 module.exports = SingleUseTokenProvider;

package/core/server/services/members/api.js

@@ -57,7 +57,8 @@ function createApiInstance(config) {
                 SingleUseTokenModel: models.SingleUseToken,
                 validityPeriod: MAGIC_LINK_TOKEN_VALIDITY,
                 validityPeriodAfterUsage: MAGIC_LINK_TOKEN_VALIDITY_AFTER_USAGE,
-                maxUsageCount: MAGIC_LINK_TOKEN_MAX_USAGE_COUNT
+                maxUsageCount: MAGIC_LINK_TOKEN_MAX_USAGE_COUNT,
+                secret: settingsCache.get('members_email_auth_secret')
             })
         },
         mail: {
@@ -75,7 +76,7 @@ function createApiInstance(config) {
                     return ghostMailer.send(msg);
                 }
             },
-            getSubject(type) {
+            getSubject(type, otc) {
                 const siteTitle = settingsCache.get('title');
                 switch (type) {
                 case 'subscribe':
@@ -88,10 +89,14 @@ function createApiInstance(config) {
                     return `📫 ${t(`Confirm your email update for {siteTitle}!`, {siteTitle, interpolation: {escapeValue: false}})}`;
                 case 'signin':
                 default:
-                    return `🔑 ${t(`Secure sign in link for {siteTitle}`, {siteTitle, interpolation: {escapeValue: false}})}`;
+                    if (otc) {
+                        return `🔑 ${t('Your verification code for {siteTitle}', {siteTitle, interpolation: {escapeValue: false}})}`;
+                    } else {
+                        return `🔑 ${t(`Secure sign in link for {siteTitle}`, {siteTitle, interpolation: {escapeValue: false}})}`;
+                    }
                 }
             },
-            getText(url, type, email) {
+            getText(url, type, email, otc) {
                 const siteTitle = settingsCache.get('title');
                 switch (type) {
                 case 'subscribe':
@@ -162,10 +167,14 @@ function createApiInstance(config) {
                         `;
                 case 'signin':
                 default:
+                    /* eslint-disable indent */
                     return trimLeadingWhitespace`
                         ${t(`Hey there,`)}
 
-                        ${t('Welcome back! Use this link to securely sign in to your {siteTitle} account:', {siteTitle, interpolation: {escapeValue: false}})}
+                        ${otc
+                            ? `${t('Your verification code for {siteTitle}', {siteTitle, interpolation: {escapeValue: false}})}: ${otc}\n\n${t('Or use this link to securely sign in', {interpolation: {escapeValue: false}})}:`
+                            : `${t('Welcome back! Use this link to securely sign in to your {siteTitle} account:', {siteTitle, interpolation: {escapeValue: false}})}`
+                        }
 
                         ${url}
 
@@ -177,10 +186,11 @@ function createApiInstance(config) {
 
                         ${t('Sent to {email}', {email})}
                         ${t('If you did not make this request, you can safely ignore this email.')}
-                        `;
+                    `;
+                    /* eslint-enable indent */
                 }
             },
-            getHTML(url, type, email) {
+            getHTML(url, type, email, otc) {
                 const siteTitle = settingsCache.get('title');
                 const siteUrl = urlUtils.urlFor('home', true);
                 const domain = urlUtils.urlFor('home', true).match(new RegExp('^https?://([^/:?#]+)(?:[/:?#]|$)', 'i'));
@@ -197,7 +207,7 @@ function createApiInstance(config) {
                     return updateEmail({t, url, email, siteTitle, accentColor, siteDomain, siteUrl});
                 case 'signin':
                 default:
-                    return signinEmail({t, url, email, siteTitle, accentColor, siteDomain, siteUrl});
+                    return signinEmail({t, url, otc, email, siteTitle, accentColor, siteDomain, siteUrl});
                 }
             }
         },

package/core/server/services/members/emails/signin.js

@@ -1,10 +1,14 @@
-module.exports = ({t, siteTitle, email, url, accentColor = '#15212A', siteDomain, siteUrl}) => `
+/* eslint-disable indent */
+module.exports = ({t, siteTitle, email, url, otc, accentColor = '#15212A', siteDomain, siteUrl}) => `
 <!doctype html>
 <html>
   <head>
     <meta name="viewport" content="width=device-width">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>🔑 ${t('Secure sign in link for {siteTitle}', {siteTitle, interpolation: {escapeValue: false}})}</title>
+    ${otc
+        ? `<title>🔑 ${t('Your verification code for {siteTitle}', {siteTitle, interpolation: {escapeValue: false}})}</title>`
+        : `<title>🔑 ${t('Secure sign in link for {siteTitle}', {siteTitle, interpolation: {escapeValue: false}})}</title>`
+    }
     <style>
     /* -------------------------------------
         RESPONSIVE AND MOBILE FRIENDLY STYLES
@@ -117,7 +121,36 @@ module.exports = ({t, siteTitle, email, url, accentColor = '#15212A', siteDomain
                     <tr>
                       <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">
                         <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 20px; color: #15212A; font-weight: bold; line-height: 24px; margin: 0; margin-bottom: 15px;">${t('Hey there,')}</p>
-                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; color: #3A464C; font-weight: normal; margin: 0; line-height: 24px; margin-bottom: 32px;">${t('Welcome back! Use this link to securely sign in to your {siteTitle} account:', {siteTitle, interpolation: {escapeValue: false}})}</p>
+                        ${otc ?
+                        `<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; color: #3A464C; font-weight: normal; margin: 0; line-height: 24px; margin-bottom: 24px;">${t(`Welcome back! Here's your code to sign in to {siteTitle}. For your security, it's valid for 24 hours`, {siteTitle, interpolation: {escapeValue: false}})}:</p>
+                        <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; margin-bottom: 32px;">
+                          <tbody>
+                            <tr>
+                              <td style="padding: 16px; background-color: #F4F5F6; border-radius: 8px; text-align: center; vertical-align: middle;" valign="middle">
+                                <h2 style="text-align: center; vertical-align: center; letter-spacing: 5px; font-size: 24px; color: #15212A; font-weight: 600; line-height: 24px; margin: 0;">${otc}</h2>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; color: #3A464C; font-weight: normal; margin: 0; line-height: 24px; margin-bottom: 24px;">${t('Or, skip the code and log in directly')}:</p>
+                        <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
+                          <tbody>
+                            <tr>
+                              <td align="center" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; vertical-align: top; padding-bottom: 35px;">
+                                <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
+                                  <tbody>
+                                    <tr>
+                                      <td align="center" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; vertical-align: top; background-color: ${accentColor}; border-radius: 5px; text-align: center;"> <a href="${url}" target="_blank" style="display: inline-block; color: #ffffff; background-color: ${accentColor}; border: solid 1px ${accentColor}; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 16px; font-weight: normal; margin: 0; padding: 9px 22px 10px; border-color: ${accentColor};">${t('Sign in now')}</a> </td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; color: #3A464C; font-weight: normal; margin: 0; line-height: 24px;">${t('Alternatively you can copy and paste this URL to your browser')}:</p>`
+                        :
+                        `<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; color: #3A464C; font-weight: normal; margin: 0; line-height: 24px; margin-bottom: 32px;">${t('Welcome back! Use this link to securely sign in to your {siteTitle} account:', {siteTitle, interpolation: {escapeValue: false}})}</p>
                         <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
                           <tbody>
                             <tr>
@@ -136,7 +169,8 @@ module.exports = ({t, siteTitle, email, url, accentColor = '#15212A', siteDomain
                         <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; color: #3A464C; font-weight: normal; line-height: 24px; margin: 0; margin-bottom: 11px;">${t('For your security, the link will expire in 24 hours time.')}</p>
                         <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; color: #3A464C; font-weight: normal; line-height: 24px; margin: 0; margin-bottom: 30px;">${t('See you soon!')}</p>
                         <hr/>
-                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; color: #3A464C; font-weight: normal; margin: 0; line-height: 24px;">${t('You can also copy & paste this URL into your browser:')}</p>
+                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; color: #3A464C; font-weight: normal; margin: 0; line-height: 24px;">${t('You can also copy & paste this URL into your browser:')}</p>`
+                        }
                         <p style="word-break: break-all; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 22px; margin-top:0; color: #3A464C;">${url}</p>
                       </td>
                     </tr>

package/core/server/services/members/members-api/controllers/RouterController.js

@@ -626,7 +626,12 @@ module.exports = class RouterController {
             if (emailType === 'signup' || emailType === 'subscribe') {
                 await this._handleSignup(req, normalizedEmail, referrer);
             } else {
-                await this._handleSignin(req, normalizedEmail, referrer);
+                const signIn = await this._handleSignin(req, normalizedEmail, referrer);
+
+                if (this.labsService.isSet('membersSigninOTC') && signIn.tokenId) {
+                    res.writeHead(201, {'Content-Type': 'application/json'});
+                    return res.end(JSON.stringify({otc_ref: signIn.tokenId}));
+                }
             }
 
             res.writeHead(201);
@@ -679,7 +684,13 @@ module.exports = class RouterController {
     }
 
     async _handleSignin(req, normalizedEmail, referrer = null) {
-        const {emailType} = req.body;
+        const {emailType, otc} = req.body;
+
+        let includeOTC = false;
+
+        if (this.labsService.isSet('membersSigninOTC') && (otc === true || otc === 'true')) {
+            includeOTC = true;
+        }
 
         const member = await this._memberRepository.get({email: normalizedEmail});
 
@@ -690,7 +701,7 @@ module.exports = class RouterController {
         }
 
         const tokenData = {};
-        return await this._sendEmailWithMagicLink({email: normalizedEmail, tokenData, requestedType: emailType, referrer});
+        return await this._sendEmailWithMagicLink({email: normalizedEmail, tokenData, requestedType: emailType, referrer, includeOTC});
     }
 
     /**

package/core/server/services/members/members-api/members-api.js

@@ -158,7 +158,8 @@ module.exports = function MembersAPI({
         getText,
         getHTML,
         getSubject,
-        sentry
+        sentry,
+        labsService
     });
 
     const paymentsService = new PaymentsService({
@@ -207,7 +208,7 @@ module.exports = function MembersAPI({
 
     const users = memberRepository;
 
-    async function sendEmailWithMagicLink({email, requestedType, tokenData, options = {forceEmailType: false}, referrer = null}) {
+    async function sendEmailWithMagicLink({email, requestedType, tokenData, options = {forceEmailType: false}, referrer = null, includeOTC = false}) {
         let type = requestedType;
         if (!options.forceEmailType) {
             const member = await users.get({email});
@@ -217,7 +218,7 @@ module.exports = function MembersAPI({
                 type = 'signup';
             }
         }
-        return magicLinkService.sendMagicLink({email, type, tokenData: Object.assign({email, type}, tokenData), referrer});
+        return magicLinkService.sendMagicLink({email, type, tokenData: Object.assign({email, type}, tokenData), referrer, includeOTC});
     }
 
     /**