DEV Community: Passage

Seven Misunderstandings About Passkeys

PassageNick — Wed, 16 Nov 2022 20:33:56 +0000

Rightfully Resistant to Change

Password management is a thing that many people feel very strongly about. Many folks don’t like passwords and hope for a better way. But other folks have a solid system built around their password security and are rightfully very skeptical of systems that claim to improve on what they have. They have good reasons for liking their current setup and are hesitant to change what works for them. That’s wise.

Passkeys Enter the Picture

Thus many people are skeptical of passkeys, the new protocol from the FIDO Alliance that purports to drastically improve the safety, security, and user experience of logging in to websites and mobile applications.

Passkeys have been officially announced by Apple and put into developer builds for Chrome and Android by Google. Microsoft is preparing its version as well. The reason that these three companies are critical to adoption is that they represent the vast majority of devices, computers, browsers, and operating systems. If these three all agree on something, then there is probably something to it.

I Read the Comments

Since both Apple and Google have announced support for passkeys, there have been many articles describing passkeys, how they work, and how the tech giants will support them. Many have been informative, but a few have been, well, confusing.

It is said that you should never read the comments, but I have been. And to say there is some confusion, trepidation, and misconceptions about passkeys is a bit of an understatement.

I’ve written about why we need passkeys, how they work, and why they are a better solution than passwords. To continue that theme, I’m going to write about a few of the misconceptions I see out there about passkeys.

“Will there still be a password somewhere?”

People seem to think that there will still be a password backing things up somewhere in the system. Some say this because they hope it is true as a recovery method, but others are concerned that it is true, recognizing that it wouldn’t really improve the situation.

The WebAuthn protocol does not — and should not — require the use of passwords anywhere in the system. It should not because requiring a password would defeat the purpose and cause the system to continue to be “phishable” and thus no more secure than what we have today. There is no password backup because it isn’t necessary.

Now it may be that as websites and applications migrate to passwordless and passkey-based solutions, they may maintain password authentication. Still, it isn’t required, and it is expected that passwords will eventually go away completely.

“Is Bluetooth required to log in?”

Some articles mistakenly implied that a Bluetooth connection was required to complete a passkey login.

This is not true. While Bluetooth plays a role in securing the transfer of passkey-based authentication between the major tech company’s eco-systems, it is not required for the simple process of logging in. Your phone doesn’t have to be in Bluetooth range to log in on your computer. Your phone does have to be in range if you want to transfer passkeys to or from another device — and this is a security feature.

“I can register my device once, and it will log me in everywhere.”

Some folks have concluded that you can register your phone or computer with Apple, Microsoft, or Google, and it will work everywhere. This led to questions like “What happens when I go to a website that asks me for my password?” It would be nice if that would work that way. However, each website has to implement passwordless technology on its own, and you, as a user, will have to register an account with each site or mobile application just as you do today.

“If a bad guy gets my phone, will they have access to all of my accounts?”

Actually, if a bad actor gets your phone, it is pretty much impossible for them to get much of anything. First, they won’t have your biometric information and thus won’t even be able to unlock your phone. Second, all the secret passkey information is stored in a Trusted Platform Module, specifically designed to hold your passkey secrets in such a way that it is virtually impenetrable. (Okay, maybe the NSA or similar organizations might be able to get into it, but I can’t say for sure…)

So you can rest assured that your phone will not cough up your login information to even the most sophisticated hacker.

*“If I don’t have my phone, am I out of luck?”

People are concerned that if they don’t have their phone while at a friend’s house or a library computer, they won’t be able to log in.

The passkey protocol doesn’t address this situation, but most vendors will — and should — provide a second secure option for logging in. Usually, this is a “magic link” — a one-use, expiring link that logs you in — sent to your email address. Only you have access to your email, so the link will securely log you into any computer worldwide.

“If I lose my phone, am I out of luck?”

This is partially true. Sort of.

One of the benefits of passkeys is that they are promised to be shared across devices within the given ecosystem of each of the big tech companies. This means that if you lose your phone, your passkeys are securely stored (via end-to-end encryption) in the cloud. They can be restored when you get a new phone.

However, you can choose not to share your passkeys into the cloud, and if you do that and you only have one device, then yes, the passkeys will be lost, and you’ll have to re-register with every site you visit.

The normal use case here is that users decide to share their passkeys across their devices via the cloud (in a securely encrypted manner), and thus replacing a phone is not an issue.

“What if my biometrics are compromised?”

Some folks seem concerned that they can’t change their biometrics if they were to be compromised. (You can change your password, but you can’t change your fingerprint…)

These folks are right — you can’t change your biometrics. However, it is not clear what it means exactly for them to be compromised. Your biometrics data never leaves your phone. It is converted to a mathematical hash value and encrypted with a key stored in the TPM. Only your phone with your fingerprint can get the key and verify your fingerprint. Your biometric data can’t be stored and decrypted anywhere except on your phone.

Almost Too Good to be True?

I’m not going to say that passkeys are too good to be true, but I will say that they are a huge step forward in authentication security. If the threat surface of passwords is a vast lake, then the threat surface of passkeys is a small puddle after a short downpour. While no system should be considered impregnable, no one seems to be able to conceive of a way passkeys can be compromised short of quantum computing breaking current encryption schemes.

There are a few corner cases where they might not be acceptable to some people. For instance, biometrics are not protected by America’s Fourth Amendment, but a password is. Another thing to consider is that while Google/Apple/Microsoft won’t ever be able to read your credentials, there is concern that these companies will be able to track the places you register an account. This is why third-party companies like 1Password are looking at ways to provide the passkey storage and transfer service.

Bottom Line: For the overwhelming majority, passkeys are safe, convenient, and work great. While I understand the hesitancy to change things up, this is an instance when change is a win for everyone.

Why Passkeys are Better than Passwords

PassageNick — Mon, 17 Oct 2022 20:03:58 +0000

Maybe you’ve had the feeling — or maybe you’ve imagined it. The feeling of your stomach sinking to the bottom of your belly. That panic you feel the very second you realize that you just entered your login credentials into a fake website. Maybe you realized it right away. Or maybe you realized because you went back the next day and couldn’t log in. Maybe you realized it because your bank account has been cleaned out. However you realized — or imagined — it, it’s not a feeling you ever want to have.

But imagine not having to worry about that ever again.

That’s what passkeys and passwordless authentication can bring you.

Why Passkeys are Better

