How do I make a Secret Key-like field such that 1Password recognises it?

danielbrauer

I've got a login system that uses a secret key, like 1Password. In browsers on macOS, 1Password has no trouble filling out the secret key. On iOS, though, it acts like the field isn't there.

I noticed that the Secret Key field on the 1Password website works fine with 1Password on iOS. It has the following attributes:

<input type="text" id="account-key" autocapitalize="characters" autocorrect="off" spellcheck="false" data-onepassword-section-title="Security" data-onepassword-section-field-title="Secret Key" data-onepassword-section-field-value="" data-onepassword-section-field-kind="concealed" class="_2skFDDY1O4ZC3Hb2zILqsP" value="">

I tried adding all the data-* fields to my field, but 1Password still ignores it. What might I be missing?

---

1Password Version: iOS 7.7
Extension Version: Not Provided
OS Version: Not Provided
Sync Type: Not Provided

ag_ana

Hi @danielbrauer! Welcome to the forum!

Can you try adding a field labeled Secret Key in this 1Password item?

For information on how to create custom fields:

Customize your 1Password items

danielbrauer

Hi @ag_ana, thanks for the reply.

If I manually add a Secret Key field to the 1Password item, then 1Password on macOS fills it out. However, it doesn’t get filled out on iOS.

ag_yaron

Hey @danielbrauer ,

The attributes you've shared here are from our website's login page. Can you please share the attributes of the field you'd like to autofill with 1Password (on your security system's login page)? It will help us give you more educated suggestions on how to name a custom field to increase the chances of it working correctly. :)

danielbrauer

Of course! Right now it looks like this (since adding the data-onepassword-* attributes didn't change anything):

<input placeholder="Secret Key" type="text" value="">

The current live form is here: https://insteadapp.com/login

Please note this is my first web site, and I'm really open to any pointers on standards, etc. that I might be missing.

ag_yaron

Hey @danielbrauer ,
Thanks for providing the actual page with the form on it!

So the issue is that the field doesn't have an ID or a name, which is what we rely on in most cases when using custom fields in a login item. So the short answer would be to add an ID attribute and give it a proper name (e.g. id="secretKey", and then add a custom field called secretKey in your login item).

The long answer (and the one you should use to improve your skills and understanding of the subject): I'd suggest you take a look at these resources, which I'm sure you'll find extremely valuable when building websites (and forms in particular):

• How to build a compatible form: https://support.1password.com/compatible-website-design/
• Example forms: https://fill.dev/
• The HTML autofill spec: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

danielbrauer

Thanks very much for the explanation, and the documentation links. I've added ids to each field. If I fill out the form and let 1Password save it when I submit, it is then able to fill out all three fields on future attempts. However, I'm still encountering some problems:

1. Every time I submit the form, 1Password asks if I want to update the entry even if nothing has changed.
2. If I use a previously saved entry (without a secret key) and then add a secret key myself before submitting, 1Password asks to update the entry (this is expected). However, it does not actually add anything to the entry, and still won't fully fill out the form for that entry.

I've got a development version available here if you would like to look at it:

https://instead-dev.herokuapp.com/login

Feel free to create users, log in, or fail login attempts as much as you need to. (I think failing login attempts should be sufficient for testing the above scenarios)

danielbrauer

And if you don't want to look at it (which I totally understand!), what might cause 1Password to think form details have changed, but then miss them even if they have? I'm not doing anything weird like changing field IDs, or removing fields. (the only dynamically removed field is hidden with display:hide)

ag_yaron

Hey @danielbrauer ,
I'm glad to hear you found these resources helpful :)

I think you might be encountering a bug if you're using 1Password 7 for Mac, in which it will ask to udpate/save a new login even though nothing has changed on the page.
We've already fixed this in the latest beta, if you'd like to try it: https://support.1password.com/betas/

danielbrauer

Sorry, I should've mentioned the version I'm using. I already have the beta because I'm on an M1 Mac:

1Password 7
Version 7.7.1.BETA-7 (70701007)
1Password Beta

ag_yaron

Thanks for the update @danielbrauer .

I tested it again with 7.7.1 Beta-7 on Chrome and it doesn't seem to nag me with updating my login: http://recordit.co/dlO2UQrXJ1
Can you provide me with step-by-step instructions on how to replicate the issue?

danielbrauer

You're right, it works for me in Chrome as well! Doing exactly what you did in Safari Version 14.0.3 (16610.4.3.1.4) causes an update prompt though.

ag_yaron

Hmm, Safari is a different beast, but after some testing around I think I found something.

When I hit Enter to log in (after autofilling), Safari doesn't prompt me if I want to save/update the login. However if I click with the mouse on the "Login" button, then it triggers 1Password's save prompt.

I'm not sure what exactly is happening behind the scenes when you click the Login button there. Do you have any events triggered that might cause this? Try disabling any and all events/error messages (or messages in general) and see if that causes the prompt to stop from showing.

danielbrauer

The Login button is a submit button, so I think it should do exactly the same thing as hitting enter. I'm no longer able to reproduce the issue on my development server, though, so I'm not sure what's going on.

ag_yaron

We've encountered instances before where clicking a login button would somehow modify the username/password fields in a way that would trigger 1Password to think something's different so it would ask if you want to save/update the changes, but hitting Enter does not trigger it.

Strange that it was resolved on it own, but I'm glad things are working as expected now :)

danielbrauer

Thanks again for the reply. I've been testing a bit more, and I currently have a version on the dev deployment which has literally no scripts bound to the form. Nothing on change or submit.

Safari seems to get into two different states:

1. No 1Password prompts at all. I assume this is another bug, or some situation Safari gets itself into where 1Password loses contact. In any case, I don't think it's related to the issue with 1Password and my page. Reloading usually gets Safari into the next state:
2. 1Password properly prompts for new info, but also prompts to update info that hasn't changed on submit.

Your observation is correct: hitting enter on the last field does not trigger a prompt. I also noticed that the last field doesn't get a 1Password icon in it. I assume the missing icon is related to the lack of prompt on enter. Could it also be related to the prompt on submit?

ag_yaron

Thanks for the update @danielbrauer .

No 1Password prompts at all. I assume this is another bug, or some situation Safari gets itself into where 1Password loses contact. In any case, I don't think it's related to the issue with 1Password and my page

This does seem like an unrelated glitch. If you find specific steps to reproduce this on demand, please let me know.

1Password properly prompts for new info, but also prompts to update info that hasn't changed on submit.

I am able to reproduce this as well, not sure what triggers 1Password there. I'll ask one of our developers to take a look and see if they can find anything.

I also noticed that the last field doesn't get a 1Password icon in it. I assume the missing icon is related to the lack of prompt on enter. Could it also be related to the prompt on submit?

This is not related. 1Password only shows up in usernames/passwords/emails/credit cards fields. Any other text field is considered unwanted and, as we learned, it might be intrusive to show 1Password in it. 1Password behaves correctly in that field by not showing up :)

danielbrauer

Makes sense. Thanks for looking into this, and passing it on!

Nhat_Nguyen

@danielbrauer

You are very welcome. Please feel free to give us a shout if you need anything and have a great week.

ag_yaron

Hey @danielbrauer ,

It seems there's something a bit off in 1Password and Safari at the moment that may trigger the save prompt by mistake. We're looking into it, so it's not your website's fault :)

danielbrauer

Thanks for the update! Let me know if there's any more information I can provide.

ag_yaron

Appreciate it :+1: