DEV Community: Anna Pobletts

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 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.