Every day we grow closer to a passwordless world. We here at Passage are doing what we can to make that happen for everyone. We all carry devices with us that can be used to easily declare who we are, normally via a fingerprint or face scan. All new laptops have fingerprint readers. Passkeys leverage these new technologies to drastically increase the security of your accounts. Apple has introduced passkeys into their eco-system, with Microsoft and Google releasing their versions very soon.

I’ve written about why we must move beyond passwords and how the whole passkey system works. In this post, I will discuss why passkeys are a vastly better solution than passwords. There are many reasons why passkeys are a superior solution, but it all boils down to two things.

Passkeys Share no Secret Information

This is the biggest reason passkeys are much more secure than passwords. With Passkeys, passwords are simply no longer a threat vector.

Passwords account for north of 80% of all security breaches. Passkeys mitigate this threat down to almost nothing. You can’t reuse your passkeys. You don’t have to remember them. They are generated and stored for you, so you don’t have to worry about creating and storing them yourself. You can’t be lured into giving them up because they are unique to a specific website and thus can’t be shared with a phishing website.

Sensitive data associated with each passkey never leaves your device. The information is stored on your phone on a special chip (a Trusted Platform Module) that even the NSA might not be able to crack. If you register with a website using a passwordless solution like Passage, that site gets nothing but a public key, which is useless for cracking open your account. While Apple lets you share your account with others via AirDrop, you couldn’t even share the actual private key with a phishing site if you wanted to.

Passkeys are a Much Better User Experience

Registering for an account on a website can be a hassle. Often you have to think up a password meeting various criteria designed to make it hard to guess. Frequently, users have to context switch away from your site to get a six-digit number from their phone or an email. Over 30% of all online shopping carts are abandoned because of the bother of registering for an account or because users don’t remember their passwords. Password Managers can help the situation, but they can be complicated to use for many. The whole experience needs improving.

Multi-factor authentication (MFA) can improve the security of a password-based system but does so at the cost of decreased user experience. MFA requires the user to switch contexts, usually by going to another application to grab a six-digit number. I know I’ve often fumbled to find my phone to get that one-time password.

Instead, passkey registration requires a biometric system validation — as simple as a fingerprint touch or a glance at a camera — and one-time device approval. After that, logging in is as simple as that biometric validation. Instead of typing complicated passwords and grabbing one-time password codes or checking emails, your users can log in in seconds or less.

Passkeys actually use MFA, requiring you to supply something you have (your device) and something you are (for example, your face or your fingerprint).

Passkeys are only getting better. Ultimately, you will be able to log in without even entering your password or phone number. Instead, the login input box will just know that your device has a Passkey for the given domain and will auto-prompt you.

Let’s Do This

I remember that great feeling when my bank’s mobile application allowed me to log in with my fingerprint instead of typing my complicated (and ultimately not secure, no matter how complex it was) password. It was a freeing moment for sure. You want that for your users when they come to your website or log in to your mobile application, don’t you? Heck, you want that for yourself every time.

In the end, passkeys appear virtually unexploitable and vastly more convenient. Why not give it a try right now?

Building an Angular App with Passwordless Authentication

PassageNick — Fri, 07 Oct 2022 20:02:49 +0000

We here at Passage are all about creating a passwordless world that makes our online lives a whole lot more secure. Angular developers can join that world and quickly integrate Passage’s solution into their applications. I’ll show you how.

Our solution uses the WebAuthn protocol to leverage the biometrics solutions built into their devices (e.g., FaceID, TouchID, Windows Hello, or Android’s fingerprint technology). We’ll create a simple Angular application that only allows authenticated viewers to see a dashboard. Unauthorized viewers will be out of luck.

If you are highly motivated, you can go through the whole demo with me, or if you want to cut to the quick, you can clone our example app from GitHub and jump to the header entitled “Add Passwordless Authentication with Passage.” Either way, you’ll soon see how easy this is for everyone, both for you developer types and your users.

Note: I’ll be assuming that you are pretty familiar with Angular, the Angular CLI, and how things generally work in Angular. If not, Angular.io is a great place to start.

Setup

To create an Angular application, you can run the following at the command line at a command prompt in the directory where you want your application to go:

ng new passage-app

Note: Create the app with the angular router and with regular
CSS Styling

That will create a nice, basic application for you in a subdirectory called passage-app.

So, to include Passage in your application, you are going to want to install it into your application workspace via npm:

npm i @passageidentity/passage-node

That will install our Passage web components, which will enable us to include them later.

Main App Setup

Before we get really rolling, let’s do a little styling. Open up the project’s main CSS file, styles.css, and add the following code to it:

body {
    font-family: sans-serif;
    background-color: #E5E5E5;
    margin: 0;
}

Next, open up the CSS file for the main component — app.component.css — and add this CSS code to it:

.mainContainer {
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    width: 600px;
    min-height: 310px;
    margin: 30px auto;
}
.footer {
    text-align: center;
    font-size: 18px;
}

That will get us started with the styling. We’ll be doing more of that here in a few steps.

The Main Component

Next, we’ll get the main component for our application set up. We’ll insert some HTML, set up the routes, and add some more CSS.

For the app-routing.module.ts file, make it look like this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from 'src/app/home/home.component';
import { DashboardComponent } from 'src/app/dashboard/dashboard.component';

const routes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'dashboard', component: DashboardComponent}
  ];

  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
export class AppRoutingModule { }

This code will set two routes, one for the Home component and one for the Dashboard component.

Add the following to the app.component.css file:

.mainContainer {
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    width: 310px;
    min-height: 310px;
    margin: 30px auto;
}
.footer {
    text-align: center;
    font-size: 18px;
}

and for the app.component.html file, replace the default HTML (there’s a bunch of it) with this:

<banner></banner>
<div class="mainContainer">
    <router-outlet></router-outlet>
</div>
<div class="footer">
    Learn more with our <a href="https://docs.passage.id">Documentation</a> and <a href="https://github.com/passageidentity">Github</a>.      
</div>

That code will display the banner on top, a footer at the bottom, and will place the content chosen by the router in the middle.

Some Components

Next up, we’ll create three components. Run these three calls to the Angular CLI at the command line:

ng generate component home
ng generate component dashboard
ng generate component banner

Let’s set all this up now.

The Home Component

In the home.component.html file, add this HTML:

<passage-auth [appId]="appId"></passage-auth>

<passage-auth [appId]="appId"></passage-auth>

In the home.component.ts file, add the following code:

