2

I maintain a login form that is reused across a variety of organizations. Each organization has a different set of required credentials. In some cases, only a single identifier is required. Essentially it's a user name or number, with no password. I realize this fact may strike many as odd, but let's leave that aside. It's a quirk of the domain I work in.

When the login form only contains a single input field I would still like browser's password management features to kick in and offer to save the entered value. I have tried setting autocomplete="username" on the input element as described here, but that does not seem to work.

Can this be done? Do any browsers support it? I can't find a clear answer in the documentation for Chrome, Firefox, or Safari. I can always implement it myself using a cookie and a "remember me" checkbox, but I would strongly prefer not to.

Odrade
  • 7,409
  • 11
  • 42
  • 65
  • There is autocomplete property - saw on form, possible on input too see here https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete, probably off for password can help ? – Jan Aug 30 '19 at 08:09
  • Yes, that is what I've tried already. If the only input field is "username" I cannot seem to trigger password managers to store it. That may simply be by design, but that's what I'm trying to learn. – Odrade Aug 30 '19 at 15:55
  • Definitely saw somewhere name w/o password in IE or FF, would tell with autocomplete on in browser settings and if you say no to save login(?). Or in FF or Chrome you can edit them, also some banking apps change the field by JS, so you save asterisks only if you save, but in FF you can change it to real pwd in stored passwords settings. Maybe you need enter to confirm/submit form to activate save feature option(?). – Jan Aug 30 '19 at 16:40
  • While this doesn't directly answer your question, I want to note that you're looking at this backwards: if you have a single token that serves to both identify and authenticate the user, then it's effectively a password, and should be treated like one. (In particular, it needs to be kept confidential like a password, not public like a normal username.) So what you _really_ should be asking is how to make password managers remember a password without a (separate) username. – Ilmari Karonen Oct 10 '19 at 08:20
  • Yes, that's effectively what's happening. This is a sole credential. We don't call it a username internally - I'm not sure why I wrote the question that way. – Odrade Oct 10 '19 at 14:32

3 Answers3

0

This is what I use:

<form action="/action_page.php" autocomplete="on">
 First name:<input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 E-mail: <input type="email" name="email" autocomplete="off"><br>
 <input type="submit">
</form>

You could try this make sure your code is some what similar...

0

I made some tests and figured out that it's possible to use the browser's login autocomplete also for a user only field.

You may use this code for the form and set the position for the password field only if you need to show only the username field (read more at the end of the post, it's needed for Firefox):

<?php
    $passwordFieldPositionAway = '';
    $hidePasswordField = false; // change this accordingly with your needs, e.g. for Firefox set it to true
    if($hidePasswordField)
    {
        $passwordFieldPositionAway = " style='position:absolute;top:-1000px;'";
    }
?>
<html>
<head>
</head>
<body>
    <form id="loginOnlyUsername" action="login.php" method="post">
    <input type="text" name="username" autocomplete="username" placeholder="Username">
    <input name="userPassword" type="password" <?= $passwordFieldPositionAway; ?> placeholder="password" autocomplete="current-password" value="anyString">
    <input type="submit" value="Sign In!">
    </form>
</body>
</html>

Tests I done

First, I modified the form suggested here.

index.php:

<html>
<head>
</head>
<body>
    <form id="login" action="login.php" method="post">
    <input type="text" name='username' autocomplete="username" placeholder='Username'>
    <input name='userPassword' type="password" placeholder='password' autocomplete="current-password">
    <input type="submit" value="Sign In!">
    </form>

    <form id="loginOnlyUsername" action="login.php" method="post">
    <input type="text" name='username' autocomplete="username" placeholder='Username'>
    <input name='userPassword' style='visibility: hidden; display:none;' type="password" placeholder='password' autocomplete="current-password">
    <input type="submit" value="Sign In!">
    </form>
</body>
</html>

login.php:

<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>

Chronium

Here are the steps I done with the Chronium browser:

At the first time I open the form, I insert my credentials:

enter image description here

The browser prompt the dialog to save the credentials:

enter image description here

The PHP page receives these values:

enter image description here

When I reopen the login page, the browser autofill both fields:

enter image description here

I make a login with different credentials:

enter image description here

enter image description here

enter image description here

When reopen the login page, Chronium auto-fills both fields with the latest login data:

enter image description here

About the second form, which have the password field hidden, the browser's behavior is the same as the first form:

enter image description here

and it prompt to save the login also for that form.

Firefox

Firefox behaves differently:

  • it prompt to save the login only if the password field:

    • isn't hidden (with no visibility:hidden nor display:none)
    • the password field contains at least 2 chars
  • It will auto-fill the field if there is only one login saved (in my case I had more logins), otherwise it leaves the selection to the user.

Therefore, to make the user-only login works on Firefox, you may show the password field and prefill it with any string you want. To hide it in Firefox you must position it outside of the user's visible area in the page:

<form id="loginOnlyUsername" action="login.php" method="post">
<input type="text" name='username' autocomplete="username" placeholder='Username'>
<input name='userPassword' type="password" style='position:absolute;top:-1000px;' placeholder='password' autocomplete="current-password" value="anyString">
<input type="submit" value="Sign In!">
</form>

Some info:

  • Chronium version: 77.0.3865.90 (Official Build) snap (a 64 bit)
  • Firefox version: 68.0.2 (64-bit)
  • Operative system: Ubuntu 18.04
user2342558
  • 5,567
  • 5
  • 33
  • 54
0

Include a hidden password input inside your form and set a non-empty value attribute such as "NULL" in the below example. Then the browser asks you for saving your credentials.

<form action="#" method="POST">
    <input type="text" name="username" required>
    <input type="password" name="password" value="NULL" hidden>
    <input type="submit">
</form>
Baptistou
  • 1,749
  • 1
  • 13
  • 24