Using 2FA in your Meteor app

createQrCode.js

export const Component = () => {
  const [qrCode, setQrCode] = useState(null);
  
  return (
  	<div>
      <button
        onClick={() => {
          Accounts.generate2faActivationQrCode(
            "My app name", 
         	(err, svg) => {
            	if (err) {
            		console.error("Error getting QR code", err);
            		return;
          		}
            	setQrCode(Buffer.from(svg).toString('base64'));
          })
        }}
      >
        Generate a new code
      </button>     
      
	  <img 
    	width="20"
        src={`data:image/svg+xml;base64,${qrCode}`}
       />
    </div>
  )
 }

loginWithCode.js

<button onClick={() => {
  Meteor.loginWithPasswordAnd2faCode(username, password, code, error => {
    if (error) {
      console.error("Error trying to log in (user with 2fa)", error);
    }
  })}
}>
  Validate and log in
</button>

loginWithPassword.js

<button 
  onClick={() => {
    Meteor.loginWithPassword(username, password, error => {
      if (error) {
        if (error.error === 'no-2fa-code') {
            // send user to a page or show a component 
            // where they can provide a 2FA code
            setShouldAskCode(true);
            return;
        }
        console.error("Error trying to log in (user without 2fa)", error);
      }
    });
  }
}>
  Login
</button>