-1

Use case

I have 2 pages, one where users enter their username, after which it's checked whether they are authenticated by an identity provider, or whether they need to provide their password. In the first case, the user is sent to that idendity provider. In the last case, the user is navigated to the 2nd page with a password input.

Problem

I want the browser to remember the username and optionally the password in both cases. It's already working where the user also needs to enter a password, using a hidden username input field on the 2nd page. In this case, the username/password is remembered after page 2, but also autofilled on page 1.

But when the user is authenticated elsewhere, then the browser doesn't autofill the username. It does show a dropdown with previously entered values, though. But I want it to autofill the username the same way it does when a user is authenticated with password.

What I've tried so far

  • add an empty, hidden password input on page 1. Doesn't work.
  • add a password input field to the 1st page with a dummy value and move it offscreen. Why this isn't the solution: the browser asks the user if it should store the username and dummy password. This is ugly, and when the user does need to provide a password, they are asked whether the password should be updated (with the dummy value), every time the user logs in.

I prefer not to use localStorage to implement my own autocomplete. If the browser supports autofilling username only, than that would be nicest, because then the user can also manage it using the browser's credential manager.

Question

How do I get the browser to remember and autofill the username, even when the user never provides a password?

yaba
  • 829
  • 7
  • 11
  • You could put the email string into URL parameters ( [like so](https://stackoverflow.com/questions/22607150/getting-the-url-parameters-inside-the-html-page) ) if you're not wanting to use `localStorage` (But you shouldn't do that with a password!), Alternatively you could use the [autofill attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) on HTML, but it may not work all of the time if the autofill attributes are not set properly (or disabled by the user) – Harrison May 19 '23 at 11:44
  • I don't see how using query parameters solves my problem. You mean I put the username in the url, and ask the user to bookmark it, so that the username gets prefilled? The autocomplete attributes are already working, but the credential manager won't store them, unless the password field is also present and filled (I already have it working for users that also need to provide a password). FYI: The username is remembered without a password, just not by the credential manager. And the credential manager is the one that autofills. – yaba May 19 '23 at 12:51

1 Answers1

-2

Method 1. If the browser doesn't save your username automaticaly, you can store username in localStorage:

localStorage.setItem("username", /*name here*/);

Also you can make it check if username is in localStorage

if(username in localStorage) {
    //do something
} else {
    localStorage.setItem("username", /*username*/)
}

And then you can ask user that account detected and ask to login into it

Method 2. If the browser can store your input, you can add autocomplete="username" attribute to your <input> element

kolibri_king
  • 11
  • 5