import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public appId: string = environment.passageAppId;

  constructor() { }

  ngOnInit(): void {
  }
}

And in the home.component.css file:

.mainContainer {
    display: flex;
  }

  .spacer{
    flex-grow: 1;
  }

  .earlyAccessContainer{
    min-width: 325px;
    width: 35%;
    color: white;
    background-color: #27417E;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    display: flex;
    flex-direction: column;
  }

  .title {
    font-weight: 700;
    font-size: 48px;
    margin-top: 65px;
    padding-left: 45px;
    padding-right: 65px;
  }

  .bodyText{
    padding-left: 45px;
    padding-right: 45px;
    padding-bottom: 35px;
    font-size: 24px;
  }

  .authContainer{
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* for shorter 13" dekstop screens */
  @media screen and (max-height: 845px) {
    .title {
      font-size: 40px;
    }
    .bodyText{
      font-size: 20px;
    }
  }

  /* steps to mobile rules begin here */
  @media screen and (max-width: 870px) {

    .mainContainer{
      flex-direction: column;
      width: 100%;
    }

    .earlyAccessContainer{
      min-width: unset;
      width: 100%;
      min-height: 30%;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    .title {
      font-size: 32px;
      margin-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
    }
    .bodyText{
      font-size: 20px;
      padding-left: 30px;
      padding-right: 30px;
      padding-bottom: 15px;
    }

    .authContainer{
      width: 100%;
      height: 100%;
      flex-grow: 1;
      padding-top: 20px;
      padding-left: 0px;
      padding-right: 0px;
    }
  }

  @media screen and (max-width: 670px) {
    .title {
      font-size: 24px;
    }
    .bodyText{
      font-size: 16px;
    }
  }

  @media screen and (max-width: 460px) {
    .earlyAccessContainer{
      min-height: unset;
    }
  }

The Home component doesn’t do anything special — it just holds a single component. That component is a Passage-specific tag, namely <passage-auth>, which will display the Passage web component and do most of the work of registering and authenticating your users.

That tag also includes a reference to an appId which will uniquely identify your application to our servers and which we will create here in a bit. The home.component.ts file pulls the appID value out of the environment.ts file. We’ll set that part up later as well.

The Banner Component

The Banner component displays a nice header on the top of the page. There’s no functionality in the component, so it’s a bit easier to set up.

Set the banner.component.html file to look like this:

<div class="mainHeader">
    <a href="https://passage.id/"><div class="passageLogo"></div></a>
    <div class="headerText">Passage + Angular Example App</div>
    <div class="spacer"></div>
    <a href="https://passage.id/" class="link">Go to Passage</a>
</div>

and the banner.component.css as follows:

.mainHeader{
    padding: 20px 30px;
    display: flex;
    align-items: center;
    background-color: #282727;
    color: white;
}

.headerText {
    font-size: 24px;
    margin-left: 10px;
}

.passageLogo {
    background-image: url('https://storage.googleapis.com/passage-docs/passage-logo-dark.svg');
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.spacer {
    flex-grow: 1;
}

.link {
    margin-left: 20px;
    color: white;
    text-decoration-color: white;
}

You can leave the banner.component.ts file alone.

The Dashboard Component

The Dashboard component is where all the “real” work will get done. It will display differently based on whether or not the user is authenticated. I’ll show you the code, and then I’ll discuss more about what it does after we get everything all set up.

The dashboard.component.ts file should include this code:

import { Component, OnInit, Input } from '@angular/core';
import { AuthService } from 'src/app/auth.service';

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  title = 'dashboard';

  public username: String | undefined = '';
  public isLoading: Boolean = false;
  public isAuthenticated: Boolean = false;

  constructor(private authService: AuthService){}

  ngOnInit(){
    this.isLoading = true;
    this.authService.isLoggedIn().then((result) => {
      if (result) {
        this.isLoading = this.authService.isLoading;
        this.isAuthenticated = this.authService.isAuthenticated;
        this.username = this.authService.username;
      } else {
        this.isLoading = false;
        this.isAuthenticated = false;
        this.username = '';
      }
    })
}
}

Add this HTML to dashboard.component.html:

<div class="dashboard" *ngIf="!isLoading && isAuthenticated">
    <div class="title">
        Welcome!
    </div>
    <div class="message">
        You successfully signed in with Passage.
        <br/><br/>
        Your username is: <b>\{\{ username \}\}
        </b>
    </div>

</div>
<div class="dashboard" *ngIf="!isLoading && !isAuthenticated">
    <div class="title">
       Unauthorized 
    </div>
    <div class="message">
        You have not logged in and cannot view the dashboard.
        <br/><br/>
        <a href="/" className={styles.link}>Login to continue.</a> 
    </div>
</div>

and finally, in dashboard.component.css add this code:

.dashboard{
    padding: 30px 30px 20px;
}
.title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}
.message {
    overflow-wrap: anywhere;
}
.link {
    color: black;
    text-decoration-color: black;
}

An Authorization Service

At the heart of the application is an Authorization service. It is where your application checks the credentials presented.

Create the Authentication service at the command line:

ng generate service Auth

That creates a file called auth.service.ts. Change the code in that file to the following:

import { Injectable } from '@angular/core';
import { PassageUser, PassageUserInfo } from '@passageidentity/passage-elements/passage-user';

@Injectable({
  providedIn: 'root'
})
export class AuthService { 
  isAuthenticated: boolean = false;
  public username: string | undefined = '';
  public isLoading: boolean = true;
  constructor() {

}

  public async isLoggedIn(): Promise<boolean> {
    this.isLoading = true;
    return await new PassageUser().userInfo().then(userInfo => {
       if (userInfo !== undefined) {
        this.isLoading = false;
        this.isAuthenticated = true;
        this.username = userInfo.email ? userInfo.email : userInfo.phone;
       } else {
        this.isLoading = false;
        this.isAuthenticated = false;
        this.username = '';
       }
       return this.isAuthenticated;

  })
}

}

There. That ought to do it. That’s a lot of code, but building it yourself is more fun, right?

Add Passwordless Authentication with Passage

Okay, that part is finished. Now, we need to tell Passage what you are up to and connect Passage to our application.

The first step is to register with Passage. You can do that on this page.

Note that you’ll use our passwordless solution to register and log in!

Once you are in, click the big plus sign to create a new application. From there,

Name your application whatever you like.

Set the Domain to http://localhost:4200 (this is the default for your Angular application)

Set the Redirect URL to: /dashboard

and then select the “Angular” icon and press the “Create New Application” button.

This should set up your application, and you should see the Passage Console displaying something like this:

The Passage Dashboard for your Angular Application

In the “App Info” section on the left, you should have an Application ID (I’ve obfuscated mine in the graphic above). Copy that value, and then open up the environment.ts file in your application and add the following entry to the default values found there:

export const environment = {
  production: false,
  passageAppId: '<Put your AppID here>',
};

What this does is uniquely identify your application to Passage and allow us to work our authentication magic as well as keep stats for you about your application and your users.

Okay, if all is put together correctly, you should be able to go to the command line for your application and enter:

ng serve --open

And you should see something that looks like this:

If everything is working, you should now be able to enter an email address into the login screen, register your device via biometrics, and log in to see the /dashboard page. If you don’t log in and try to navigate to the /dashboard page, you won’t be able to see anything except a message telling you that you aren’t logged in.

So What is Going on Here?

Well, a lot is going on here, but most of it is built into the Passage Web Component element.

The Passage element does all the work of registering and logging in users. You don’t have to do anything past what you’ve already done. The default component is pretty plain-looking by default, but don’t worry — you can customize it to your heart’s content.

Passage authenticates users using the WebAuthn protocol as standardized by the FIDO Alliance. Once it authenticates a user, Passage returns a signed JSON Web Token to identify the user. The whole process is hidden from you, the developer, and your users. All they need to worry about is authenticating with a simple biometrics check.

What Does the Code Do?

As far as what the code is up to, we’ll look at two of the files in the application — auth.service.ts and dashboard.component.ts.

First is the Authentication service.

The AuthService class contains three variables — isAuthenticated, username, and isLoading. isAuthenticated is the key variable here because it is the one that will keep track of whether or not the user is logged in.

The class contains a single function called isLoggedIn() . This function uses the PassageUser class, which is included with the Passage code.

The class is imported via the following import statement:

import { PassageUser, PassageUserInfo } from '@passageidentity/passage-elements/passage-user';

So the code in isLoggedin() merely asks the PassageUser() function for it’s userInfo(). That returns a promise, and if the userInfo is defined, then we know a valid user is present. The variables are set appropriately, and the function returns true because isAuthenticated is true. If the userInfo isn’t found, then the opposite occurs.

This takes us to the Dashboard component. In the dashboard.component.ts file, the ngOnInit() method is called, and the AuthService class is used to set the variables for the class, tracking the status of the user. This is again a promise, so that the information can be properly retrieved and read by the HTML file asynchronously.

The dashboard.component.html file is used to display one of two views, depending on whether the user is authenticated. If the user is authenticated, the username is displayed.

Pretty straightforward, I think.

Just for fun, once you run through the registration and login process a few times with a few different email addresses, you can explore the Console and see the data accumulating for your application.

Finding Out More

There is more to Passage. I already mentioned how you can easily customize the look of the Passage element. In addition, you can collect and store additional information about your users if you like. You can also display a user’s profile with a single HTML element. And of course, we will be continually adding new and useful features.

You can see the <passage-profile> element at work in the 02-Login-With-Profile application that is part of our GitHub Angular example.

Learn More About Passage

So there you have it. If you have any questions at all or need more assistance, or just want to find out more about what we at Passage are up to, please email us at support@passage.id, fill out this form, or join our Discord. We are quite pleased to hear from folks.

How Does WebAuthn Work?

PassageNick — Tue, 20 Sep 2022 20:26:15 +0000

In my previous post, I discussed why passwords are problematic at best and a severe security threat at worst. However, you probably currently have a password-based authentication solution. Hopefully you have implemented some type of Multi-factor Authentication. You might even have implemented Brute Force Password Protection and Breached Password Detection. But in the end you realize that passwords are still a problem. Of course, after reading all that you were probably thinking “But what else is there?”

Well, thankfully, some very smart people have been working on this problem. They formed an organization, worked the problem, and came up with a delightfully effective solution.

The FIDO Alliance

In July of 2012, The Fast Identity Online Alliance – FIDO – was formed by PayPal, Lenovo, and other organizations interested in getting rid of the password. Soon enough, Google, Microsoft, and Apple got on board along with many other companies. (Passage is a member of the FIDO Alliance).

FIDO soon developed open and free specifications for doing passwordless authentication. The key specification is the WebAuthn standard approved by the World Wide Web Consortium (W3C). WebAuthn uses public key cryptography to allow browsers and web resources to authenticate using passwordless methods such as biometrics.

This solution is formally called “Multi-device FIDO Credentials,” but informally, they are called “Passkeys”. Passkeys are based on a FIDO-developed protocol called WebAuthn.

How WebAuthn Works

WebAuthn is quite clever. It leverages the power of public key cryptography to create a way for users to login to mobile and web applications without those applications having to store any secret information at all.

Normally, when one thinks of public key cryptography, one thinks of using it to send a secret message to a person who then decrypts it and reads it. Well, this can kind of work in reverse. If you send them a message encrypted with their public key, then they – and only they – are the only one who can decrypt because only they have the private key that corresponds to the given public key. Once they do, you can be highly confident that they are the entity that they say they are.

Currently, all the major browsers – Chrome, Firefox, Edge, and Safari – all support the WebAuthn specification. If your phone – iPhone or Android – has a fingerprint reader or facial scanner, it supports WebAuthn. Windows provides WebAuthn support via Windows Hello.

All of this translates to passwordless authentication quite nicely. WebAuthn typically goes like this:

You want to log in to a website, so you go to it.
The website asks for your unique identifier, usually your email address or phone number. They may also ask for a username.
The website gets the information, and realizes that it has never heard of you before.
The website says “Hey, send me a public key that is unique to me.”
You validate yourself on your device. This can be via biometrics, a PIN, or inserting something like your Yubikey.
Once validated, your device generates a unique public/private key specific associated only with that website.
You send the site your public key. The site stores that for later use. You save the private key on your device. Note that no secret information at all leaves your device.
At this point, the site doesn’t know for sure you actually are you – so, it may want to verify who you actually are, usually by sending a magic link to your email or phone number. Note that the application doesn’t have to do this because it’s not required via the protocol, but it will likely want to so it can communicate with you.
You click on the link in the message, and the website knows that you actually are the person on the other side of that identifier. Now you are verified by the site.
The next time you want to login, you go to the site and give your identifier (email, phone number..).
The site sends you a known chunk of data as a challenge
You device then signs this challenge with your private key and sends it back.
The site decrypts the data with your public key. If what you sent back matches what the site sent, they you are authenticated.

Now that’s a lot of steps and looks pretty complicated, but most of it happens behind the scenes and is done by the implementation of WebAuthn.

But more importantly, it’s really simple for your users. All they have to supply is a press on a fingerprint reader or a FaceID impression or some other “thing that you are”. The code does the rest. It works great, is very, very secure and happens quickly and easily. No fumbling around with passwords, no bringing up authenticator applications, no checking your email or texts, and no worries about compromise.

How Do Passkeys Fit In?

At it’s heart, a passkey is really just the private key that gets created for every place a user logs in. That passkey is securely stored on your phone within a “Trusted Platform Module” or TPM. A TPM is a special chip now included with most modern devices and computers. For example, it’s required to be present in order for Windows 11 to be installed. The TPM is excessively difficult to compromise, even if a nefarious actor gets possession of your phone.

The nice part about passkeys is that they can be shared amongst different devices, both within and (eventually) between ecosystems. Google, Microsoft, and Apple have figured out a way to securely save those passkeys within their eco–systems so you can even share them between devices. There is even a way to move from one platform to another.

For instance, if you are a totally-committed Apple person, you can log in to a site one time on your iPhone with a passkey, and then that passkey is automatically shared between all of your Apple devices.

If you are a “mixed” person and have a MacBook and an Android phone, you can transfer your login from your MacBook to your Android phone via a QR Code. The process is quite secure, and it uses Bluetooth LE to ensure that the device displaying the QR Code and the device reading the QR Code are in close proximity to each other.

In addition, your Android phone creates a new passkey during the process that is then shareable across the Google ecosystem. You can migrate your login to a Windows device using the same system.

The bonus here is that if you lose or upgrade your phone, all your passkeys are immediately available on your new device without any hassle.

So that is how it all works. But as before, this raises questions. “Is this more secure?” is probably one that comes up. And that will be covered in my next post.

4 Misconceptions about Biometrics

Anna Pobletts — Tue, 01 Mar 2022 16:27:38 +0000

When you think of biometrics, you might think of something out of a spy movie, where the vault needs a fingerprint or eye scan to open, and wonder how realistic that really is. Or maybe you wonder about the privacy implications of using your face or fingerprint to authenticate to websites. These are all valid things to be curious about, especially since logging into websites with your face or fingerprint is so different from the passwords we use today.

The reality is that device native biometrics (like Apple’s Face ID, the Android fingerprint reader, or Windows Hello) are not some future sci-fi thing - you can use them to log into websites right now and they provide great security and privacy features. As this new technology starts to take the place of passwords, let's clear up a few common misconceptions about this new form of authentication.

MISCONCEPTION #1: Your fingerprint or face data is not private and could be stolen and used to impersonate you.

One of the greatest advantages to using device-native biometrics for authentication is that none of your biometric information is ever sent to or stored by the website it’s being used on. That is a huge win for privacy and security.

When you log in to a website using your device biometrics, the website will generate a cryptographic challenge that is sent to your device. Your browser then interfaces with the fingerprint reader or face recognition components of your phone or laptop to sign the challenge. Passage verifies that the challenge is correctly signed before allowing you to log into a website.

When your phone is prompting you for your face or fingerprint, you are unlocking the secure part of your phone that enables your device to sign the challenge - but none of that data is ever sent to any website, including Passage.

This is great for your privacy as a user, but it also has other security benefits. By not storing authentication materials on the website, there is no risk of big “password dump”-style breach. Passage does not hold hashes or anything else that can be used to log into your account. The only thing that can log in to your account is YOUR biometric on YOUR device.

As a bonus, biometric credentials are scoped to a specific domain or website, which means that your credentials for example.com will never work for evil-example.com. This completely eliminates a common category of attack called phishing.

MISCONCEPTION #2: This isn’t any different than a password manager.

Password managers like LastPass or 1Password are a popular way for users to keep track of a large number of unique, complex passwords. These tools work by having a single password that unlocks access to passwords for each website. Mobile devices often have password managers built into them that leverage device biometrics. For example, on an iPhone, the Apple Keychain will save your passwords for all of the websites you visit and let you unlock those passwords using your Face or Touch ID.

Companies and developers cannot build those capabilities into their websites directly to get the user experience and security benefits for all of their users. Passage enables any web application to add a similar experience - one that provides the ease of Apple Keychain, for users across all platforms, without the need to worry about passwords and all the support needs that come with them (password recovery, account resets, etc.).

MISCONCEPTION #3: Face ID, Windows Hello, and other platform biometrics are only secure enough to be a second factor of authentication with a password.

Traditionally, devices have been used in tandem with passwords as a second factor of authentication. For example, you might receive a one-time code via text or use an authenticator app that is installed on your phone. While this form of MFA does improve security, it also adds an additional layer of difficulty to the end user experience.

With Passage, you can get the same number of login factors in a more efficient and user-friendly way. When you register for an account on a new website, you would enter your email, then be immediately prompted to register the platform biometric on your device. With just that one simple step, you are providing two factors of authentication:

the ownership of the device you are on
and your ability to authenticate your biometric on that device (via Face ID, etc)

If someone else has your device, they would still be unable to log into your account. Similarly, if they compelled you to present your biometric on a different device, it would also not work.

MISCONCEPTION #4: You won’t be able to log in on devices without a device’s biometrics.

This is a common critique of a device-based authentication method and it’s not wrong. The protocols that Face ID, Windows Hello, and other biometrics are built on are inherently tied to the device you are on. Passage is built to eliminate this issue by coordinating all of your different devices and providing you with the most secure login solution no matter where you are. Practically speaking, if your device has biometrics, Passage will prompt you to use it. If it does not, Passage will send a magic link to your email or phone number. You can click this link on any device and still be logged in on the original device you were trying to log in on. This allows you to always log in between different devices, while optimizing for the convenience and security of device biometrics.

At Passage, we believe device biometrics are the future of how we will authenticate on the internet. We are excited to share this amazing technology with the world and we believe that overcoming the misconceptions about the technology is an important step in moving the internet forward.

What other questions do you have about biometrics and passwordless authentication? Ask us in Discord.

Create a React App with Biometric Authentication

Chris Loper — Wed, 16 Feb 2022 15:35:55 +0000

Passage offers developers a frictionless process to implement passwordless user authentication into their application. In this guide, learn how to build a simple React application that uses Passage for biometric authentication.

Users will log in to your application using the biometrics built into their devices (e.g. FaceID, TouchID, Windows Hello, etc) or with magic links sent to their email. The app will be built such that authenticated users can view a simple dashboard, while unauthenticated users will be blocked. This article will walk you through how to create a React app, setup the components, and authenticate users with Passage.

If you are already familiar with React, you can go straight to our full example application on GitHub or skip to "Add User Authentication with Passage" to learn how to integrate biometric authentication into an existing application.

Setup

You will need to have Node >= 14.0.0 and npm >= 5.6 on your machine. To create a React app run:

npx create-react-app passage-app
cd passage-app

Now install the router (react-router-dom):

npm install react-router-dom

Build Views for the Application

The router is used to navigate between the views in your application. In this application, we will have two views Home.js and Dashboard.js. The Home view will contain Passage’s <passage-auth> custom element, which enables user authentication. The Dashboard view will be an authenticated route and will block any unauthenticated users from viewing the dashboard.

mkdir src/views
touch src/views/Home.js
touch src/views/Dashboard.js

Lets start with building the Home view src/views/Home.js:

function Home() {
    return (
        <div className="home-div">
                    This is the Home View!
        </div>
    );

}

export default Home;

Now we will build a simple Dashboard view src/views/Dashboard.js:

function Dashboard() {
      return (
          <div className="dashboard-div">
               Welcome!
          </div>
      );
}

export default Dashboard;

Setup the Router in app.js and index.js

Let’s edit src/app.js, which is the entry point for the React app. Configure the router to have routes to both the Home view and the Dashboard view:

import React from "react";
import { Routes, Route } from 'react-router-dom';

import Home from "./views/Home";
import Dashboard from "./views/Dashboard";

function App() {
  return (
      <div>
            <div className="main-container">
                <Routes>
                    <Route path="/" element={<Home/>}></Route>
                    <Route path="/dashboard" element={<Dashboard/>}></Route>
                </Routes>
            </div>
      </div>
  );
}

export default App;

Also, edit src/index.js to add the router to the application:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app';
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

Now let’s create a Banner component that we can add to src/app.js, making it visible throughout the application. Let’s create a component directory and create the banner.js file. Also, let’s create a styles directory and create a Banner.module.css file to add CSS styling to the Banner component.

mkdir src/components
touch src/components/banner.js
mkdir src/styles
touch src/styles/Banner.module.css

Lets build src/components/banner.js with this code:

import styles from '../styles/Banner.module.css';

function Banner() {
    return ( 
        <div className={styles.mainHeader}>
            <a href="https://passage.id/" ><div className={styles.passageLogo}></div></a>
            <div className={styles.headerText}>Passage + React Example App</div>
            <div className={styles.spacer}></div>
            <a href="https://passage.id/" ><span className={styles.text}>Go to Passage</span></a>
        </div>
    );
}
export default Banner;

Copy this CSS into src/styles/Banner.module.css to add styling to the above component:

.mainHeader{
    padding: 20px 30px;
    display: flex;
    align-items: center;
    background-color: #27417E;
    color: white;
}
.header-text {
    font-size: 24px;
    margin-left: 10px;
}

.passageLogo {
        background-image: url('https://storage.googleapis.com/passage-docs/passage-logo.svg');
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    cursor: pointer;
}
.spacer {
    flex-grow: 1;
}

.link {
    margin-left: 20px;
    color: white;
    text-decoration-color: white;
}

Now let’s add the Banner component to src/app.js so that it will appear throughout the app:

import React from "react";
import { Routes, Route } from 'react-router-dom';

import Home from "./views/Home";
import Dashboard from "./views/Dashboard";
import Banner from "./components/banner";

function App() {
  return (
      <div>
            <Banner/>
            <div className={styles.mainContainer}>
                <Routes>
                    <Route path="/" element={<Home/>}></Route>
                    <Route path="/dashboard" element={<Dashboard/>}></Route>
                </Routes>
            </div>
      </div>
  );
}

export default App;

Now lets add a footer and some styling to src/app.js:

import React from "react";
import { Routes, Route } from 'react-router-dom';

import Home from "./views/Home";
import Dashboard from "./views/Dashboard";
import Banner from "./components/Banner";
import styles from './styles/App.module.css';

function App() {
  return (
      <div>
            <Banner/>
            <div className={styles.mainContainer}>
                <Routes>
                    <Route path="/" element={<Home/>}></Route>
                    <Route path="/dashboard" element={<Dashboard/>}></Route>
                </Routes>
            </div>
            <div className={styles.footer}>
                Learn more with our <a href="https://docs.passage.id">Documentation</a> and <a href="https://github.com/passageidentity">Github</a>.      
            </div>
      </div>
  );
}

export default App;

And the styling lives in src/styles/App.module.css

.mainContainer {
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    width: 310px;
    min-height: 310px;
    margin: 30px auto;
}
.footer {
    text-align: center;
    font-size: 18px;
}

Add User Authentication with Passage

Now it is time to add passwordless authentication to your application using Passage. First, install the Passage custom element from npm:

npm install --save @passageidentity/passage-auth

Then import the package in the view where you intend to authenticate users. In this case, src/views/Home.js

**import** '@passageidentity/passage-auth'

Importing this script will register the Passage custom element for use in your React view. For more information about custom elements refer to the online documentation.

Create an application in the Passage Console (here) with the following settings:

Authentication Origin: http://localhost:3000
Redirect URL: /dashboard

Below is a screenshot from creating a Passage App in the Passage Console:

Once the application has been created, copy the Application ID from the console into a .env file in the root of React app’s repository.

# .env
REACT_APP_PASSAGE_APP_ID=<Your New Passage App ID Here>

Now lets add the passage-auth custom element to src/views/Home.js

import "@passageidentity/passage-auth";

function Home() {
    return (
        <passage-auth app-id={process.env.REACT_APP_PASSAGE_APP_ID}></passage-auth>
    );

}

export default Home;

Verifying User Authentication

Now it is time to prevent unauthenticated users from accessing the dashboard page. Please keep in mind that this dashboard protection will not protect sensitive API endpoints. Your server should always use one of the Passage backend libraries to authorize users before returning sensitive data.

For the simplicity of this example, let’s focus on the frontend code.

Instead, implement this check by creating a hook to authenticate the current Passage user. This hook contains a reusable piece of stateful logic that allows any component to check if the current user is authenticated and return basic user info that Passage stores for you.

Create a directory for hooks and create a file called useCurrentUser.js:

mkdir src/hooks
touch src/hooks/userCurrentUser.js

The code for this hook is as follows:

import { useState, useEffect } from "react";
import { PassageUser } from '@passageidentity/passage-auth/passage-user';

export function useCurrentUser() {
    const [result, setResult] = useState({
        isLoading: true,
        isAuthorized: false,
        username: '',
    });

    useEffect(() => {
        let cancelRequest = false;
        new PassageUser().userInfo().then(userInfo=> {
            if( cancelRequest ) {
                return;
            }
            if(userInfo === undefined){
                setResult({
                    isLoading: false,
                    isAuthorized: false,
                    username: "",
                });
                return;
            }
            setResult({
                isLoading: false,
                isAuthorized: true,
                username: userInfo.email ? userInfo.email : userInfo.phone,
            });
        });
        return () => {
            cancelRequest = true;
        };
    }, []);
    return result;
}

Note: The React useEffect() hook happens on both mount and unmount, so canceling the API request will prevent an error that can occur when handling API requests in a useEffect hook that occurs when setting the state on a component that is unmounted.

Now that this hook has been implemented, move back to src/view/Dashboard.js and use this hook to verify that a user has been properly authenticated.

import {useCurrentUser} from '../hooks/useCurrentUser';
import styles from '../styles/Dashboard.module.css';

function Dashboard() {
    const {isLoading, isAuthorized, username} = useCurrentUser();

    if (isLoading) {
        return null;
    }
    const authorizedBody = 
    <>
        You successfully signed in with Passage.
        <br/><br/>
        Your email is: <b>{username}</b>
    </>

    const unauthorizedBody = 
    <>
        You have not logged in and cannot view the dashboard.
        <br/><br/>
        <a href="/" className={styles.link}>Login to continue.</a>
    </>

    return (
        <div className={styles.dashboard}>
            <div className={styles.title}>{isAuthorized ? 'Welcome!' : 'Unauthorized'}</div>
            <div className={styles.message}>
                { isAuthorized ? authorizedBody : unauthorizedBody }
            </div>
        </div>
    );

}

export default Dashboard;

Now unauthenticated users that visit /dashboard will be shown an unauthorized page, while authenticated user will be shown their Passage User ID.

Note: Notice that styles have also been added to this version of src/views/Dashboard.js A copy of src/styles/Dashboard.module.csscan be found below:

.dashboard{
    padding: 30px 30px 20px;
}
.title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}
.message {
    overflow-wrap: anywhere;
}
.link {
    color: black;
    text-decoration-color: black;
}

