Web Authentication APIs

Authentication Concepts

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
Web Authentication APIs

Check out a free preview of the full Web Authentication APIs course

The "Authentication Concepts" Lesson is part of the full, Web Authentication APIs course featured in this preview video. Here's what you'd learn in this lesson:

Max explains authentication, or authn verifies a user's or service's identity. Some authentication techniques include passing credentials, two-factor or multi-factor authentication, JSON web tokens, one-time passwords, and public key cryptography.


Transcript from the "Authentication Concepts" Lesson

>> Let's start talking then about authentication. So, the first thing that we need, is to separate authentication from authorization. So, today we are going to be focusing on authentication. And, okay, what's the difference? So, authentication has to do with, validating the user's identity. Users, or systems identity. Sometimes it's not a person, it can be a system that is identifying itself over another system.

But most of the time on the web we are talking about persons, users, okay? Authenticating in our websites or web apps or progressive web apps. Authorization has to do with what permissions and privileges you have after you were authenticated. Sometimes authorization also has to do with your user level and also it has to do with how the authorization token is being stored, client side or server side.

If you have ever heard about the authentication token, for example, it has to do with that, with authorization. So, we will cover some basic ideas of that, but 95% of today's workshops, it's about authentication and not authorization. So we won't be discussing Access Control List or how you can connect to Microsoft security systems to actually get current user's credentials from the OS itself or things like that, right?

So, we will be just talking about how to register users in our websites, how to login users in our websites and web apps. And how to get them back in our website with the best possible user experience, right? So, quickly authentication or often, verifies the identity of a user of or a service, okay?

Within that umbrella, we will be talking about the web, okay, of course you also have authentication on native apps on each platform is different. But we will see, by the end of today's course that even on native apps, we can actually leverage everything that we will learn today.

Because, for example, Web Authentication, the API that we will cover later today, is available also on Native Android, Native iOS, Native MacOS. The same thing, of course they have a Native API, but it's also the same Web Authentication mechanism, so the same server. And the server is the same, we are just going to change the client and instead of JavaScript we'll probably write Swift code or Kotlin code in the case of Android.

So, some concepts, just to clarify some concepts that we won't cover deeply during the day, but maybe we mentioned the concept. So credentials, that's simple, but actually credential is, whatever is needed to identify that user server side. Like on a standard normal credential is a username and password.

So it's a pair of username and password, that's the credential. But it can be something else, okay? So we don't know yet how biometric authentication works, but we may say that our face can be also credential. It's actually wrong, that the future is wrong, but for now let's say that, to give an idea of other kind of credentials that we might have.

So single sign on, so probably concept that you have heard SSO. This is a way that we have, it's a sign on, okay, but it has to do more with authorization than with authentication. The idea is that, to authenticate the user with the same credentials on different websites or different web apps.

I mean, in your company you might have different web apps. Well, the idea is that If the user is logged in, in web A, it may also be logged in automatically B, C and D. Okay, that's kind of the idea of single sign on, okay? So, two-factor authentication, 2FA, in case you heard that term.

The idea is that by default and we will start with that after these slides. By default, we have one factor authentication. I mean, if you have username and password in a login form, that's one factor, your username and password. The idea is that we can add more. Like, apart from that, also I can send you an SMS code that probably you're used to that.

I mean, broad you have a banking application or website sometimes they will send you a code through a text message, or SMS, or WhatsApp, or email okay? So those are two-factor authentication, and later, we will see how you can attach those solutions to your project. Multi-factor authentication, MFA, is kind of another term for two-factor instead of two is more than two or two or more, okay, it's just that.

So, because of security sometimes, we won't add as many factors us we can because the thing is that, if I need to login into my bank account and the bank has my phone number. What happens if my phone number is stolen by let's say hacker, hacker is not the right term, but let's say hacker for now.

So, yeah, well, maybe I want another factor. So it can be my fingertip on a phone, it can be my face, it can be a USB key. So there are many other factors that I can add. So initially, websites were adding support for two factor authentication and now, most of them, it's multifactor.

So you have a manager where you can actually add more, or add as many as you want or as many as you have, okay? So OAuth 2.0, it's actually, it's not actually part of authentication, it's more part of authorization, okay? And it's the way after the user has been authenticated, how can you keep that user logged in websites, also native apps?

And OAuth 2.0 is a login flow, where you can actually login in a third party server. For example, when you go to a website and there is a button saying, log in with Facebook, log in with GitHub. And then you click there, you go to the GitHub page, you log in at GitHub.com and then you come back to the website.

And you are logged in in that non-GitHub website, okay? That's typically using OAuth 2.0. JWT, JSON Web Token, we will see one later, but this also has to do more with authorization. The idea is that, how a website will give me credential information or metadata about current user.

Well, is it a JSON? Is it like a comma separated value? Well, there is a standard known as JSON Web Token that we will mention later, that is just typically a string. So it's a string that is kind of encoded in this format. So it's a format where we can encode metadata for credentials, okay?

So that's JSON Web Token. One Time Password, OTP, okay, is another term that we may be using later. This is when you receive a code by SMS or a code by email that then you need to copy and paste in the website to confirm that that's your phone or that your email address.

Well, that's that's known as OTP, One Time Password, okay? And the OTP concept is also used these days for something that we will mention later known as magic links. Have you heard about magic links? Like when you get to your website and some websites are offering you a magic link.

And there you wonder, what's a magic link? Well, a way to login into the website without the password. So it's one of the password less mechanisms these days. And it's using this idea known as One Time Password. And by the way, I'm not sure if you know there is an API today.

It's called Web OTP that we may mention later. So it's an API where you can actually in JavaScript, you can read SMSS that are coming using OTP with the code. So you can read the code in JavaScript. So you don't need to wait for the user to open the messages' app and copy and paste the code.

JavaScript can actually read the code if you follow some guidelines, that's web OTP. And finally, the last concept we will mention this many times, Public Key Cryptography. So, the idea here is that maybe you have heard about this, I'm not sure if you understand how that works. We are not going to get here today too deep into the internals on how this these things works internally or mathematically.

But actually what happens is that, we will create two keys, a public key and a private key that they are tied together with some algorithm. And the public key can be public, so it can be anywhere, it can be in local storage in a server, anywhere. And the private key is actually the one that is secret and no one will actually get, okay?

So, we will see this in action later and how it works with authentication. Do you have any questions at this point on any of these concepts? Yeah.
>> Is a touch ID or fingerprint scanner needed to test biometric authentication?
>> Well, by definition biometric means it's something about your body.

So if the question is, do we need to have a device for today's workshop to actually test that, the answer is no, we don't need that. In fact, we will see that the API that let us use biometrics also works with other ideas, not just with biometrics. So, you don't need to have like a phone with fouch ID or face ID or Androids biometric authentication.

You don't need that to test the code, okay? You will be able to test the code with other techniques anyway. And also we will talk about simulation and debugging tools later.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now