DEV Community

Cover image for Better two factor authentication experiences with WebOTP

Better two factor authentication experiences with WebOTP

Phil Nash on December 07, 2022

Two factor authentication (2FA) is a great way to improve the security of user accounts in an application. It helps protect against common issues w...
Collapse
 
geekysrm profile image
Soumya Ranjan Mohanty β€’

This is nice!

Collapse
 
philnash profile image
Phil Nash β€’

Yeah it is! And I hope to see it implemented more!

Collapse
 
naucode profile image
Al - Naucode β€’

Hey, it was a nice read, you got my follow, keep writing!

Collapse
 
philnash profile image
Phil Nash β€’

Thanks very much!

Collapse
 
mobtec profile image
Guilherme β€’

Hi Phil. Does it still work normally for you?

I can't get it to work at all. With the JS code, with your component, with the sender being out of my contacts. The message arrives, but the auth dialog does not appear and, consequently, does not read the message. Weird...

Collapse
 
philnash profile image
Phil Nash β€’

Do you have the domain set up correctly in the SMS that you are sending?

Collapse
 
mobtec profile image
Guilherme β€’

Yes.
@domain.com #123

I`ve tried with your compenent also. Here is my test, if u dont mind to take a look whenever u want: terra.com.br/especial/dsv/form/otp...

Thread Thread
 
philnash profile image
Phil Nash β€’

Do you get errors in the console at all?

Thread Thread
 
mobtec profile image
Guilherme β€’

nothing at all....

Thread Thread
 
philnash profile image
Phil Nash β€’

Your code looks like it should work fine. I don't currently have an Android device to test it out, though I'm also not sure how you trigger the SMS for the form at that link.

What device/browser are you trying this on.

Thread Thread
 
mobtec profile image
Guilherme β€’

Im testing on android/chrome. Im also testing your component here: terra.com.br/especial/dsv/form/otp...

Sometimes I receive the permission dialog, sometimes not. Really weird.

Collapse
 
ecki profile image
Bernd β€’

Thanks good information (I just wish we won’t need it anymore). :)

Collapse
 
meatboy profile image
Meat Boy β€’

I remember when I was implementing for the first time U2F and OTP using browser capabilities. It was so messy. I see in your article OTP is easier now, but what about U2F? Is it any better right now?

Collapse
 
philnash profile image
Phil Nash β€’

While implementing U2F uses the same navigator.credentials.get and navigator.credentials.create methods, I do find that getting the right options to pass is a bit of a mess. There are just the base the methods though, so hopefully someone can build something that makes it easier while retaining the power of it. Especially as the public key credential is also the basis of passkeys, which have the potential to replace passwords.