Now run the app, to see Passage biometric authentication in action:

npm run start

Conclusion

Congratulations! You now have a React application that utilizes passwordless authentication. Biometric authentication, as you hopefully can see, is both frictionless to implement with Passage and effortless for end users to authenticate themselves.

You can see the finished application on GitHub here.

Learn More About Passage

To learn more about Passage and biometric authentication for web applications, you can:

Explore our dashboard to view and create users, customize your application, and add friends
Read our guides for other tech stacks and learn how to authorize requests in your backend server
Join our Discord and say hi

‍Passage is in beta and actively seeking feedback on the product. If you have feedback, bug reports, or feature requests, we would love to hear from you. You can email us at support@passage.id or fill out this form.

This article was originally published on the Passage blog.

Create Biometric-Powered Login Pages in Vue.js

Anna Pobletts — Tue, 08 Feb 2022 17:46:23 +0000

In this article, you will learn how to build a simple Vue 3 application and add biometric authentication using Passage.

Users will log in to your application using the biometrics built into their devices (e.g. Face ID, Windows Hello, etc) or with magic links sent to their email. This app is built such that it only allows authenticated users to view a simple dashboard and blocks unauthenticated users. This guide will walk through creating a Vue 3 app using the Vue CLI, creating basic components, and adding authentication to the application using Passage.

