What is passwordless authentication and how to implement it

Passwordless authentication is a user management method in which the user logs into a system or application without using a password or secret. Instead of using a knowledge based factor (e.g. password), it validates a user’s identity either ownership factors (e.g. email account), or inherence factors (e.g. facial recognition).

This article was created in partnership with Frontegg. Thank you for supporting the partners who make SitePoint possible.

There are many authentication methods used as alternatives to passwords:

  • Single Use Code (OTC)
  • magic links
  • Biometric login (fingerprints, FaceID, voice recognition)
  • Smart cards or physical tokens
  • Digital certificates

Popularity of Passwordless Authentication

You may already be using “passwordless authentication” without knowing it. Many banking apps use fingerprint and voice recognition to verify users. Slack uses magic links to authenticate users.

The use of passwordless authentication has grown steadily over the past few years. Auth0, an authentication provider, predicts that passwordless authentication exceed the use of passwords by 2027. Gartner predicted that by 2022, “60% of large global enterprises and 90% of midsize enterprises will implement passwordless methods in more than 50% of use cases, up from 5% in 2018.”

Major web players are also doing their best to accelerate technology adoption. On World Password Day 2022, Google, Microsoft, and Apple announced plans to expand support for a common passwordless login standard established.
In June 2022, Apple announced its new ‘Passkeys’ function to use to log in to websites and applications. This announcement basically means that Apple will use Touch ID or Face ID to create a digital key for this website. This removes the need to create and write down a password.

Benefits of Passwordless Authentication

Passwordless authentication offers advantages in terms of security and user experience:

  1. Reduces the risk of phishing and password theft: Users are not susceptible to phishing attacks when directed to fake websites and enter their login credentials. If a user does not enter a password, they will not be vulnerable to brute force attackspassword data breaches and other types of credential theft.
  2. Reduces credential reuse: Reusing passwords across multiple services and accounts creates increased risk to users and your systems that cannot be avoided. It was reported that 64% of people have used the same password exposed in a breach for other accounts.
  3. More memory exercises: Your users don’t need to remember usernames and passwords for so many accounts. Sometimes they have to reset their passwords again and again after many failed login attempts.
  4. Faster connection: We are all busy. A strong password is suggested to be at least 16 characters long and takes a long time to type compared to scanning a fingerprint or opening a magic link.

Limitations of Passwordless Authentication

Passwordless authentication is not perfect and has some limitations from a security and experience perspective.

  • Unknown user experience: Many people have a habit of automatically typing or auto-filling passwords. A change to a magic link or OTC can come as a shock to users.
  • Stolen Devices or SIM Swapping Risks: Sending unique codes via SMS can leave your users vulnerable if their phone is stolen or if they are the victim of a SIM swap scam.
  • Biometric security is not perfect: Fingerprint readers, TouchID and FaceID have been successfully hacked over the years.

Relying on a single factor for authentication, password or not, always presents some level of risk. We recommend that you always use multi-factor authentication (MFA) whenever possible.

Is passwordless authentication secure?

Yes, passwordless authentication is considered safe, but it’s not completely risk-free. An account without a password will not have to fear that this password will fall into the hands of a malicious person. This can happen through data breaches, brute force hacks, lost devices, or misplaced post-its.

Many of the risks associated with passwordless authentication apply equally to other methods.

If a hacker has access to your email account and you are using Magic Links for passwordless authentication, they will be able to log in easily. This risk, however, is the same if you use a normal password. The bad actor would just need to click “reset password” and send the reset link to that same email address.

Finally, like any other system, a passwordless authentication system is also vulnerable to direct attacks aimed at circumventing or circumventing security measures. No matter how secure you act, the systems that store and verify your credentials are never completely secure.

Fingerprint verification and other biometric factors are much more difficult but not impossible to cheat and offer a very secure way to authorize yourself.

Passwordless Authentication vs Multi-Factor Authentication (MFA)

Multi-factor authentication is a method of using multiple authentication factors when logging in. This very often happens when you log into an account with a username and password and then receive a 6-digit one-time-use code (OTC) to confirm your ownership of the device.

In this example, the OTC factor is passwordless. Instead, if you were to use a fingerprint and one-time passcode, you have an entirely passwordless MFA setup.

How to Implement Passwordless Authentication on Your Website

