Report: Implementing Pseudo 2FA for Web Apps using Google Apps Script

// Please set the user's name and password and the sample value of the user.
// To use the sample value is a sample situation for explaining this method.
const userObj = [
  {
    email: "email address 1",
    password: "samplePassword1",
    sampleValue: "sample value 1",
  },
  {
    email: "email address 2",
    password: "samplePassword2",
    sampleValue: "sample value 2",
  },
  {
    email: "email address 3",
    password: "samplePassword3",
    sampleValue: "sample value 3",
  },
  ,
  ,
  ,
];

const limit = 600; // Expiration time of 2FA. Unit is seconds.

// Create key for each user.
const encodeValue_ = ({ email, pass }) =>
  Utilities.base64Encode(JSON.stringify([email, pass]));

// Show main HTML after the login and the confirmation of authorization code.
// If you want to change the returned value for each user, please modify "html.data = user.sampleValue;" of this function.
function showMainHTML_(user) {
  const htmlFilename = "showData";

  const html = HtmlService.createTemplateFromFile(htmlFilename);

  // This is a sample value. Please modify this for your actual situation.
  html.data = user.sampleValue;

  return html;
}

// Generate authorization code. A text of 5 letters.
function generateCode_(c, o) {
  const htmlFilename = "2FA";

  const newCode = Math.random().toString().slice(2, 7);
  c.put(encodeValue_(o), newCode, 3600);
  MailApp.sendEmail({
    to: o.email,
    subject: "Authorization code for 2FA of sample Web Apps.",
    body: `Authorization code is ${newCode}`,
  });
  const html = HtmlService.createTemplateFromFile(htmlFilename);
  html.url = ScriptApp.getService().getUrl();
  html.obj = JSON.stringify(o);
  return html;
}

// Show HTML of login.
function showLoginHTML_(error) {
  const htmlFilename = "login";

  const html = HtmlService.createTemplateFromFile(htmlFilename);
  html.url = ScriptApp.getService().getUrl();
  html.error = error;
  return html;
}

// This is a handler for using 2FA for Web Apps.
function handler_(e) {
  const { email, pass, code } = e.parameter;
  const c = CacheService.getScriptCache();
  let error = false;
  if (email && pass) {
    const user = userObj.find((o) => o.email == email && o.password == pass);
    if (user) {
      if (user.password == pass) {
        const currentCode = c.get(encodeValue_({ email, pass }));
        if (code && currentCode && currentCode == "AUTHORIZED") {
          return showMainHTML_(user);
        } else if (!code || code != "error") {
          return generateCode_(c, { email, pass });
        }
      }
    }
    error = true;
  }
  if (error && code == "error") {
    c.remove(encodeValue_({ email, pass }));
  }
  return showLoginHTML_(
    error
      ? code != "error"
        ? "Login error"
        : "Code error: Code is regenerated. Please log in and check email again."
      : ""
  );
}

// Get current stored code. This function is called from Javascript side.
function getCode(obj) {
  return CacheService.getScriptCache().get(encodeValue_(obj)) || "";
}

// Check inputted code. This function is called from Javascript side.
function checkCode({ email, pass, code }) {
  const c = CacheService.getScriptCache();
  const key = encodeValue_({ email, pass });
  const currentCode = c.get(key);
  if (currentCode && currentCode == code) {
    c.put(key, "AUTHORIZED");
    return true;
  }
  c.remove(key);
  return false;
}

// This is called as Web Apps.
function doGet(e) {
  return handler_(e)
    .evaluate()
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

<p><?!= error ?></p>
<input type="email" id="email" placeholder="Please input your email address." />
<input type="password" id="pass" placeholder="Please input login password." />
<input type="button" value="login" onclick="sample()" />
<script>
  function sample() {
    const url = "<?!= url ?>";
    const [email, pass] = ["email", "pass"].map((e) =>
      document.getElementById(e).value.trim()
    );
    google.script.run
      .withSuccessHandler((code) => {
        window.open(
          code != ""
            ? `${url}?email=${email}&pass=${pass}&code=${code}`
            : `${url}?email=${email}&pass=${pass}`,
          "_top"
        );
      })
      .getCode({ email, pass });
  }
</script>

<p>
  An email including the authorization code was sent to your email address.
  Please check it and input the code to the following input tag.
</p>
<input type="text" id="code" placeholder="Please input your code." />
<input type="button" value="login" onclick="sample()" />
<script>
  function sample() {
    const url = "<?!= url ?>";
    const obj = <?!= obj ?>;
    const code = document.getElementById("code").value.trim();
    obj.code = code;
    google.script.run.withSuccessHandler(e => {
      if (e) {
        window.open(`${url}?code=${obj.code}&email=${obj.email}&pass=${obj.pass}`, "_top");
        return;
      }
      window.open(`${url}?code=error&email=${obj.email}&pass=${obj.pass}`, "_top");
    }).checkCode(obj);
  }
</script>

<?!= data ?>