If you are already familiar with Vue, you can go straight to our full example application on GitHub or skip to this section to learn how to integrate biometric authentication into an existing application.

Setup

To get started, first install the Vue CLI. The Vue CLI lets you get up and running quickly with pre-configured build settings.



npm install -g @vue/cli

Then create a new application using the Vue CLI. The tool will provide you with options to manually select versions and features you want. For this tutorial, use the "Manually select features" option and select the "Router" feature. Make sure to select Vue 3. You can just hit enter through the remaining features.



vue create example-app 
cd example-app

You can test your app by running the following command and then visiting http://localhost:8080.



npm run serve

You can leave this up and running throughout the tutorial to see your progress.

Build Components for App

Set up routes for Home and Dashboard pages

Our application will have two pages, a home page with a login screen and a dashboard page that is authenticated. First, create the directory structure and routes for those pages. Create the following directories and files to set up for the router and our two main components.



cd src/
mkdir views
touch views/Dashboard.vue
touch views/Home.vue

Now let's start filling out these files. Copy the following code into the router/index.js file to replace the default router.



import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Dashboard from '../views/Dashboard.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard
  }
]

const router = createRouter({
  history: createWebHistory(),
  mode: 'history',
  routes
})

export default router

Create a Banner component

Create a banner component that will be used on both the home and dashboard pages. Copy the following code to components/Banner.vue.