Integrating passwordless authentication into your app or website is easier than ever. Depending on your existing infrastructure, you have many options:

  • User management solutions: These providers offer a fully managed service that not only provides traditional and passwordless authentications, but also user management and permission management.
    • When to use: New system releases, startups, and teams looking to avoid all low-value, high-risk development work.
    • When not to use: If you have a very custom set of authentication or user management requirements that may not match their systems.
    • Suppliers: Frontegg, Okta/Auth0, MergeAuth, Trusona, AppWrite
  • Authentication service provider: These services provide user authentication, access management and other services such as session management.
    • When to use: You have existing user management services and want someone to handle passwords and authentication.
    • When not to use: You have limited development experience or resources. If you have a simple identity and access management model, you might want to consider a fully managed solution, as mentioned above.
    • Suppliers: AWSCognito, Google Identity Platform, Microsoft AzureAD

Passwordless Authentication with React – Speedrun

To demonstrate how easy it is to introduce passwordless methods to your users, we’re going to show you a 5-minute tutorial with a provider called Frontegg. A standalone, end-to-end user management platform that, among other user management features, provides a few forms of passwordless login methods.

Creating login and authentication services is extremely time consuming and doesn’t add value to user flows, but can be detrimental if you get it wrong. As services offering authentication get better and cheaper, there shouldn’t be much reason to build your own password validation systems for your apps.

  1. Create your free Frontegg account

Create your Frontegg account through their website. Be sure to select Magic Code or Magic Link as passwordless options during the onboarding process!

Options without password

  1. Start the onboarding process

Once you have finished creating your login box and selected your passwordless methods, you will see an option to Publish to Dev.

Frontegg uses Environments (Dev, QA, Staging, Production) with unique subdomains, keys and URLs for your authentication environments.

You will now be taken to a page with sample code, and more importantly, your `baseURL` and `’clientID`. Leave this page open and proceed to your IDE for the next step.

  1. Create the React app (skip this if you already have your own app)

In your terminal, type the following commands to create a new Reactreact application and navigate to the new directory.

npx create-react-app app-with-frontegg
cd app-with-frontegg
  1. Install and import Frontegg

Run the following command to install the Frontegg React library and react router. You can skip installing react-router if it is already installed in your application.

npm install @frontegg/react react-router-dom
  1. Configure connection settings

In the src/index.js file, add the code below. Then go back to your Frontegg page and find `baseUrl` and ‘clientID’ in the code samples.

Note: These values ​​are still in the Administration section of your workspace after this onboarding flow is complete.

import React from 'react';
import ReactDOM from 'react-dom'; 

import App from './App';
import './index.css';

import { FronteggProvider } from '@frontegg/react';

const contextOptions = {
  baseUrl: '## YOUR BASE URL ##',
  clientId: '## YOUR CLIENT ID ##'
};




ReactDOM.render(
    <FronteggProvider contextOptions={contextOptions} hostedLoginBox={true}>
        <App />
    </FronteggProvider>,
    document.getElementById('root')
);
  1. Redirect to login

Using the Frontegg useAuth hook, you can determine whether a user is authenticated or not. If the user is not authenticated, you can redirect the user to login via the useLoginWithRedirect hook (as shown in the example below).

import './App.css';

import { ContextHolder } from '@frontegg/rest-api';
import {
  useAuth, useLoginWithRedirect
} from "@frontegg/react";

function App() {
  const { user, isAuthenticated } = useAuth();
  const loginWithRedirect = useLoginWithRedirect();
  
  
  
  
  
  
  const logout = () => {
    const baseUrl = ContextHolder.getContext().baseUrl;
    window.location.href = `${baseUrl}/oauth/logout` +
                           `?post_logout_redirect_uri=` +
                           `${window.location}`;
  };
  return (
    <div className="App">
      { isAuthenticated ? (
        <div>
          <div>
            <img src={user?.profilePictureUrl}
                 alt={user?.name}
            />
          </div>
          <div>
            <span>Logged in as: {user?.name}</span>
          </div>
          <div>
            <button onClick={() => alert(user.accessToken)}>
              What is my access token?
            </button>
          </div>
          <div>
            <button onClick={() => logout()}>
              Click to logout
            </button>
          </div>
        </div>
      ) : (
        <div>
          <button onClick={() => loginWithRedirect()}>
            Login
          </button>
        </div>
      )}
    </div>
  );
}

export default App;
  1. Login

To run npm start or open http://localhost:3000 in your browser and click on the Login button. You should see your newly created login and registration pages.

Note, there is no password field here 🎉

Registration at Frontegg

Click on Register, go to your email and click on Activate my account.

Frontegg unique code

When you want to sign in, you just have to enter your email, wait for the six-digit code to arrive, and you’re connected. No password, no worries.

Conclusion

I hope this guide to passwordless authentication has helped you not only understand how accessible this technology is, but also how important it will become in the next few years.

Comments are closed.