Developer documentation for TOTP codes missing

martenlehmann · March 2023

There's documentation on how to "Design your website to work best with 1Password", but unfortunately it doesn't mention form inputs for TOTP codes. We had been using

<input type="text" ... autocomplete="one-time-code">

yet for some reason the autocomplete only worked in Firefox, not in Chrome. When we added inputmode="numeric" it worked in Chrome as well. How comes it's handled differently between browsers? Is 1Password focussing on the inputmode attribute more than on the autocomplete attribute? I didn't verify with other password managers yet. Could the documentation please be extended accordingly?

1Password Version: Not Provided
Extension Version: Not Provided
OS Version: Not Provided
Browser:_ Not Provided

Joy_1P · March 2023

Hey @martenlehmann, thanks for reaching out about this. While the process that we use to determine if a field should be filled can be quite complex, I agree that the documentation could be more detailed. I can leave feedback about that to the team here.

In the meantime, what is the URL to your form? It would be helpful for us to review the form and interact with it so that we can better understand what is going on.

If it's not possible for us to create an account to set up TOTP, then we'd like for you to share the HTML code to the form with us. You can copy/paste the code here or email it to us at support+forum@1password.com.

With your email please include:

A link to this thread: https://1password.community/discussion/138764/developer-documentation-for-totp-codes-missing#latest
Your forum username: martenlehmann

If you send an email, you should receive an automated reply from our BitBot assistant with a Support ID number. Please post that number here. Thanks!

martenlehmann · March 2023

As the issue was only regarding the TOTP code, not the regular username / password form, I'm posting the code for this second step only:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Sign in</title>
    <link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">2FA</h3>
        </div>
        <div class="panel-body">
          <form action="/login/" name="login" method="POST" class="form-horizontal">
            <input type="hidden" name="csrf_token" value="...">
            <div class="form-group">
              <label class="col-sm-2 control-label" for="totp_code">Code</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="totp_code" value="" placeholder="6-stelliger Code" autocomplete="one-time-code" inputmode="numeric" autofocus>                
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary" name="action" value="verify">Anmelden</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

As mentioned before inputmode="numeric" helped 1P to fill in the code correctly, whereas autocomplete="one-time-code" wasn't considered.

Developer documentation for TOTP codes missing

Comments