<template>
  <div class="mainHeader">
    <a href="https://passage.id/"><div class="passageLogo"></div></a>
    <div class="header-text">Passage + Vue.js 3 Example App</div>
    <div class="spacer"></div>
    <a class="link" href="https://passage.id/">Go to Passage</a>
  </div>
</template>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Banner',
})
</script>
<style scoped>
.mainHeader{
  width: 100%;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  background-color: #27417E;
  color: white;
}

.header-text {
  font-size: 24px;
  margin-left: 10px;
}

.passageLogo {
  background-image: url('https://storage.googleapis.com/passage-docs/passage-logo.svg');
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.spacer {
  flex-grow: 1;
}

.link {
  margin-left: 20px;
  color: white;
  text-decoration-color: white;
}
</style>

Replace the template and script tags in App.vue to use the router and add some simple styling.



<template>
<div>
  <Banner />
  <div class="main-container">
    <router-view/>
  </div>
  <div className="footer">
    Learn more with our 
    <a href="https://docs.passage.id">Documentation</a> and
    <a href="https://github.com/passageidentity">Github</a>.
    <br>       
  </div>
</div>
</template>
<style>
body {
  margin: 0px;
  height: 100vh;
  font-family: sans-serif;
  background-color: #E5E5E5;
}

.main-container {
  background: white;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  width: 310px;
  min-height: 310px;
  margin: 30px auto;
}

.footer {
  text-align: center;
  font-size: 18px;
}
</style>

and add the router and banner to main.js.



import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Banner from './components/Banner.vue'

createApp(App)
  .use(router)
  .component('Banner', Banner)
  .mount('#app')

This means that once the components are created, the home page will be accessible at http://localhost:8080/ and the dashboard will be at http://localhost:8080/dashboard.

Build Home Component

Add the following code to views/Home.vue to create the home page.



<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Home',
})
</script>

