TOTP token does not work when secret is base 32 encoded

[StevenJL]

When the encoding is done with base32, the TOTP token fails (incorrectly)

Reproduction Steps

import speakeasy from 'speakeasy'
import qrcode from 'qrcode'

var secret = speakeasy.generateSecret();
const otpAuthUrl = speakeasy.otpauthURL({
  secret: secret.base_32,
  label: 'teemo@yordel.org',
  issuer: 'Yordel Inc',
  algorithm: 'sha1',
  digits: 6,
});
const qrCodeImage = await qrcode.toDataURL(otpAuthUrl);

// Now scan the qrCodeImage to Google Authenticator and get the OTP and assign to `otp`

var otp = '123123' // get it from Google Authenticator

const otpIsValid = speakeasy.totp.verify({
  secret: secret.base_32,
  encoding: 'base32',
  algorithm: 'sha1',
  token: otp,
  window: 1,
});

console.log(otpIsValid)
// returns false

Now, contrast this the ascii encoding, which does work

import speakeasy from 'speakeasy'
import qrcode from 'qrcode'

var secret = speakeasy.generateSecret();
const otpAuthUrl = speakeasy.otpauthURL({
  secret: secret.ascii,
  label: 'teemo@yordel.org',
  issuer: 'Yordel Inc',
  algorithm: 'sha1',
  digits: 6,
});
const qrCodeImage = await qrcode.toDataURL(otpAuthUrl);

// Now scan the qrCodeImage to Google Authenticator and get the OTP and assign to `otp`

var otp = '123123' // get it from Google Authenticator

const otpIsValid = speakeasy.totp.verify({
  secret: secret.ascii,
  encoding: 'ascii',
  algorithm: 'sha1',
  token: otp,
  window: 1,
});

console.log(otpIsValid)
// returns true

[StevenJL]

Work-Around

I found a way to still use speakeasy for my TFA feature using base32 encoding (due to legacy reasons).

Instead of relying on speakeasy to generate the secret and otpAuthUrl, you generate these using a combo of crypto, base32 and url.

import crypto from 'crypto'
import base32 from 'hi-base32'
import url from 'url'

const generateBase32Secret = () => {
  var randomBytes = crypto.randomBytes(20)
  const base32String = base32.encode(randomBytes);
  return base32String
}

const base32Secret = generateBase32Secret()

const generateOtpAuthUrl = (base32Secret, label, issuer, digits) => {
  const query = {
    secret: base32Secret,
    issuer: issuer,
    digits: digits,
  }
  return url.format({
    protocol: 'otpauth',
    slashes: true,
    hostname: 'totp',
    pathname: label,
    query: query
  })
}

const otpAuthUrl = generateOtpAuthUrl(base32Secret, 'teemo@yordel.org', 'TopLane', 6)
const qrCode = await qrcode.toDataURL(otpAuthUrl);

// Now scanning the qrCode and adding this new entry in an authenticator app, you can use speakeasy for verifying it.


var otp = '466719' // get this from your authenticator app

const otpIsValid = speakeasy.totp.verify({
  secret: base32Secret
  encoding: 'base32',
  token: otp,
  window: 1,
});

console.log(otpIsValid)
// true