Build Dashboard Component

Add the following code to views/Dashboard.vue to create the simple dashboard page.



<template>
  <div class="dashboard">
        <div class="title">Welcome!</div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Dashboard',
})
</script>

<style scoped>
.dashboard{
  padding: 30px 30px 20px;
}

.title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
}

.message {
  overflow-wrap: anywhere;
}

.link {
  color: black;
  text-decoration-color: black;
}
</style>

Add Authentication with Passage

Now it is time to add authentication to our application using Passage! First, install Passage from the root directory of your example app.



npm install --save @passageidentity/passage-auth

Then import the package in the module where you intend to use the custom element, in this case the Home.vue view.



import '@passageidentity/passage-auth'

Importing this script will register the Passage custom element for use in your Vue components. For more information about custom elements refer to the online documentation.

Create an application in the Passage Console with the following settings:

Authentication Origin: http://localhost:8080
Redirect URL: /dashboard

Once you've created your application, copy your Application ID out the console and into a .env file in the root of your example repository.



# .env
VUE_APP_PASSAGE_APP_ID=

In the Home component, import Passage and add the custom element to the template. ‍



<template>
  <passage-auth :app-id="appId"></passage-auth>
</template>

<script>
import { defineComponent } from 'vue'
import '@passageidentity/passage-auth'

export default defineComponent({
  name: 'Home',
  setup() {
    const appId = process.env.VUE_APP_PASSAGE_APP_ID
    return {
      appId,
    }
  },
})
</script>

Your application now has a full login and register experience!

You might notice a warning in the console about the custom element. Vue works with custom elements out of the box, but by default it will log a warning to the console that it could not resolve the component for the custom element. To configure Vue with information that the <passage-auth> tag is a custom element and suppress this warning, you need to add this configuration to your vue.config.js file. Create this file at the top-level directory of your repository.




module.exports = {
  publicPath: '/',
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => ({
        ...options,
        compilerOptions: {
          // treat any tag that starts with passage- as custom elements
          isCustomElement: (tag) => tag.startsWith('passage-'),
        },
      }))
  },
}

Once you’ve added this, you will need to restart the server for the changes to take effect.

Verifying User Authentication

Last but not least, the application needs to prevent unauthenticated users from accessing the dashboard page. You will set up protections that will show an error message to unauthenticated users trying to access the dashboard, but that does not prevent them from reading any data that might be on the dashboard, since it is all stored in the JavaScript files.

For simplicity, there is not a backend server in this example. A simple authentication check using the PassageUser class will be implemented to protect the dashboard page from unauthorized access.

💡 Please keep in mind that this dashboard protection will not protect sensitive API endpoints. Your server should always use one of the Passage backend libraries to authorize users before returning sensitive data.

This check is implemented by creating a composable to check the authentication status of the current user using Passage. Create a file called useAuthStatus.js in the composables directory.



mkdir composables/
touch composables/useAuthStatus.js

Copy the following code into that file. This code uses Passage to check if the current user is authenticated.



import { ref } from 'vue'
import { PassageUser } from '@passageidentity/passage-auth/passage-user'

export function useAuthStatus(){
  const isLoading = ref(true)
  const isAuthorized = ref(false)
  const username = ref('')

  new PassageUser().userInfo().then(userInfo => {
      if(userInfo === undefined){
          isLoading.value = false
          return
      }
      username.value = userInfo.email ? userInfo.email : userInfo.phone
      isAuthorized.value = true
      isLoading.value = false
  })

  return {
    isLoading,
    isAuthorized,
    username,
  }
}

Next, incorporate this check into the Dashboard component, since authentication is required before showing the dashboard. The dashboard will show two different messages based on the result of the authentication check. The final Dashboard.vue will look like this.



<template>
  <div class="dashboard">
    <div v-if="isLoading"/>
      <div v-else-if="isAuthorized">
        <div class="title">Welcome!</div>
        <div class="message">
          You successfully signed in with Passage.
          <br/><br/>
          Your Passage User ID is: <b>{{username}}</b>
        </div>
      </div>
    <div v-else>
      <div class="title">Unauthorized</div>
      <div class="message">
        You have not logged in and cannot view the dashboard.
        <br/><br/>
        <a href="/" class="link">Login to continue.</a>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useAuthStatus } from '../composables/useAuthStatus'

export default defineComponent({
  name: 'Dashboard',
  setup() {
    const {isLoading, isAuthorized, username} = useAuthStatus()
    return {
      isLoading,
      isAuthorized,
      username,
    }
  },
})
</script>

<style scoped>
.dashboard{
  padding: 30px 30px 20px;
}

.title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
}

.message {
  overflow-wrap: anywhere;
}

.link {
  color: black;
  text-decoration-color: black;
}
</style>

Unauthenticated users who try to visit /dashboard will be shown an "Unauthorized" message, while authorized users will see the dashboard that includes their Passage User ID.

Conclusion

Now you can try out the biometrics authentication in the application you just built! Your application should look something like this and you can see the login experience as your users would.

To recap, you have just:

created an application with Vue.js
added biometric authentication to your app with Passage
learned how to verify the authentication status of your users with Passage

Keep an eye out for part 2 of this post, where we show you how to use Passage to protect your backend API endpoints in a Vue.js + Express.js web application!

To learn more about Passage and biometric authentication for web applications, you can:

Explore our dashboard to view and create users, customize your application, and add friends
Read our guides for other tech stacks and learn how to authorize requests in your backend server
Join our Discord and say hi

‍Passage is in beta and actively seeking feedback on the product. If you have feedback, bug reports, or feature requests, we would love to hear from you. You can email me at anna@passage.id or fill out this form.

This article was originally published on the Passage blog.