DEV Community: Andy Agarwal

Passwordless Authentication: The Key to Preventing Credential Stuffing

Andy Agarwal — Sat, 24 Jun 2023 05:42:53 +0000

In today’s digital age, safeguarding online accounts has become a paramount concern for both individuals and businesses. The proliferation of cybercrime necessitates robust measures to ensure the security of personal and sensitive information. One prevalent method employed by hackers is credential stuffing, where stolen login credentials are exploited to gain unauthorized access to user accounts. However, passwordless authentication presents a formidable defense against this type of attack. This blog post delves into the advantages of passwordless authentication in preventing credential stuffing and highlights its invaluable role as a security measure.

What is Credential Stuffing?

Credential stuffing is a sophisticated cyber attack method employed by hackers to gain unauthorized access to user accounts. It relies on the exploitation of stolen login credentials, typically obtained from previous data breaches or other illicit means.

The process of credential stuffing begins with hackers acquiring a database of username and password pairs from compromised sources. These databases are often sold or shared within the underground cybercriminal community. Armed with these stolen credentials, attackers use automated tools or scripts to systematically and rapidly attempt various combinations of usernames and passwords across multiple websites or online platforms. The purpose of this automated process is to find valid username and password combinations that grant access to user accounts. Hackers leverage the fact that many individuals reuse passwords across different online services, making it more likely for the same credentials to be valid on multiple platforms. By using these stolen credentials to gain access to user accounts, attackers can exploit the compromised accounts for various malicious activities.

Once hackers successfully gain illicit access to a user account through credential stuffing, they can carry out a range of harmful actions. These may include:

1. Data extraction:

Attackers can access and extract sensitive information stored within the compromised account, such as personal details, financial data, or intellectual property.

2. Unauthorized transactions:

With control over the compromised account, hackers may conduct unauthorized financial transactions, make purchases, or transfer funds to their own accounts.

3. Account takeover:

By compromising user accounts, hackers can fully take control, change account settings, and lock out legitimate users, effectively seizing ownership of the account.

4. Identity theft:

Stolen login credentials can provide hackers with a wealth of personal information, allowing them to impersonate the user, commit identity theft, or engage in other fraudulent activities.

5. Spreading malware or phishing:

Once inside a compromised account, hackers may use it as a platform to distribute malware, initiate phishing attacks, or send spam emails to unsuspecting contacts.

Credential stuffing attacks pose a significant threat due to the widespread reuse of passwords and the availability of large databases of stolen credentials. It is a highly automated and efficient method for attackers to gain unauthorized access to multiple user accounts, leveraging the vulnerabilities of weak or reused passwords.

How Passwordless Authentication Prevents Credential Stuffing

Passwordless authentication is a method of logging into an account without the need for a password. Instead, users are authenticated through other means, such as biometric data or a security token. This makes it much more difficult for hackers to gain access to user accounts through credential stuffing.

Here are some ways that passwordless authentication can prevent credential stuffing:

Absence of passwords to pilfer:

Passwordless authentication eliminates the reliance on passwords, which serves as a significant advantage in preventing credential stuffing attacks. With traditional authentication methods, passwords are often the primary target for hackers. They employ various techniques like phishing, social engineering, or data breaches to obtain users’ login credentials. However, in passwordless authentication, there are no passwords to steal. Even if attackers manage to acquire a user’s login credentials through illicit means, such information becomes futile without the additional authentication factors required for access. This absence of passwords eliminates a critical vulnerability and significantly reduces the risk of credential stuffing attacks.

Strengthened authentication measures:

Passwordless authentication methods typically employ more robust authentication factors compared to traditional passwords. Instead of relying solely on a piece of secret information, such as a password, passwordless authentication incorporates stronger and multifaceted authentication factors. Biometric data, such as fingerprints or facial recognition, is one such example. Biometrics are unique to individuals and significantly harder to replicate than a password. This heightened level of security makes it significantly more challenging for hackers to compromise user accounts through credential stuffing. The use of biometric data or other robust authentication factors raises the bar for attackers, making it exceedingly difficult to bypass the authentication process and gain unauthorized access to accounts.

Reduced dependence on user behavior:

Traditional password-based authentication heavily relies on users creating strong, unique passwords and refraining from reusing them across multiple accounts. However, human behavior often leads to the adoption of weak passwords or the reuse of passwords across multiple platforms. This behavior creates a significant vulnerability, as a breach in one account can potentially compromise multiple accounts if the same password is reused. Hackers are well aware of this tendency and exploit it through credential stuffing attacks.

Passwordless authentication mitigates this vulnerability by reducing the dependence on user behavior. With passwordless methods, users are not burdened with the responsibility of creating and managing complex passwords. Instead, they are authenticated through alternate means such as biometrics, security tokens, or other secure methods. This removes the risk associated with weak passwords or password reuse, making it far more challenging for attackers to gain unauthorized access to user accounts through credential stuffing.

By reducing reliance on passwords and bolstering authentication measures, passwordless authentication significantly enhances online security. It eliminates the vulnerability of stolen passwords, employs stronger authentication factors, and mitigates the risks associated with user behavior. These key advantages make passwordless authentication an effective measure in preventing credential stuffing attacks and ensuring the protection of user accounts and sensitive information.

Conclusion

Credential stuffing poses a severe threat to online security, but passwordless authentication emerges as a potent defense. By eliminating passwords and implementing stronger authentication factors, passwordless authentication effectively raises the barrier for hackers attempting to breach user accounts. As individuals and businesses increasingly prioritize online security, passwordless authentication will undoubtedly emerge as a vital security measure, bolstering protection against credential stuffing and enhancing overall cybersecurity.

JWT validation with JWKs in Node.js

Andy Agarwal — Tue, 13 Jun 2023 09:54:03 +0000

What is a JWT?

JSON Web Token (JWT) is an open standard that defines how to transmit information between two parties in a compact and self-sustained way. This information is highly trusted and verified as it is signed digitally.

JWTs use a public/private key pair or a secret for signing. The advantage of JWT is in its feature; it just needs a simple cryptographic operation. The client needs to access the public/private key pair used for signing the JWT, and he can validate it using that key pair.

What are JWKs?

A JSON Web Key (JWK) is a JSON data structure that represents a cryptographic key. JWKs are a set of keys shared between different services and are used to verify the JWT token from the authorization server.

JWKS exposes the public keys to all the clients who need to validate signatures that the signing parties use.

To validate a JWT using JWKS in node js:

Create/have a JWKS endpoint.
Create/have a token endpoint and sign the token.
Retrieve the JWKS from the JWKs endpoint.
Extract the JWT from the request’s authorization header.
Decode the JWT and grab the unique kid (Key ID) property of the token from the header.
Find the signature verification key in JWKS with a matching kid property.
Verify the token with the filtered JWKs.

Creating a JWKS endpoint

Before actually validating the JWT token, you need to have an endpoint that returns the JSON Web Key set you need to verify your token. We will use the node package ’node-jose’ to create the key set or key store.

const fs = require("fs");

const jose = require("node-jose");

const keyStore = jose.JWK.createKeyStore();

keyStore.generate("RSA", 2048, { alg: "RS256", use: "sig" }).then((result) => {
  fs.writeFileSync(
    "Keys.json",
    JSON.stringify(keyStore.toJSON(true), null, "  ")
  );
});

jose.JWK.createKeyStore creates an empty Keystore, and then we generate a JWK using RS256 algorithm, which is used for signing the token. The ’true’ argument returns the public and the private section of the asymmetric key, which will be used later to sign the tokens.

Now lets return the public key to JSON using expressJs:

router.get("/jwks", async (req, res) => {
  const ks = fs.readFileSync("keys.json");

  const keyStore = await jose.JWK.asKeyStore(ks.toString());

  res.send(keyStore.toJSON());
});

This will return the JSON web key set that will further be used to verify the token.

Creating token endpoint and signing

To create a token endpoint, first retrieve the key with which you need to sign. Then, following JWT standards(compact: true and field type: ‘jwt’), sign the token with the retrieved key using the jose.JWS.createSign() function.

router.get("/tokens", async (req, res) => {
  const JWKeys = fs.readFileSync("keys.json");

  const keyStore = await jose.JWK.asKeyStore(JWKeys.toString());

  const [key] = keyStore.all({ use: "sig" });

  const opt = { compact: true, jwk: key, fields: { typ: "jwt" } };

  const payload = JSON.stringify({
    exp: Math.floor((Date.now() + ms("1d")) / 1000),
    iat: Math.floor(Date.now() / 1000),
    sub: "test",
  });

  const token = await jose.JWS.createSign(opt, key).update(payload).final();

  res.send({ token });
});

This will return a signed token with an ’expiry date’ and ‘issued at date’ complying with the JWT standards.

Validating the token

To validate the token, first, you need to get the JSON web key set from the JWKs endpoint. The token will be received as JSON in the validation endpoint in the body. Now, we need to decode the token to get the kid, which will be used to find the key we need to verify the signature. After that, we call the JWKs endpoint, retrieve the key set, and find the keys matching the kid of the token. The public key is then obtained by converting the retrieved key by using node package ‘jwk-to-pem’. Once we have the token and the matched JWKs, the only thing left is verifying the token.

router.post("/verify", async (req, res) => {
  let resourcePath = "token/jwks";

  let token = req.body;

  let decodedToken = jwt.decode(token, { complete: true });

  let kid = decodedToken.headers.kid;

  return new Promise(function (resolve, reject) {
    var jwksPromise = config.request("GET", resourcePath);

    jwksPromise
      .then(function (jwksResponse) {
        const jwktopem = require("jwk-to-pem");

        const jwt = require("jsonwebtoken");

        const [firstKey] = jwksResponse.keys(kid);
        const publicKey = jwktopem(firstKey);
        try {
          const decoded = jwt.verify(token, publicKey);
          resolve(decoded);
        } catch (e) {
          reject(e);
        }
      })
      .catch(function (error) {
        reject(error);
      });
  });
});

Validating JWT with JWKS is the most secure authentication method as the signing occurs as a cryptographic operation. If you don’t want to do any of the above code, you can use MojoAuth verifyToken function to verify your token.

Add project dependency and MojoAuth SDK using npm by running the following command in the command line:

“npm install express body-parser mojoauth-sdk "

Upon installation, you will find MojoAuth Node.js SDK under the node module.

Get your Apikey from the MojoAuth Dashboard and configure the MojoAuth instance using the API key

var ma = require('mojoauth-sdk')(“<<Apikey>>”);

Call the MojoAuth verifyToken() function and pass the MojoAuth JWT Token to verify the token.

var jwtToken = "<Your JWT Token>";

ma.mojoAPI
  .verifyToken(jwtToken)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

If you’re building your Node APIs with Ts.ED, learn about how you can secure your Ts.ED API with JWT authentication.

Top 5 Passwordless Providers for Retail and E-commerce

Andy Agarwal — Mon, 05 Jun 2023 07:37:11 +0000

In recent years, the retail and e-commerce sector has witnessed a significant surge in cyberattacks and data breaches. As technology advances, cybercriminals have become increasingly adept at exploiting vulnerabilities to obtain sensitive user information.

The traditional reliance on passwords for authentication, once perceived as secure, is now recognized as a weak point in safeguarding online accounts. Consequently, an increasing number of businesses are embracing passwordless authentication methods. In this article, we will delve into the intricacies of passwordless authentication to understand its benefits and implementation.

What is Passwordless Authentication?

Passwordless authentication is a method of verifying a user’s identity without requiring them to enter a traditional password. Instead of relying solely on a password, passwordless authentication typically utilizes alternative factors or methods to authenticate users. These factors can include biometrics, such as fingerprint or facial recognition, or possession-based factors, such as a hardware token or a mobile device.

The goal of passwordless authentication is to enhance security and user experience by eliminating the need for users to remember complex passwords or reuse them across multiple accounts, which can be a significant security risk. Passwords are often weak, easily guessed, or vulnerable to data breaches, whereas passwordless authentication methods can provide stronger security.

There are various passwordless authentication methods available, including:

Biometric authentication : This involves using unique biological characteristics like fingerprints, facial features, or iris scans to verify the user’s identity.
Device-based authentication : In this method, a user’s authentication is tied to a specific device, such as a mobile phone or a hardware token. The device acts as a trusted factor, and the user must have physical possession of the device to authenticate.
One-time passwords (OTP): OTPs are temporary codes sent to the user’s registered mobile phone or email address. The user enters this code to complete the authentication process.
Public key cryptography : This method uses asymmetric encryption, where the user has a private key stored securely, and a public key is used for authentication.

By implementing passwordless authentication, organizations can improve security by reducing the risk of password-related attacks, such as brute-force attacks, credential stuffing, or phishing. Additionally, passwordless authentication can simplify the user experience, as users no longer need to remember and manage multiple passwords.

Why is passwordless authentication important?

Passwordless authentication is important for several reasons:

1. Enhanced security: Passwords can be weak, easily guessable, or susceptible to data breaches. Passwordless authentication reduces the reliance on passwords, which are often the weakest link in the security chain. Instead, stronger authentication factors such as biometrics or hardware tokens are used, making it more difficult for unauthorized individuals to gain access to user accounts.

2. Reduced password-related risks: With passwordless authentication, common risks associated with passwords are mitigated. These risks include password reuse across multiple accounts, weak or easily guessable passwords, and the need for password resets. By eliminating passwords, organizations can significantly reduce the potential for account compromises and unauthorized access.

3. User convenience: Passwordless authentication improves the user experience by eliminating the need to remember and manage complex passwords. Users no longer have to worry about forgetting passwords, resetting them, or encountering difficulties when trying to create strong and unique passwords for different accounts. This convenience factor can lead to increased user satisfaction and engagement.

4. Phishing prevention: Passwordless authentication can help combat phishing attacks. Traditional password-based systems are vulnerable to phishing, where attackers trick users into revealing their passwords through deceptive emails or websites. With passwordless methods like biometrics or device-based authentication, the user’s credentials cannot be easily phished since they are tied to unique physical characteristics or possession of a trusted device.

5. Compliance with modern security standards: Many industry regulations and standards, such as the Payment Card Industry Data Security Standard (PCI DSS) and the National Institute of Standards and Technology (NIST) guidelines, advocate for stronger authentication methods. Implementing passwordless authentication aligns with these recommendations and helps organizations meet compliance requirements.

Overall, passwordless authentication offers a more secure and convenient way to verify user identities, reducing the reliance on passwords and addressing the vulnerabilities associated with traditional password-based systems.

The passwordless authentication process relies on alternatives to passwords, such as biometrics (fingerprint scanning, facial recognition, voice recognition, etc.), OTPs (one-time passwords), and security keys, to verify a user’s identity. This offers several advantages, such as enhanced security and a better user experience. In this article, we will discuss the top passwordless authentication software providers for the retail and e-commerce industry.

Top passwordless authentication providers

MojoAuth

MojoAuth is a true passwordless authentication software for retail and e-commerce companies, designed to offer a seamless user experience for online shopping. MojoAuth offers a combination of biometric authentication and advanced encryption technology to secure users’ accounts. Users can create unique and encrypted links using their mobile devices, which can then be used to access their accounts without the need for a password.

Key features of MojoAuth include:

Support for multiple passwordless authentication methods such as Magic link, FIDO, Passkeys, Email OTP, and Phone OTP.
MojoAuth prioritises user convenience by offering a seamless authentication experience.
Reduce password-related support costs and mitigation of security breach costs
Device-independent technology, easy to implement in any technology

HYPR

HYPR is a well-known passwordless authentication solution that focuses on providing secure, fast, and user-friendly authentication methods for businesses across various industries, including retail and e-commerce. HYPR combines biometrics, mobile devices, and FIDO security standards to offer a strong and secure authentication process.

Key features of HYPR include:

Biometric authentication support, such as fingerprint scanning and facial recognition
Support for FIDO security standards
Cross-platform support, offering compatibility with various devices and platforms
Device trust engine to determine the trustworthiness of a user’s mobile device

Trusona

Trusona is a passwordless authentication platform that focuses on improving user experiences while maintaining robust security. Trusona offers a range of passwordless solutions that cater to the unique requirements of different industries, including retail and e-commerce.

Key features of Trusona include:

Mobile and web SDKs for easy integration into existing systems
Support for various authentication methods, such as QR code scanning, push notification OTPs, and device biometrics
Anti-replay technology, which prevents replay attacks by verifying user interactions in real-time

Auth0

Auth0 is a popular passwordless authentication provider that offers a comprehensive and customizable platform for businesses. In addition to passwordless, Auth0 supports multiple authentication methods, which can be combined to create a multi-factor authentication setup.

Key features of Auth0 include:

Various passwordless authentication options, such as one-time password (OTP) sent via SMS or email, and device biometrics
Customizable rules and advanced security features, such as risk-based authentication and bot detection
Integration with popular identity providers, such as Google, Facebook, and Apple
Support for multi-factor authentication

ForgeRock

ForgeRock is a digital identity management platform offering a robust passwordless authentication solution for businesses in various industries. The platform focuses on improving customer experiences while ensuring the highest level of security.

Key features of ForgeRock include:

Support for a variety of passwordless authentication options, such as biometrics, push notifications, and hardware tokens
Integration with popular social media platforms for single sign-on (SSO)
Adaptive risk management for detecting and preventing potential threats
Customizable workflows and user experiences

Conclusion

The adoption of passwordless authentication methods in the retail and e-commerce industry is becoming essential in addressing modern security threats and improving user experiences. The passwordless authentication software providers discussed in this article offer various solutions tailored to the unique requirements of the industry. These providers focus on security and user experiences while catering to the specific needs of the retail and e-commerce sector. By implementing passwordless authentication solutions, businesses can protect their customers’ data and provide a seamless, secure, and frictionless environment for online shopping.

Experience Effortless Security with Affirm's Passwordless Login System

Andy Agarwal — Tue, 23 May 2023 09:53:09 +0000

In the world of online financing, providing a seamless and secure customer experience is crucial for building trust and fostering long-term relationships. Affirm, a leading provider of flexible payment solutions, has been dedicated to enhancing its platform to ensure a smooth and secure experience for its customers. One such innovation is Affirm’s passwordless login system that not only simplifies the login process but also improves security. In this article, we will explore how Affirm’s passwordless login and Single Sign-On (SSO) system streamline the onboarding process and help customers onboard faster without compromising security.

Affirm’s Passwordless Login System

Affirm’s passwordless login system eliminates the need for customers to remember and manage multiple passwords, making the login process more effortless and secure. By leveraging passwordless authentication, customers can quickly access their Affirm account without having to remember a password.

To use the passwordless login system, customers can visit Affirm’s login portal ( https://www.affirm.com/user/signin) and enter their email address or mobile number. Affirm then sends a secure, one-time use link to the customer’s email or a unique code to their mobile number. Once the customer clicks on the link or enters the code, they are granted immediate access to their account without the need for a password.

Benefits of Affirm’s Passwordless Login System

- Streamlined Onboarding Process

Affirm’s passwordless login system simplifies the onboarding process for new customers. With a quick and easy authentication method, customers can gain access to their accounts faster, allowing them to take advantage of Affirm’s payment solutions without any hassle. This streamlined process not only saves time but also reduces the chances of errors and confusion that can arise from managing multiple passwords.

- Improved Security

By implementing passwordless authentication, Affirm enhances the security of its platform. Since customers no longer need to remember and enter passwords, the risk of password-related security breaches, such as phishing attacks or brute-force attempts, is significantly reduced. This improved security measures help to build trust and confidence among customers.

- Enhanced Customer Experience

Affirm’s passwordless login system provides a user-friendly and smooth experience for its customers. The hassle of remembering and resetting passwords is eliminated, allowing customers to focus on managing their finances and making informed decisions. This enhanced customer experience helps to foster long-term relationships and customer loyalty.

- Single Sign-On (SSO) Integration

In addition to passwordless authentication, Affirm’s platform also supports Single Sign-On (SSO) integration, which further streamlines the login process. With SSO, customers can access Affirm’s platform using just one set of credentials for multiple applications. This simplifies access management and ensures a seamless user experience across various platforms.

Conclusion

Affirm’s passwordless login system is a testament to their commitment to providing a smooth and secure customer experience. By streamlining the login process, accelerating onboarding, and enhancing security, Affirm’s passwordless authentication and Single Sign-On (SSO) system allow customers to access their accounts effortlessly, without worrying about password-related risks. If you haven’t already, now is the perfect time to explore Affirm’s innovative login system and experience its benefits firsthand.

What Is Credential Stuffing? How To Prevent Credential Stuffing Attacks

Andy Agarwal — Tue, 02 May 2023 07:32:14 +0000

Introduction:

Cybersecurity is a growing problem due to the increasing number of data breaches and online accounts. Credential stuffing attacks are on the rise and must be addressed with precedence and efficiency. However, there is an innovative solution called MagicLinks that can help prevent credential stuffing attacks effectively. In this interactive blog, we will explore what credential stuffing is, how it works, and most importantly, how MagicLinks can be used to prevent credential stuffing attacks.

What is Credential Stuffing?

Credential stuffing is a type of cyber attack where attackers use stolen username and password combinations, typically obtained from previous data breaches, to gain unauthorized access to user accounts on different online platforms. The attackers automate the process by using software tools that systematically try multiple combinations of usernames and passwords across various websites or applications until a successful login is achieved. Once the attacker gains access, they can misuse the account for various malicious activities, including data theft, financial fraud, and other types of cybercrime.

How Does Credential Stuffing Work?

Credential stuffing attacks typically follow a pattern of steps:

1. Obtaining Credentials: Attackers obtain usernames and passwords from data breaches, dark web marketplaces, or other illicit means. These credentials may be from previous data breaches of other websites or applications.

2. Automated Login Attempts: Attackers use automated tools to systematically try multiple combinations of usernames and passwords across different online platforms. These tools can quickly make numerous login attempts in a short period of time, exploiting the stolen credentials to gain unauthorized access.

3. Account Takeover: Once the attacker successfully logs in, they gain unauthorized access to the user’s account. They can then perform various malicious activities, such as stealing sensitive data, conducting financial fraud, or disrupting the account owner’s activities.

How to Prevent Credential Stuffing Attacks:

Here are some effective measures to prevent credential stuffing attacks:

1. Password Policy: A complex password policy is a set of guidelines and requirements that dictate how users should create and manage their passwords for accessing company systems, applications, and data. This policy is designed to enhance security by ensuring that passwords are strong and difficult to guess or hack.Business need to design a good password policy.

2. Enable Multi-Factor Authentication (MFA): Businesses can also consider using specialized MFA solutions, which can provide additional security features such as risk-based authentication, which assesses the risk level of a login attempt based on factors such as location, device, and behavior.It will reduce the risk of identity theft.

3. Monitor for Data Breaches: Businesses need to be proactive in monitoring for potential threats. This may involve using specialized software to track network traffic and flag any suspicious activity. It may also involve implementing strict security protocols and providing training to employees on how to identify and respond to potential breaches.

4. Implement Account Lockouts and Throttling: Implement account lockout policies and throttling mechanisms that temporarily lock or limit the number of login attempts after a certain number of failed login attempts. This can thwart automated tools used in credential stuffing attacks.

5. Educate Users on Phishing Awareness: Phishing attacks are often the starting point for credential stuffing attacks. Educate users on how to identify and avoid phishing attempts, such as being cautious of suspicious emails or websites, not clicking on unknown links, and not providing credentials unless verified.

6. Regularly Update and Patch Software: Keep all your software up-to-date with the latest security patches. This includes operating systems, web browsers, plugins, and other applications. Patching known vulnerabilities helps to prevent attackers from exploiting them in credential stuffing attacks.

7. Implement Anomaly Detection: Implement anomaly detection mechanisms that can detect unusual login patterns or behaviour, such as multiple failed login attempts from different locations or devices within a short period of time. This can help detect and block credential stuffing attacks in real-time.

How MagicLinks Can Prevent Credential Stuffing Attacks:

MagicLinks is an innovative solution that can effectively prevent credential stuffing attacks. MagicLinks replaces the need for passwords with secure, time-limited, and unique links that are sent to the user’s registered email address or mobile device. Here’s how MagicLinks can prevent credential stuffing attacks:

Please Click on the given Link to Know how Magic Links can prevent Credential Stuffing attacks-

Password Hashing 101: All About Password Hashing and How it Works

Andy Agarwal — Tue, 25 Apr 2023 07:27:27 +0000

Most people have a love-hate relationship with passwords. On the one hand, we need them to keep our online accounts safe. But on the other hand, they can be hard to remember and easy to forget.

And then there are the security concerns. With data breaches becoming more common, it’s important to choose passwords that are strong and secure. But is that enough to secure passwords? But what does that mean, exactly?

In this article, we’ll take a look at what password hashing is and why it’s important. We’ll also give you some tips on how to choose strong passwords and keep them safe.

What is password hashing?

Password hashing is a process of using a hash function to convert a password into an unrecognizable series of characters. This makes it difficult for malicious actors to gain access to the password, as the characters are not easily decipherable. This string cannot be deciphered or converted back to the original password, thus allowing it to be stored securely in a database.

Encryption and hashing are two different terms used in cryptography and data security. Here hashing should not be confused with encryption. Encryption and hashing are two different processes but both are used to protect data by converting them to an unrecognizable series of characters so that data cannot be easily interpreted. Encryption scrambles the data using a key and converts a normal readable message into a garbage message or not readable message known as Ciphertext so that only people with the correct key can read the data. Encryption is used to protect sensitive data from unauthorized access and is very popular

Whereas hashing is a process of converting data into a fixed-length code. Hashing works by taking a large amount of data and running it through a mathematical algorithm, which results in a unique, irreversible, fixed-length code. It is used to verify the integrity of data and to ensure that data has not been modified.

The most important key thing to remember about hashing is that it is a one-way process. This is important for security, as it means that even if a hacker gets access to the database, they will not be able to see the passwords.

Example-

For example, the SHA256 hash of “Liman1000” is “1cde884c4ba81f70a4551714e89a94ca7f25c89c14eedc4b11b881a783bd1767”

Similarly,

the SHA256 hash of most common password “qwerty12345” is “f6ee94ecb014f74f887b9dcc52daecf73ab3e3333320cadd98bcb59d895c52f5”

History of password hashing

As early as the 1970s, computer scientists began exploring solutions to make passwords more secure, long before the emergence of the World Wide Web in the 1990s.

In the 1970s, Robert Morris Sr., a cryptographer at Bell Labs, developed the concept of “hashing”. This process takes a string of characters and converts it into a numerical code that represents the original phrase, thus eliminating the need to store the password itself in the password database.

This technology was adopted in early UNIX-like operating systems, which have since become a staple across a variety of mobile devices, workstations, and other systems, such as Apple’s macOS and Sony’s PlayStation 4.

Type of hashing algorithm

There are many different algorithms that can be used for password hashing. We have explained a few of them below.:

1. MD5 (Message Digest Algorithm 5): MD5 is a widely used hashing algorithm that is employed for digital signatures and other security-related applications. MD5 is an algorithm that produces a 128-bit hash value from an arbitrary length of data. This is a one-way cryptographic function, meaning that the original data cannot be derived from the generated hash. MD5 is an algorithm that is designed to be extremely difficult to reverse, making it useful for verifying the integrity of data.

2. SHA-1 (Secure Hash Algorithm 1): SHA-1 is a hashing algorithm that produces a 160-bit hash value from an arbitrary length of data. SHA-1 is an algorithm that is designed to be extremely difficult to reverse, making it useful for verifying the integrity of data. SHA-1 is widely used in many security applications, including digital signatures and message authentication codes (MACs).

3. SHA-2 (Secure Hash Algorithm 2): SHA-2 is a set of hashing algorithms developed by the National Security Agency (NSA). SHA-2 is an improvement over the SHA-1 algorithm and produces a 256-bit hash value from an arbitrary length of data. SHA-2 is an algorithm that is designed to be extremely difficult to reverse, making it useful for verifying the integrity of data. SHA-2 is widely used in many security applications, including digital signatures and message authentication codes (MACs).

4. SHA-3 (Secure Hash Algorithm 3): The SHA-3 family of hash functions consists of SHA3-224, SHA3-256, SHA3-384, SHA3-512, and SHAKE128/256, which produce hash values of varying lengths (224, 256, 384, and 512 bits, respectively). These algorithms are seen as more secure than SHA-2.

5. RIPEMD-160 (RACE Integrity Primitives Evaluation Message Digest): RIPEMD-160 is an algorithm that generates a 160-bit hash value from any amount of data. This hash is used to verify the integrity of the data and to protect it from changes. This algorithm is specifically designed to be extremely difficult to reverse, making it useful for verifying the integrity of data. RIPEMD-160 is widely used in many security applications, including digital signatures and message authentication codes (MACs).

6. BLAKE2 (BLAKE2s): BLAKE2 is a hashing algorithm that produces a 256-bit hash value from an arbitrary length of data. BLAKE2 is an algorithm that is designed to be extremely difficult to reverse, making it useful for verifying the integrity of data. BLAKE2 is widely used in many security applications, including digital signatures and message authentication codes (MACs).

7. Whirlpool: Whirlpool is a hashing algorithm that produces a 512-bit hash value from an arbitrary length of data. Whirlpool is an algorithm that is designed to be extremely difficult to reverse, making it useful for verifying the integrity of data. Whirlpool is widely used in many security applications, including digital signatures and message authentication codes (MACs).

8. Tiger: Tiger is a hashing algorithm that produces a 192-bit hash value from an arbitrary length of data. Tiger is an algorithm that is designed to be extremely difficult to reverse, making it useful for verifying the integrity of data. Tiger is widely used in many security applications, including digital signatures and message authentication codes (MACs).

9. Skein: Skein is a hashing algorithm that produces a 512-bit hash value from an arbitrary length of data. Skein is an algorithm that is designed to be extremely difficult to reverse, making it useful for verifying the integrity of data. Skein is widely used in many security applications, including digital signatures and message authentication codes (MACs).

10. HMAC (Hash-based Message Authentication Code): HMAC is a hashing algorithm that produces a 128-bit hash value from an arbitrary length of data. HMAC is an algorithm that is designed to be extremely difficult to reverse, making it useful for verifying the integrity of data. HMAC is widely used in many security applications, including digital signatures and message authentication codes (MACs).

11. GOST (GOST-34.11): GOST is a hashing algorithm that produces a 256-bit hash value from an arbitrary length of data. GOST is an algorithm that is designed to be extremely difficult to reverse, making it useful for verifying the integrity of data. GOST is widely used in many security applications, including digital signatures and message authentication codes (MACs).

In addition to choosing a secure password hashing algorithm, it is also important to use good password hygiene to ensure the security of user accounts.

PBKDF2 (Password-Based Key Derivation Function 2): This is a key derivation function that is designed to be slow and resource-intensive, making it more difficult for attackers to crack passwords. It is often used in combination with a cryptographic hash function, such as SHA-2, to create a secure password hash.

Argon2: This is a key derivation function that was designed to be more secure and resistant to attacks than PBKDF2. It has several parameters that can be adjusted to increase the difficulty of cracking passwords, including the amount of memory used, the number of iterations, and the parallelism.

bcrypt: This is a key derivation function that was designed specifically for password hashing. It is based on the Blowfish encryption algorithm and uses a variable-length salt to make it more difficult to crack passwords.

To sum up, a wide variety of hashing algorithms are available, each offering varying levels of protection. Among the most popular hashing algorithms for digital signature and other security purposes are MD5, SHA-1, SHA-2, RIPEMD-160, BLAKE2, Whirlpool, Tiger, Skein, HMAC, and GOST. Each algorithm is designed to be extremely difficult to reverse, making them useful for verifying the integrity of data.

How do hashing algorithms work

Hashing algorithms are mathematical functions used to create a unique, fixed-length output (known as a hash or message digest) from an input of any size. These algorithms are used to ensure data integrity, validate digital signatures, and authenticate messages. To generate a hash, the algorithm takes an input, such as a file or a string of data, and processes it through an algorithm that produces a unique, fixed-length output.

This output is usually represented as a hexadecimal string, which is much shorter than the original data. Hashing algorithms are designed to be one-way functions, making it difficult to determine the original data from the hash.

Hashing algorithms are also used to authenticate messages and digital signatures, as the sender can generate a hash of the message and sign it with their private key. The receiver can then use the sender’s public key to verify that the message has not been altered during transit.

Recommended algorithm for hashing

The Secure Hash Algorithm (SHA) family of algorithms is the most widely used and recommended for hashing. It comprises of a range of algorithms, with SHA-256 and SHA-512 offering higher levels of security and SHA-224 as a lighter version of SHA-256. SHA-2 is regularly used for digital signatures, authentication and to ensure message integrity.

Why password hashing is important?

Password hashing is an essential step of data security in order to protect data from unauthorized access. It involves taking a user’s password and transforming it into a random string of characters, also known as a “hash”. This hash is used to verify the user’s identity and protect the user’s data. This process is designed to make the password unreadable and therefore, more secure. By making the password unreadable, it prevents malicious actors from accessing the data.

Password hashing is a must security measure as it helps protect user passwords from being accessed by attackers in a commonly readable format, at least it doesn’t directly expose. Hashing algorithms create a unique and complex hash for each user, making it difficult for an attacker to guess the password. Additionally, the hashes are very difficult to reverse thus making it more harder for attackers to use brute-force attacks to guess passwords. This helps protect users from having their passwords exposed and their accounts compromised.

Finally, password hashing is important because it increases the security of stored passwords. By hashing a user’s password, it ensures that no one can view the original password, even if the data is compromised.

Therefore, even if a hacker were to gain access to the stored data, they would not be able to view the user’s original password. In summary, password hashing is an important security measure that helps protect user data from unauthorized access. It makes passwords difficult to guess and increases the security of stored passwords. Therefore, it is an essential security measure for any online system that requires a user to enter a password.

In summary, a few key reasons why password hashing is important:

Security: As mentioned above, password hashing is a one-way process, meaning that it is not possible to reverse the process and retrieve the original password from the hash. This makes it much more difficult for attackers to access user passwords, even if they manage to breach the database.

Scalability: Password hashing algorithms are designed to be fast and efficient, making them suitable for large-scale applications with millions of users. This is important because the hashing process needs to be performed each time a user logs in, and a slow hashing algorithm could cause performance issues for the application.

Compatibility: Password hashing algorithms are designed to be compatible with a wide range of systems and platforms, making it easy to integrate into any application.

Enhancing security with the addition of salt in hashing:

An improved way to store passwords Hashed passwords are not unique to themselves due to the deterministic nature of the Hash function: when given the same input, the same output is always produced. If User A and User B both choose qwerty12345 as a password, their hash would be the same:

SHA256 hash for User A for password “qwerty12345” is “f6ee94ecb014f74f887b9dcc52daecf73ab3e3333320cadd98bcb59d895c52f5”

SHA256 hash for User B for password “qwerty12345” is “f6ee94ecb014f74f887b9dcc52daecf73ab3e3333320cadd98bcb59d895c52f5”

Password salting is a technique used to increase the security of stored passwords. It involves adding random data, known as a salt, to each password before it is hashed. This random data makes it more difficult for attackers to crack the passwords, even if they have access to the hashed version of them.

Salt values are stored along with the hashed passwords so that when a user attempts to log in, the salt can be retrieved and used to generate the same hash that was stored. This makes it much harder for attackers to guess the passwords, even if they have access to the database.

For example, let’s consider the same example where the password for both User A and User B is “qwerty12345”.

Similarly, SHA256 hash for User A and User B for password “qwerty12345” is “f6ee94ecb014f74f887b9dcc52daecf73ab3e3333320cadd98bcb59d895c52f5”

To salt this password, a random string of characters is added to the end.

For User A → Salt added is - @hjS7 Password - qwerty12345 The salted version of the password is - qwerty12345@hjS7 Now SHA256 hash for salted version of the password “qwerty12345@hjS7” is “1103d94d5c848575f87f7fbe843effdcea4198fead77a24400c43774e4cfac4a”

For User B → Salt added is - 98@*st6 Password - qwerty12345 The salted version of the password is - qwerty1234598@*st6 SHA256 hash for salted version of the password “qwerty1234598@*st6” is “1cecec3a0606a716d6f4ca2c285643d4aae169cfb1aa3c8bbb88fd09f2102afa”

If we compare the salted version of the password for both User A and User B having the same password ‘qwerty12345’.

User A: “1103d94d5c848575f87f7fbe843effdcea4198fead77a24400c43774e4cfac4a”

User B: “1cecec3a0606a716d6f4ca2c285643d4aae169cfb1aa3c8bbb88fd09f2102afa”

As you see, for the same password, the hash generated is different. This is making it more complex to reverse engineer in extracting the passwords.

Summary

In conclusion, password hashing is a technique used to secure user passwords by transforming a plaintext password into a complex string of characters called a hash. This hash is then stored in a database and compared to the user’s input when they attempt to log in, ensuring only authorized users can access the system.

Hashing passwords prevents the plaintext password from ever being stored, preventing it from being stolen in the event of a data breach. It also allows the website to verify the user’s identity without needing to store the plaintext password. When implementing a secure password hashing system, it is important to use a strong hashing algorithm such as bcrypt. Bcrypt is designed to be computationally expensive, making it difficult for attackers to brute-force guess the plaintext passwords from the hashes.

Simplify authentication with MojoAuth

You can minimize the overhead of hashing, salting, password security, password management, and all password-related issues with MojoAuth.

Mojoauth passwordless authentication helps businesses increase customer engagement by providing customers with a secure and convenient way to log into their accounts. With Mojoauth, customers can authenticate with a single click, without having to remember a password. This simplifies the login process, making it easier and faster for customers to access their accounts and complete their desired actions.

Industry trends and developments in passwordless authentication

Andy Agarwal — Tue, 18 Apr 2023 14:23:28 +0000

Passwordless authentication is a rapidly developing trend that aims to eliminate passwords by using biometric data, security keys, and one-time codes for a stronger and more convenient authentication process. Major tech companies are adopting passwordless authentication, and industry standards are emerging to ensure secure implementation.

Passwordless authentication is a new paradigm in the authentication industry that offers several benefits compared to traditional password-based authentication methods.

In this blog post, we will explore the latest industry trends and developments in passwordless authentication and provide insights on how these trends will impact the industry and your SaaS solution.

Trend #1: Increased Adoption of Passwordless Authentication

Passwordless authentication is gaining traction among businesses of all sizes and industries. The trend of increased adoption of passwordless authentication is not limited to large and midsize enterprises, as small businesses are also beginning to see the benefits of this technology. Passwordless authentication is a versatile solution that can be implemented in various industries, including healthcare, eCommerce, finance, education, and government.

This adoption is due to the improved security, ease of use, and cost-effectiveness that passwordless authentication offers compared to traditional password-based authentication methods. Passwordless authentication methods such as biometrics, security keys, and one-time passcodes provide an extra layer of security without compromising user experience.

In addition to the Gartner report, other industry analysts have predicted similar trends in passwordless authentication adoption. For example, a report by MarketsandMarkets predicts that the global passwordless authentication market will grow from USD 1.2 billion in 2020 to USD 3.8 billion by 2025, at a Compound Annual Growth Rate (CAGR) of 25.6%. This growth is driven by the increasing demand for secure and user-friendly authentication methods.

Trend #2: Magic Link

A magic link is a type of passwordless authentication method that allows users to log in to their accounts by clicking on a unique link sent to their email address or mobile phone. With a magic link, users don’t have to remember complex passwords or go through a lengthy authentication process. Instead, they simply click on the link, which authenticates their identity and grants them access to their account. Magic links are becoming more popular in the passwordless authentication industry due to their ease of use and convenience. They are also more secure than traditional passwords since they are generated for a single use and expire after a set period of time.

Magic link adoption has been steadily increasing in recent years, particularly in the SaaS and eCommerce industries. As businesses look for ways to improve their security while also providing a seamless user experience, magic links have become an attractive solution.

Some major companies, such as Slack, Dropbox, and Medium, have already implemented magic links for authentication. The rise of mobile devices and the increasing use of email and messaging apps have also contributed to the growth of magic link adoption.

In terms of development trend, there are several companies that are working to improve the magic link authentication process. For example, some are developing machine learning algorithms to better detect fraudulent login attempts, while others are exploring the use of blockchain technology for added security. Additionally, some companies are integrating magic links with other authentication methods, such as biometric authentication, for a more secure and seamless authentication process.

Trend #3: Biometric Authentication

Biometric authentication has gained popularity in recent years, especially in the mobile device market. According to a report by Grand View Research, the global biometric authentication market was valued at $14.5 billion in 2020 and is expected to grow at a compound annual growth rate of 15.6% from 2021 to 2028. The report also highlights that the adoption of biometric authentication is driven by the need for enhanced security and convenience in various sectors, including the government, healthcare, finance, and eCommerce industries.

In fact, the eCommerce sector is expected to witness significant growth in biometric authentication adoption due to the rising demand for seamless and secure online transactions. For example, a study by Juniper Research estimates that the use of biometric authentication in eCommerce will reach over 2 billion users by 2023, representing a five-fold increase from 2018.

Trend #4: Multi-Factor Authentication

Multi-factor authentication (MFA) is a crucial aspect of the passwordless authentication landscape, as it adds an extra layer of security to the login process. According to a report by MarketsandMarkets, the global MFA market size is projected to grow from $11.1 billion in 2020 to $23.5 billion by 2025, at a Compound Annual Growth Rate (CAGR) of 16.2%.

This growth can be attributed to the increasing number of cyberattacks and data breaches across various industries, driving the adoption of MFA as a security measure. Additionally, MFA is becoming more user-friendly and affordable, leading to its widespread adoption in the SaaS and eCommerce industries. The most common MFA methods used by businesses include SMS-based authentication, push notifications, biometric authentication, and security keys.

Trend #5: FIDO2 Standards

FIDO2 is gaining popularity in the passwordless authentication industry because it provides a more secure and convenient authentication process. According to a report by MarketsandMarkets, the global passwordless authentication market is expected to grow from $1.2 billion in 2020 to $2.4 billion by 2025, with FIDO2 being one of the key drivers of this growth. The report also suggests that the demand for FIDO2-based authentication solutions is increasing due to the rise in cyber threats, data breaches, and the need for a more secure and convenient authentication process. FIDO2-based authentication solutions are being implemented by various industries, including SaaS and eCommerce, to improve security and user experience for their customers.

Trend #6: Zero Trust Security

Zero Trust Security is a holistic approach to security that goes beyond traditional perimeter-based security models. It operates on the principle of “never trust, always verify” and assumes that no user or device should be trusted, regardless of their location or context. In Zero Trust Security, access controls are based on a combination of factors, including the user’s identity, device information, location, and behavior.

Passwordless authentication is a key component of the Zero Trust Security model, as it eliminates the need for passwords, which are often the weakest link in a security chain. By using passwordless authentication methods such as biometrics, security keys, or one-time passcodes, Zero Trust Security can provide a more secure authentication process, reducing the risk of data breaches and compromised accounts.

Zero Trust Security has become increasingly popular in recent years, with more and more organizations adopting the approach. According to a survey by Cybersecurity Insiders, 72% of organizations plan to implement a Zero Trust Security model by 2023. The same survey found that passwordless authentication is the top security technology that organizations are planning to implement as part of their Zero Trust Security strategy.

Why Passwordless is getting Popular in SaaS and eCommerce Industry

Passwordless authentication is becoming increasingly popular among SaaS and eCommerce businesses due to the many benefits it offers over traditional password-based authentication methods. Here are some of the reasons why passwordless authentication is gaining traction in these industries:

Improved Security:

Passwordless authentication offers a significant improvement in security compared to traditional password-based authentication methods. Passwords can be easily guessed, stolen or shared, making them the weakest link in the security chain. Hackers can use brute-force attacks or phishing schemes to gain access to passwords, which can then be used to compromise user accounts and steal sensitive data.

Passwordless authentication methods eliminate the need for passwords and instead rely on more secure authentication mechanisms such as one-time passcodes, magic links, biometrics or security keys. One-time passcodes and magic links are sent directly to a user’s email or phone, allowing them to log in without needing to remember a password. Biometric authentication, such as fingerprint or facial recognition, uses unique physical characteristics of the user to verify their identity. Security keys are physical devices that the user must possess to authenticate themselves, adding an extra layer of security.

By eliminating passwords and adopting these more secure authentication methods, passwordless authentication can reduce the risk of data breaches and compromised accounts.

Enhanced User Experience:

In addition to improved security, passwordless authentication also offers an enhanced user experience. Traditional password-based authentication methods often require users to create and remember complex passwords, leading to frustration and confusion. Users may forget their passwords or need to reset them frequently, leading to increased support costs for businesses.

Passwordless authentication eliminates the need for passwords and replaces them with more user-friendly authentication methods such as biometrics, one-time passcodes, or security keys. These methods require less effort from users and are generally quicker and easier to use. For example, biometric authentication simply requires a user to provide a fingerprint or facial recognition scan, which is much faster and more convenient than typing in a long and complex password.

The improved user experience provided by passwordless authentication can lead to increased user adoption and satisfaction, which is particularly important for SaaS and eCommerce businesses. In these industries, customer satisfaction is crucial to maintaining customer loyalty and repeat business. By offering a more user-friendly login experience, businesses can reduce friction and frustration for users, leading to increased customer satisfaction and loyalty.

Cost-Effectiveness:

In addition to improved security and enhanced user experience, another key benefit of passwordless authentication is cost-effectiveness. Password management can be a significant cost for businesses, particularly for those in the SaaS and eCommerce industries that rely heavily on digital authentication.

Password-related support and maintenance can be time-consuming and costly for businesses, especially when considering the costs associated with resetting forgotten passwords, managing secure password storage, and other related tasks. With passwordless authentication, businesses can eliminate these costs entirely, as there are no passwords to manage or reset.

Moreover, the cost savings associated with passwordless authentication can be significant, especially for larger enterprises. Gartner estimates that password reset support calls account for 20% to 50% of all help desk calls. By adopting passwordless authentication methods, such as biometrics or security keys, businesses can reduce the volume of help desk calls and support tickets related to password management, leading to significant cost savings.

In addition to cost savings related to support and maintenance, passwordless authentication can also help businesses reduce the risk of costly data breaches and security incidents. The cost of a data breach can be significant, with the average cost per record compromised estimated to be $150. By adopting passwordless authentication, businesses can reduce the risk of data breaches and their associated costs.

Compliance:

In addition to the benefits of improved security, enhanced user experience, and cost-effectiveness, compliance is another important driver of passwordless authentication adoption among SaaS and eCommerce businesses.

Regulations such as GDPR or HIPAA require higher levels of security and data protection, particularly when it comes to user authentication. Traditional password-based authentication methods may not be sufficient to meet these regulatory requirements, as they can be vulnerable to various security threats and data breaches.

Passwordless authentication can help businesses comply with these regulations by providing a more secure authentication process that is less susceptible to attack. For example, biometric authentication methods, such as facial recognition or fingerprint scanning, can provide a higher level of security than traditional passwords.

In addition, many passwordless authentication methods comply with industry standards and best practices for security and data protection. By adopting passwordless authentication methods, SaaS and eCommerce businesses can not only improve security and user experience but also ensure compliance with regulations and industry standards. This can help to build trust with customers and partners, which can be a valuable asset in today’s competitive business landscape.

Furthermore, passwordless authentication can help businesses avoid the costly consequences of data breaches and other security incidents. These consequences can include not only financial losses but also reputational damage, loss of customer trust, and legal liabilities

Convenience:

The convenience factor of passwordless authentication is also a significant driver of its adoption in the SaaS and eCommerce industries. With passwordless authentication, users can access their accounts with a simple, one-click authentication process, eliminating the need to remember and enter complex passwords. This can be especially beneficial for users who access their accounts from multiple devices or locations, as it allows them to seamlessly switch between devices without the need to re-enter passwords.

In addition, passwordless authentication methods such as biometrics, such as fingerprints or facial recognition, can offer an even greater level of convenience and speed for users. For example, a customer can use their face or fingerprint to quickly and securely access their account and make purchases on an eCommerce website, without the need to enter a username and password.

By offering a more convenient login experience, businesses can improve customer satisfaction and retention. This can translate into increased revenue and a stronger competitive position in the market. As a result, many businesses are turning to passwordless authentication as a way to improve the overall user experience and build a loyal customer base.

SaaS and eCommerce businesses are adopting passwordless authentication in different ways. For example, eCommerce businesses are using biometric authentication for faster and more secure checkout experiences. Similarly, SaaS businesses are implementing passwordless authentication to improve security and user experience for their customers. With more passwordless authentication methods becoming available, such as FIDO2, we can expect to see even more businesses adopting this technology in the future.

Impact of Passwordless Authentication on SaaS and eCommerce Businesses

Passwordless authentication is transforming the way SaaS and eCommerce businesses approach security and user experience. The adoption of passwordless authentication is driven by the many benefits it offers, including enhanced security, user experience, cost-effectiveness, compliance, and convenience. Biometric authentication is increasingly used in eCommerce for faster and more secure checkout experiences, while SaaS businesses are implementing passwordless authentication to improve security and user experience.

Passwordless authentication reduces the cost of password management and helps businesses comply with regulations such as GDPR or HIPAA. Overall, passwordless authentication is becoming the new standard for secure and user-friendly authentication in SaaS and eCommerce.

Here are some data and stats on passwordless authentication adoption in the SaaS and eCommerce industry:

According to a 2021 survey by Auth0, 57% of SaaS companies have implemented passwordless authentication methods, and 77% of those that haven’t yet are planning to do so in the future.
A 2020 survey by Payment Gateway Provider, Adyen, found that 83% of shoppers prefer biometric authentication over traditional passwords for online payments.
According to the same Adyen survey, the use of biometric authentication/passwordless authentication in eCommerce has increased by 30% in the past year.
Research by PwC shows that 69% of consumers would prefer to use biometric authentication methods such as fingerprint recognition, facial recognition, or voice recognition to access their accounts.

These statistics highlight the growing adoption of passwordless authentication in the SaaS and eCommerce industry and the increasing preference of users for more convenient and secure authentication methods.

Conclusion

Passwordless authentication is an exciting development in the authentication industry. The trends we discussed above show that passwordless authentication is gaining popularity due to its security, convenience, and cost-effectiveness. SaaS providers need to adopt these trends to remain competitive and provide the best user experience to their customers. Biometric authentication, MFA, FIDO2 standards, and zero trust security are some of the trends that are shaping the passwordless authentication industry. As the industry continues to evolve, we can expect to see even more developments in passwordless authentication.

Best Practices for Establishing Secure Remote Workplace for Your Employees

Andy Agarwal — Thu, 16 Mar 2023 10:44:01 +0000

Security should be a priority in remote workplaces. Wondering how to keep your employees’ remote work secure? Find out in this article.

Working remotely has been commonplace for most business owners and employees, especially during the pandemic. With quarantine restrictions in place, many companies had to switch to a remote work setting. It was an unsettling change for many, and the huge concern was how to maintain security when employees work remotely.

Adapting to a remote work setting when you’re used to working at a physical office is a constant learning process. But the sometimes unpredictable nature of the internet leads to serious concerns about security controls and cyberattacks. According to a recent study by OpenVPN, 90% of IT professionals believe remote workers aren’t secure.

Fortunately, there are ways to ensure that your employees’ remote workplace is secure. Check these 6 working from home security best practices:

1. Separating Work and Personal Devices

Just like in a normal office setting, your employees should have a separate personal and work device-laptops or mobile phones. Personal activities, such as online shopping, browsing social media, or searching for the best online degrees to get, are common risks for cybersecurity issues. When you use a business device for personal browsing, it exposes confidential data and information, and the same is true when you perform business tasks on a personal device.

If you’re unsure about the initial investment of buying business devices for your employees, you can also think about renting those devices first. These days, there are a lot of companies renting out hardware. This way, you’ll also have a decent support and always somebody to talk to if there are any issues.

Other advantages of having a separate work and personal device include:

Establishing a good work-life balance
Helping your employees get into the right mindset and increasing productivity
Maintaining the company’s and employees’ rights to privacy
Implementing stronger loyalty to the company

2. Creating Secure Passwords

Few people realize it, but passwords are the initial line of defense regarding remote workplace safety. When setting up passwords, make sure they’re secure. Here are tips for creating a strong password:

Your password should be at least 12 characters long.
Don’t create a password that contains a familiar keyboard path.
Set up a unique password for each account you have.
Use a combination of lowercase and uppercase letters, special symbols, and numbers.
Make sure your passwords aren’t based on personal information, such as your initials and birthday.

Some people keep a record of their passwords through digital or printed notes for easy account recovery. However, these notes may be accessible to other people and even app hackers. Passwords can be costly, and just as making sure your passwords are secure, you should also ensure that your record of passwords is kept in a safe place.

3. Providing Sufficient Knowledge and Information

Many employees want to practice secure remote working but don’t have an idea of what this entails. As revealed by a Kaspersky survey, 73% of employees have claimed to not receive remote working cybersecurity guidance. At the very least, you should provide your employees with working knowledge on remote workplace safety.

It can be done through:

Mandatory seminars
Cybersecurity training
Informational graphics
Setting up and communicating remote work security policies

By informing your employees about cybersecurity, they’d be able to distinguish phishing from a regular business email. They’d also be aware of how to avoid ransomware attacks and what to do if your company is subject to it. Moreover, when your employees work in public places, they’d know how to prevent malware from getting in through public ports.

4. Securing Back Ups

Modern computers are highly reliable when it comes to data storage. However, you shouldn’t be too confident with important data and work-related files. Backing up your work projects and documents is necessary to recover them in case of device malfunctions, data corruption, and hardware or software failure.

You can back up and store your data on:

USB sticks
Time machines
Cloud storage (Dropbox, Google Drive, iCloud, OneDrive)
External hard drives
Network-attached storage

If anything, you may print your important documents and keep them in file cabinets. However, it can be hard to manage and might be impossible for certain file types like audio and videos.

5. Discouraging the Use of Public Wi-Fis

A public internet connection may seem convenient and cost-saving for your employees, but it might end up costing you more (as the employer). Employees might want to work in coffee shops and other public places where wi-fi is shared, but this might compromise the integrity of your files and networks.

As an employer, you should advise your employees to avoid public wi-fi as much as possible. If your budget allows for it, you can provide an allowance for a monthly internet connection or mobile data package. You may also encourage the use of an Encrypted Virtual Private Network (VPN).

6. Investing in Good Security Software

Last but not least on our work from home security checklist is investing in good security software. Doing so ensures that your employees’ remote devices are safe from any malware or malicious activity. Some of the best software systems you can use for effective remote working are:

Endpoint security software (ESET Endpoint Security, Trend Micro, McAfee Enterprise)
Collaboration software (Slack, Trello, Microsoft Teams)
Time tracking software (Time Doctor, Clockify, Toggl Track)
Video conferencing software (Google Meet, Zoom Meetings, RingCentral Video)
Task management software (TeamWork, Asana, ProofHub)
Passwordless authentication system

If you can, purchase the premium versions of your chosen software for increased productivity, security, and efficiency. You should also run regular software tests to identify problem areas within your company’s framework.

Establish a Secure Remote Workplace Now

As mentioned above, security is the bloodline of remote working. However, most employers don’t know how to establish a secure remote workplace for their employees. Start by following the remote work security best practices above. After all, a business’ success comes from safe transactions, effective collaboration, and mindful browsing.

Passwordless Authentication with React and MojoAuth

Andy Agarwal — Sat, 11 Mar 2023 06:52:26 +0000

Learn how to set up a Passwordless Authentication in React JS using MojoAuth.

We will be building a React application with passwordless authentication using MojoAuth Web SDK. We will learn the benefits of using passwordless over traditional login setup and how it can provide better security than the latter.

What is Passwordless Authentication

Passwordless Authentication, as the name suggests, is a way of authenticating your users without the need for passwords. Instead, an identifier is used to authenticate such as an email or phone number. Then a magic link or OTP is sent to the identifier, which is used to authenticate the user. Each request generates a new link or OTP, and invalidates any previous ones to provide a factor of security.

Passwordless authentication also works as 2-factor authentication since it requires you to have your email or phone number with you.

Passwordless authentication is a better choice for your application as it eliminates the need for passwords. As the user creates an account on multiple sites, the complexity of passwords keeps getting lower. The users prefer convenience over security, so they often use weak or the same passwords for their multiple accounts, thus increasing the vulnerability of your application.

Who is using passwordless

Many companies have already boarded the passwordless ship, including slack, medium, and WhatsApp. Passwordless authentication can be found in both mobile and web apps but is essentially suited for mobile applications since they are already on their device which will receive the link or OTP, which will create a very intuitive workflow.

Also, biometric authentication, another aspect of passwordless authentication, works very well with mobile apps since it relies on the face ID and fingerprint scanner and each device nowadays has at least one of the two above.

What we will build

In this tutorial, we will get a basic idea of passwordless authentication and learn to include it in a React application. We will create an intuitive workflow application managing our routings for a better User Experience.

To check out the working demo of the app built in this tutorial, visit MojoAuth React Demo.

Starting with React and MojoAuth

Prerequisites:

Basic knowledge of React.
MojoAuth Account.
MojoAuth web SDK.

For the demonstration, we will be using the MojoAuth library as the passwordless authentication service. Go ahead and create an account on MojoAuth and check the dashboard. After that, create a react project using the create-react-app and name it mojoauth-demo.

npx create-react-app mojoauth-demo

Now, install the mojoauth web SDK for creating the MojoAuth instance-

npm install mojoauth-web-sdk

For the UI, we will be using the semantic UI react components,

npm install semantic-ui-react semantic-ui-css

After successful installation, import the semantic UI CSS to the index.js file.

import 'semantic-ui-css/semantic.min.css'

For the routing, we will need the react-router-dom. Let’s quickly install that.

npm install react-router-dom

To get the stateID from the query, we will be using the npm package query-string.

npm install query-string

In the MojoAuth Dashboard, get your Apikey and whitelist your project URL in the settings section. Since the local react server runs on port 3000,

http://localhost:3000

In the src folder, create a file called config.js and add the following:-

function getConfig() {
   return {
       api_key:
           process.env.REACT_APP_MOJOAUTH_APIKEY ||
           'YOUR_API_KEY',
       redirect_url:
               process.env.REACT_APP_REDIRECT_URL || 'http://localhost:3000/dashboard',
   };
}

export default getConfig();

Add your API key obtained from the mojoauth dashboard in place of YOUR_API_KEY in the config file.

Mojoauth passwordless authentication

Login.js

Now, let’s create our Login interface. In the src folder, create another folder called Login. Inside Login, create a file called index.js. This file would contain our login code.

Import react, your mojoauth web SDK and the config file in the index.js file.

import React from "react"
import MojoAuth from "mojoauth-web-sdk"
import config from "./config"

In the use effect function, initialize the MojoAuth instance and call the signIn function,

let mojoconfig={
               language:"en",
               source:[{type:'phone', feature:'otp'}, {type:'email', feature:'magiclink'}],
               redirect_url: config.redirect_url
           }

       const mojoauth = new MojoAuth(config.api_key,mojoconfig);
           mojoauth.signIn().then(payload=>{
               localStorage.setItem('React-AccessToken', payload.oauth.access_token)
               localStorage.setItem('React-Identifier', payload.user.identifier)
           })

We will save our access token and identifier in the local storage for further use. The current Login.js would look something like this:-

import React from "react"
import MojoAuth from 'mojoauth-web-sdk'
import config from '../config'
const Login = () => {
      React.useEffect(()=>{

       let mojoconfig={
               language:"en",
               source:[{type:'phone', feature:'otp'}, {type:'email', feature:'magiclink'}],
               redirect_url: config.redirect_url
           }

       const mojoauth = new MojoAuth(config.api_key,mojoconfig);
                  localStorage.getItem('React-AccessToken')?navigate('/dashboard'):
           mojoauth.signIn().then(payload=>{

               localStorage.setItem('React-AccessToken', payload.oauth.access_token)
               localStorage.setItem('React-Identifier', payload.user.identifier)

           })


   },[])

   return(<>

   </>)
};

export default Login;

We will work on the return function in the next section.

Dashboard.js

In the dashboard component, we want to log in when the user is redirected with the state ID to the redirect URL mentioned in the login component.

Firstly, we import the required components,

import React, { useEffect } from "react";
import MojoAuth from "mojoauth-web-sdk";
import * as QueryString from 'query-string';
import config from '../config'

Now, in the Dashboard component, we get the state_id from the URL.

const params = search
     ? QueryString.parse(search.search)
     :{}

In the useEffect function, we login using the stateID, by calling the signInWithStateID function,

if (params.state_id) {
       const mojoauth = new MojoAuth(config.api_key);
       mojoauth.signInWithStateID(params.state_id).then((payload) => {

           localStorage.setItem('React-AccessToken', payload.oauth.access_token)
           localStorage.setItem('React-Identifier', payload.user.identifier)

       });
   }

The current Dashboard.js would look something like this:-

import React, { useEffect } from "react";
import MojoAuth from "mojoauth-web-sdk";
import config from '../config'

import * as QueryString from 'query-string';

const Dashboard = (props) => {

const search = useLocation();
const params = search
     ? QueryString.parse(search.search)
     :{}
 useEffect(() => {
   if (params.state_id) {
       const mojoauth = new MojoAuth(config.api_key);
       mojoauth.signInWithStateID(params.state_id).then((payload) => {

           localStorage.setItem('React-AccessToken', payload.oauth.access_token)
           localStorage.setItem('React-Identifier', payload.user.identifier)
       });
   }
 }, []);

 return (
   <React.Fragment>

   </React.Fragment>
 );
};

export default Dashboard;

We will work on the return function in the next section.

Creating our Interface

Login.js

Now, we want to show the login form in a popup. For that, we will use the Modal from Semantic UI react. Create a state that would hold the opening and closing state of the popup.

const [open, setOpen] = React.useState(false)

In the return function of the Login component, use the Modal to show the popup on the click on the login button.

return(<>
   <div className='container'>
       <h1 className='main-title'>React Demo </h1>
       <div className='login-container'>
           <h1 className='title'>Welcome</h1>
           <h4 className='subtitle'>Login using MojoAuth</h4>
           <Modal
     onClose={() => setOpen(false)}
     onOpen={() => setOpen(true)}
     open={open}
     dimmer={true}
     basic={true}
     size='tiny'
     trigger={<Button className='login' primary>Login</Button>}
   >
        <div id='mojoauth-passwordless-form'></div>
   </Modal>
   <p className='footer'>By MojoAuth</p>
       </div>
       </div>

</>)

For our MojoAuth instance to run only when the popup opens, we set a condition in the use effect function.

if(open){

           mojoauth.signIn().then(payload=>{
               setOpen(false);
               localStorage.setItem('React-AccessToken', payload.oauth.access_token)
               localStorage.setItem('React-Identifier', payload.user.identifier)

           })
       }

The current Login.js would look like this:-

import React from "react"
import MojoAuth from 'mojoauth-web-sdk'
import { Button, Modal } from "semantic-ui-react";
import config from '../config'
const Login = () => {
   const [open, setOpen] = React.useState(false)
   React.useEffect(()=>{

       let mojoconfig={
               language:"en",
               source:[{type:'phone', feature:'otp'}, {type:'email', feature:'magiclink'}],
               redirect_url: config.redirect_url
           }

       const mojoauth = new MojoAuth(config.api_key,mojoconfig);
       if(open){
                      mojoauth.signIn().then(payload=>{
               setOpen(false);
               localStorage.setItem('React-AccessToken', payload.oauth.access_token)
               localStorage.setItem('React-Identifier', payload.user.identifier)

           })
       }


   },[ open])

   return(<>
   <div className='container'>
       <h1 className='main-title'>MojoAuth React Demo </h1>
       <div className='login-container'>
           <h1 className='title'>Welcome</h1>
           <h4 className='subtitle'>Login using MojoAuth</h4>
           <Modal
     onClose={() => setOpen(false)}
     onOpen={() => setOpen(true)}
     open={open}
     dimmer={true}
     basic={true}
     size='tiny'
     trigger={<Button className='login' primary>Login</Button>}
   >
        <div id='mojoauth-passwordless-form'></div>
   </Modal>
   <p className='footer'>By MojoAuth</p>
       </div>
       </div>
</>)
};

export default Login;

Dashboard.js

In dashboard.js, we would show the Username(identifier) if the user is logged in. Also, we will show a logout button which would log the user out and remove the access token from the local storage. In the return function,

return(
<React.Fragment>

     <div className='container'>
       <h1 className='main-title'>MojoAuth React Demo Dashboard </h1>
       <h3 className="main-subtitle">You have been Logged in Successfully!!</h3>
       <div className='login-container'>
           <h1 className='title'>Welcome </h1>
           <h4 className='subtitle'>{localStorage.getItem('React-Identifier')}</h4>
           <Button className='login' primary onClick={()=>{
       localStorage.removeItem('React-AccessToken');
     }}>Logout</Button>
   <p className='footer'>By MojoAuth</p>
       </div>
       </div>


   </React.Fragment>
)

The current Dashboard.js would look like this:-

import React, { useEffect } from "react";
import MojoAuth from "mojoauth-web-sdk";
import config from '../config'
import { useLocation } from "react-router-dom";
import { Button } from "semantic-ui-react";
import * as QueryString from 'query-string';


const Dashboard = (props) => {

const search = useLocation();
const params = search
     ? QueryString.parse(search.search)
     :{}
 useEffect(() => {
   if (params.state_id) {
       const mojoauth = new MojoAuth(config.api_key);
       mojoauth.signInWithStateID(params.state_id).then((payload) => {

           localStorage.setItem('React-AccessToken', payload.oauth.access_token)
           localStorage.setItem('React-Identifier', payload.user.identifier)

       });
   }else if(!localStorage.getItem('React-AccessToken')){

   }
 }, []);

 return (
   <React.Fragment>

     <div className='container'>
       <h1 className='main-title'>MojoAuth React Demo Dashboard </h1>
       <h3 className="main-subtitle">You have been Logged in Successfully!!</h3>
       <div className='login-container'>
           <h1 className='title'>Welcome </h1>
           <h4 className='subtitle'>{localStorage.getItem('React-Identifier')}</h4>
           <Button className='login' primary onClick={()=>{
       localStorage.removeItem('React-AccessToken');
     }}>Logout</Button>
   <p className='footer'>By MojoAuth</p>
       </div>
       </div>


   </React.Fragment>
 );
};

export default Dashboard;

Add some css to give a good look to your demo:-

App.css

.container{
  text-align: center
}
.main-title{
 padding-top:20px;
}
.login-container{
 background-color: white;
 color: black;
 box-shadow: 0 0 25px #5e00cf;
 border-radius: 20px;
 max-width:320px;
 margin:10% auto;
 padding: 30px 40px;
 align-items: center;
 height: 300px
}

.title{
 text-align: center;
}
.subtitle{
 text-align: center;
 margin-bottom: 20px;
 color: rgba(76, 76, 76, 0.75)
}
button{
 width: 100%;
 margin-top: 15px !important;
}
.footer{
 font-size: 10px;
 color: gray;
 text-align: center;
 margin-top: 35px;

}
code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
   monospace;
}

.login{
 background-color:#5e00cf !important;
}

Managing our Routings

Once we are done with our login and dashboard code, next comes the routing part. In App.js, we would use the Routes from react-router-dom for routing.

App.js

import './App.css';

import { Route, Routes} from 'react-router-dom';
import Dashboard from './Dashboard';
import Login from './Login';



const App=()=> {
  return (
  <Routes>
    <Route path='/' exact element={<Login/>}/>

    <Route path='/dashboard' exact element={<Dashboard/>}/>
  </Routes>
 );
}

export default App;

Login.js

In Login.js, we would navigate to the dashboard once the user is logged in. For that, we will use the useNavigate function from react-router-dom.

We also want the user to navigate to the dashboard if the user is already logged in and tries to login again.

localStorage.getItem('React-AccessToken')?navigate('/dashboard'):mojoauth.signin()

The final Login.js would look like this:-

import React from "react"
import MojoAuth from 'mojoauth-web-sdk'
import { Button, Modal } from "semantic-ui-react";
import { useNavigate} from "react-router-dom";
import config from '../config'
const Login = () => {
   const [open, setOpen] = React.useState(false)
   const navigate=useNavigate()
   React.useEffect(()=>{

       let mojoconfig={
               language:"en",
               source:[{type:'phone', feature:'otp'}, {type:'email', feature:'magiclink'}],
               redirect_url: config.redirect_url
           }

       const mojoauth = new MojoAuth(config.api_key,mojoconfig);
       if(open){
           localStorage.getItem('React-AccessToken')?navigate('/dashboard'):
           mojoauth.signIn().then(payload=>{
               setOpen(false);
               localStorage.setItem('React-AccessToken', payload.oauth.access_token)
               localStorage.setItem('React-Identifier', payload.user.identifier)
              navigate('/dashboard')
           })
       }


   },[ open])

   return(<>
   <div className='container'>
       <h1 className='main-title'>MojoAuth React Demo </h1>
             <div className='login-container'>
           <h1 className='title'>Welcome</h1>
           <h4 className='subtitle'>Login using MojoAuth</h4>
           <Modal
     onClose={() => setOpen(false)}
     onOpen={() => setOpen(true)}
     open={open}
     dimmer={true}
     basic={true}
     size='tiny'
     trigger={<Button className='login' primary>Login</Button>}
   >
        <div id='mojoauth-passwordless-form'></div>
   </Modal>
   <p className='footer'>By MojoAuth</p>
       </div>
       </div>
</>)
};

export default Login;

Dashboard.js

In the dashboard.js, after the user is logged out, or there’s no access token in the local storage, we would want the user to navigate to the home page.

The final dashboard.js would look like this:-

import React, { useEffect } from "react";
import MojoAuth from "mojoauth-web-sdk";
import config from '../config'
import { useNavigate, useLocation } from "react-router-dom";
import { Button } from "semantic-ui-react";
import * as QueryString from 'query-string';

const Dashboard = (props) => {
const navigate = useNavigate();
const search = useLocation();
const params = search
     ? QueryString.parse(search.search)
     :{}
 useEffect(() => {
   if (params.state_id) {
       const mojoauth = new MojoAuth(config.api_key);
       mojoauth.signInWithStateID(params.state_id).then((payload) => {

           localStorage.setItem('React-AccessToken', payload.oauth.access_token)
           localStorage.setItem('React-Identifier', payload.user.identifier)
navigate('/dashboard')
       });
   }else if(!localStorage.getItem('React-AccessToken')){
     navigate('/')
   }
 }, []);

 return (
   <React.Fragment>

     <div className='container'>
       <h1 className='main-title'>MojoAuth React Demo Dashboard </h1>
       <h3 className="main-subtitle">You have been Logged in Successfully!!</h3>
       <div className='login-container'>
           <h1 className='title'>Welcome </h1>
           <h4 className='subtitle'>{localStorage.getItem('React-Identifier')}</h4>
           <Button className='login' primary onClick={()=>{
       localStorage.removeItem('React-AccessToken');
       navigate('/')
     }}>Logout</Button>
   <p className='footer'>By MojoAuth</p>
       </div>
       </div>

   </React.Fragment>
 );
};

export default Dashboard;

Testing our App

Let’s test our app now. With the npm start, the webpack would compile the application and run it on localhost:3000.

Once you click on the Login button, The mojoauth login popup will appear.

Note:- For using the Login with phone number, refer to the how to add SMS authentication document.

Upon entering the user’s email, magiclink is sent to the respective mail.

The email is received right away and upon clicking on the link, the user is navigated to the redirect URL mentioned in the mojoauth instance.

Note:- For redirection to work, don’t forget to whitelist your URL. For more details, refer to how to whitelist your URL.

After successful login, you are navigated back to the dashboard.

To see the app working live, visit the demo.

A little more - Social Login

Passwordless authentication with MojoAuth is very easy, reliable, and secure. With just a couple of lines, we were able to build a fully functioning passwordless authentication system using the MojoAuth web SDK.

Although passwordless is a great option, MojoAuth goes a little further and allows your users to log in with your desired social network with ease.

We can use the same lines of code to add social authentication like google, Facebook, and apple. The only thing you have to do is visit the MojoAuth dashboard and configure the social integrations. How to add social Authentication document covers the topic in much more detail.

The UI changes would be instantly visible.

Wrapping up

Passwordless authentication is the new and improved alternative to the traditional username and password since it is easy to implement and increases the overall security while decreasing the cost for the company.

It could be tricky to build a passwordless application from scratch, but MojoAuth reduces t most of the complexity by providing the out-of-the-box passwordless solution, while providing the flexibility to choose our favorite mode of authentication including magic link, OTP, and social login.

The Complete Guide to Angular User Authentication with Passkeys

Andy Agarwal — Wed, 22 Feb 2023 11:17:13 +0000

Passwordless authentication is a form of authentication that verifies a user’s identity without the use of passwords. There are many forms of passwordless authentication including, Email, SMS, and more importantly, Passkeys.

What are Passkeys?

A passkey, also known as a password or passphrase, is a secret word or phrase that is used to gain access to a system or application. Passkeys are typically used as a form of authentication to confirm the identity of a user and to protect sensitive information from unauthorized access.

Passkeys can be a combination of letters, numbers, and special characters and should be kept confidential to ensure the security of the system or application. The integration of passkey login into existing systems can make the process more convenient for users, as it can be automatically filled in by the browser or a password manager.

Passkeys can also provide additional protection against phishing attacks compared to SMS or app-based one-time passwords. However, it’s important to note that while passkeys are based on widely adopted protocols, the compatibility of a single implementation across different browsers and operating systems can vary.

In recent years, the use and adoption of passkeys has been increasing as multiple authentication services and platforms have begun to incorporate it as a method of secure user login.

In this article we’ll be looking at how to implement authentication in an Angular app using passkeys, let’s dive in.

Prerequisites

To follow along in this article, you’ll need the following:

Basic knowledge of TypeScript and Angular
Node.js installed; I’ll be using v16.13.0
For a text editor, I recommend using VSCode

Set up Angular

To set up an angular project, we’ll use the Angular CLI. To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

Once the CLI has been successfully installed, to create a new workspace and initial starter app:

ng new passkeys-app-angular

This will prompt us for information about the features to be included in the initial app. We’ll accept the defaults by pressing the Enter key.

Once the installation is complete, we’ll quickly set up TailwindCSS for styling:

cd passkeys-app-angular

    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init

Add the paths to all of our template files in the tailwind.config.js file:

// ./tailwind.config.js

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./src/**/*.{html,ts}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

Then we add the @tailwind directives for each of Tailwind’s layers to our ./src/styles.css file:

@tailwind base;
    @tailwind components;
    @tailwind utilities;

    .cta {
  @apply bg-slate-800 border border-slate-900 text-slate-50 font-medium py-1.5 px-3 rounded-md;
}

.link {
  @apply underline;
}

.form-control {
  @apply flex flex-col gap-2;
}

.input {
  @apply p-3 border border-gray-300 rounded-md;
}

.input[type="checkbox"] {
  @apply bg-gray-100;
}

.site-logo {
  @apply text-lg font-bold;
}

.site-nav .links {
  @apply flex gap-8 items-center;
}

.site-header {
  @apply sticky top-0 p-4 z-10;
}

.site-header > .wrapper {
  @apply flex gap-8 justify-between items-center  bg-slate-800 text-slate-50 p-4 px-6 rounded-lg;
}


.site-section,
.todo-header {
  @apply p-4;
}

.site-section > .wrapper,
.todo-header > .wrapper {
  @apply max-w-4xl mx-auto;
}

.form-group {
  @apply flex gap-4;
}

.form-group > * {
  @apply grow;
}

.todo-form {
  @apply p-4 bg-slate-50 border border-slate-200 rounded-lg;
}

.todo-list {
  @apply flex flex-col gap-4 my-6;
}

.todo-item {
  @apply flex gap-4 items-center justify-between p-3 bg-slate-100 border border-slate-200 rounded-xl;
}

.todo-item__content {
  @apply flex gap-4;
}

Now we can run the application with:

  ng serve --open

And we should have something like this:

Next, we’ll set up the routes for our project.

Set up Routes

To use the auth elements in our application, let’s create the components for our application. To generate components run:

 ng generate component login
    ng generate component register
    ng generate component todo

Once the components have been generated, we can configure our routes in ./src/app/app-routing.module.ts:

// ./src/app/app-routing.module.ts

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { LoginComponent } from './login/login.component';
    const routes: Routes = [
      {
        path: '',
        redirectTo: '/todo',
        pathMatch: 'full',
      },
      {
        path: 'register',
        component: RegisterComponent
      },
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'todo',
        component: TodoComponent
      }
    ];
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

Add Todo Service

We’ll also need to create a service that will handle the data in our to-do application. To create a service, run:

ng generate service todo

For this article, we’ll be using the DummyJSON API for our todo API - https://dummyjson.com/todos. Let’s set it up in our environment variables.

Set up environmental variables

Let’s save our API URL in our ./src/environments/environment.ts file:

 export const environment = {
      production: false,
      todo: {
        api: 'https://dummyjson.com/todos',
      },
    };

Now, we can access the API URL as variables in this file from the rest of our application.

Set up todo service functions

Next, we’ll create the functions which will be interfacing with our todo API. In our .src/app/todo.service.ts file:

// .src/app/todo.service.ts

    import { Injectable } from '@angular/core';
    import { environment } from './environments/environment';

    /**
     * Define todo type
     */
    export interface Todo {
      id?: number;
      todo?: string;
      completed: boolean;
      userId?: number;
    }
    /**
     * Define todos type
     */
    export type Todos = Todo[];
    @Injectable({
      providedIn: 'root',
    })
    export class TodoService {
       api = environment.todo.api;
      /**
       * function to add a todo
       * @param todo - todo to add
       * @returns added todo
       */
      async addTodo(todo: Todo): Promise<Todo> {
        const res = await fetch(`${this.api}/add`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(todo),
        });
        return await res.json();
      }
      /**
       * function to list todos
       * @returns list of todos
       */
      async listTodos(): Promise<Todos> {
        const res = await fetch(`${this.api}/user/1`);
        const { todos } = await res.json();
        return todos;
      }
      /**
       * function to update a todo
       * @param todo - todo to update
       * @returns updated todo
       */
      async updateTodo(todo: Todo): Promise<Todo> {
        const res = await fetch(`${this.api}/update`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(todo),
        });
        return await res.json();
      }
      /**
       * function to delete a todo
       * @param id - id of todo to delete
       * @returns deleted todo
       */
      async deleteTodo(id: number): Promise<Todo> {
        const res = await fetch(`${this.api}/${id}`, {
          method: 'DELETE',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        return await res.json();
      }
      constructor() {}
    }

Here we have functions to add, edit, list, and update todos with the API, these functions will be used in our todo component.

To implement the functions created in the todo service into the todo component, we’ll add the following in ./src/app/todo.component.ts:

 // ./src/app/todo/todo.component.ts

    import { Component, Input, OnInit } from '@angular/core';
    import { Todo, Todos, TodoService } from '../todo.service';
    @Component({
      selector: 'app-todo',
      templateUrl: './todo.component.html',
      styleUrls: ['./todo.component.css'],
    })
    export class TodoComponent implements OnInit {
      todos: Todos = [];
      todo = '';
      constructor(private todoService: TodoService) {}
      // list todos on init
      ngOnInit(): void {
        this.listTodos();
      }
      /**
       * function to update the todo body
       * @param event event
       */
      updateBody(event: any) {
        this.todo = event.target.value;
        console.log({ body: this.todo });
      }
      /**
       * function to update the todo completed state
       */
      updateCompleted(event: any) {
        const { currentTarget } = event;
        this.updateTodo({ id: currentTarget.id, completed: currentTarget.checked });
        console.log({ currentTarget });
      }
      /**
       * function to list todos
       */
      listTodos() {
        this.todoService.listTodos().then((todos) => {
          this.todos = todos;
          console.log({ todos });
        });
      }
      /**
       * function to add a todo
       * @param event event
       */
      addTodo(event: any) {
        console.log({ event });
        event.preventDefault();
        const todo = {
          todo: this.todo,
          completed: false,
          userId: 1,
        };
        this.todoService.addTodo(todo).then((todo) => {
          this.todos.push(todo);
          this.todo = '';
          console.log({ todo });
        });
      }
      /**
       * function to update a todo
       * @param param0 todo to update
       */
      updateTodo({ id, completed }: Todo) {
        this.todoService.updateTodo({ id, completed }).then((todo) => {
          this.todos.push(todo);
          console.log({ todo });
          console.log({ todos: this.todos });
        });
      }
      /**
       * function to delete a todo
       * @param id - id of todo to delete
       */
      deleteTodo(id: number) {
        this.todoService.deleteTodo(id).then((todo) => {
          this.todos = this.todos.filter((todo) => todo.id !== id);
          console.log({ todo });
        });
      }
    }

Finally, we can make use of all these functions in our template - ./src/app/todo/todo.component.html:

 <!-- ./src/app/todo/todo.component.html -->
    <main>
      <header class="todo-header">
        <div class="wrapper">
          <h1 class="font-bold text-2xl">My todo list</h1>
        </div>
      </header>
      <section class="todo-section site-section">
        <div class="wrapper">
          <form (submit)="addTodo($event)" class="todo-form">
            <div class="form-group">
              <input
                value="{{ todo }}"
                (change)="updateBody($event)"
                class="input"
                type="text"
                placeholder="Add a new todo"
              />
              <button class="cta shrink !grow-0" type="submit">Add</button>
            </div>
          </form>
          <ul class="todo-list">
            <li class="todo-item" *ngFor="let todo of todos">
              <div class="todo-item__content">
                <input
                  id="{{ todo.id }}"
                  value=" {{ todo.id }} "
                  [checked]="todo.completed"
                  (change)="(updateCompleted)"
                  class="input"
                  type="checkbox"
                />
                <label for=" {{ todo.id }} ">{{ todo.todo }}</label>
              </div>
              <button
                (click)="deleteTodo(todo.id!)"
                class="todo-item__delete cta"
                type="button"
              >
                <svg
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                <path
                    d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
                    fill="currentColor"
                />
                </svg>
              </button>
            </li>
          </ul>
        </div>
      </section>
    </main>

With that, we should have something like this:

Awesome.

So far we’ve been able to build out the main functionality of our app but we only want authenticated users to be able to visit this page. We have to give users a way to log in to the application. Let’s work on that.

Set up WebAuthn Server

For the purpose of this tutorial, we’ll be using the SimpleWebAuthn project, which is a collection of packages and examples that will help us get started with WebAuthn easily.

To get started, we’ll install the Simple WebAuthn project which provides us with an example WebAuthn Server we can use for our project.

Clone SimpleWebAuthn

Run:

 git clone https://github.com/MasterKale/SimpleWebAuthn.git

Once cloned, navigate to the ./example directory and install the project by running:

npm install

Once the installation is complete, let’s install a few dependencies that will help us use this server for our Angular frontend:

 npm install cors uuid

Here we’re installing CORS and UUID to allow us to access our backend from any origin and generate unique demo IDs for users respectively.

In the following sections, we’ll see how we can modify the example code for use in our project.

It should be noted that we’re only building a demo server that does not have database access. The SimpleWebAuthn example project is intended to be a practical reference for implementing the SimpleWebAuthn libraries to add WebAuthn-based Two-Factor Authentication (2FA) support to your website.

You can learn more about the example project, the Server and Browser packages, and how to properly implement it in a standard project on the SimpleWebAuthn docs.

Import Packages

First, let’s import the cors and uuid packages, and enter the following in ./example/index.ts:

// ./index.ts
    // ...
    import cors from "cors";
    import {v4 as uuidv4} from "uuid"

Then, below, we can use the cors package in the application:

// ./index.ts
    // ...

    app.use(express.static('./public/'));
    app.use(express.json());
    app.use(cors());

Registration

The example project has a registration endpoint that generates registration endpoints that will be used on the browser to start the passkey registration process. Currently, the example uses a preset username and ID for each registration. We want to be able to define the username from the client side and generate an ID that will mock a real user ID from the backend.

First, we change the const loggedInUserId = "internalUserId" to let i.e let loggedInUserId = 'internalUserId';

Next, in our '/generate-registration-options' GET route in ./example/index.ts, we get the username from the request query and add it to our inMemoryUserDeviceDB with a generated unique ID:

// ./index.ts
    // ...

    app.get('/generate-registration-options', (req, res) => {
      const _username = req.query.username as string;
      loggedInUserId = uuidv4();
      inMemoryUserDeviceDB[loggedInUserId] = {
        id: loggedInUserId,
        username: _username,
        devices: [],
        currentChallenge: undefined,
      };

      const user = inMemoryUserDeviceDB[loggedInUserId];    
      // ...

    });

Verify Registration

The '/verify-registration' endpoint listens to a POST request with a body containing passkey registration data generated from the client. We also want to get the username from the request alongside the registration data. To do that, we modify the endpoint:

// ./index.ts
    // ...

    app.post('/verify-registration', async (req, res) => {
      const body = req.body;

      const id = req.body.id as string;
      const registration: RegistrationCredentialJSON = body.attestationResponse;

      const user = inMemoryUserDeviceDB[id];
      const expectedChallenge = user.currentChallenge;

      let verification: VerifiedRegistrationResponse;

      try {
        const opts: VerifyRegistrationResponseOpts = {
          credential: registration,
          expectedChallenge: `${expectedChallenge}`,
          expectedOrigin,
          expectedRPID: rpID,
          requireUserVerification: true,
        };
        verification = await verifyRegistrationResponse(opts);
      } catch (error) {
        const _error = error as Error;
        console.error(_error);
        return res.status(400).send({ error: _error.message });
      }
      const { verified, registrationInfo } = verification;
      if (verified && registrationInfo) {
        const { credentialPublicKey, credentialID, counter } = registrationInfo;
        const existingDevice = user.devices.find(device => device.credentialID.equals(credentialID));
        if (!existingDevice) {
          /**
           * Add the returned device to the user's list of devices
           */
          const newDevice: AuthenticatorDevice = {
            credentialPublicKey,
            credentialID,
            counter,
            transports: registration.transports,
          };
          user.devices.push(newDevice);
        }
      }
      res.send({ verified });
    });

Authentication

The '/generate-authentication-options' generates authentication options and we want to get the username from the request query and get the user that matches that username to authenticate against:

// ./index.ts
    // ...

    app.get('/generate-authentication-options', (req, res) => {
      const username = req.query.username as string;

      // get user by username
      const user = Object.values(inMemoryUserDeviceDB).find(user => user.username === username) as LoggedInUser;

      // ...
    });

Verify Authentication

The '/verify-authentication' endpoint verifies the passkey authentication data, we want to get the username and authentication data from the request body so we replace the endpoint with the following code:

// ./index.ts
    // ...
    app.post('/verify-authentication', async (req, res) => {
      const body = req.body;
      const username = body.username as string;
      const authentication: AuthenticationCredentialJSON = body.assertionResponse;
      // get user by username
      const user = Object.values(inMemoryUserDeviceDB).find(user => user.username === username) as LoggedInUser;
      const expectedChallenge = user.currentChallenge;
      let dbAuthenticator;
      const bodyCredIDBuffer = base64url.toBuffer(authentication.rawId);
      // "Query the DB" here for an authenticator matching `credentialID`
      for (const dev of user.devices) {
        if (dev.credentialID.equals(bodyCredIDBuffer)) {
          dbAuthenticator = dev;
          break;
        }
      }
      if (!dbAuthenticator) {
        return res.status(400).send({ error: 'Authenticator is not registered with this site' });
      }
      let verification: VerifiedAuthenticationResponse;
      try {
        const opts: VerifyAuthenticationResponseOpts = {
          credential: authentication,
          expectedChallenge: `${expectedChallenge}`,
          expectedOrigin,
          expectedRPID: rpID,
          authenticator: dbAuthenticator,
          requireUserVerification: true,
        };
        verification = await verifyAuthenticationResponse(opts);
      } catch (error) {
        const _error = error as Error;
        console.error(_error);
        return res.status(400).send({ error: _error.message });
      }
      const { verified, authenticationInfo } = verification;
      if (verified) {
        // Update the authenticator's counter in the DB to the newest count in the authentication
        dbAuthenticator.counter = authenticationInfo.newCounter;
      }
      res.send({ verified,  user});
    });

Finally, we create a new '/user' route which gets the currently logged-in user by its ID

Note that in a real application, you might want to use a more secure means like a JWT or another method to get a logged-in user since we’re only using the user id to check if a user is logged in, in this example.

// get user by id
    app.get('/user', (req, res) => {
      try {
        const id = req.query.id as string;
        const user = inMemoryUserDeviceDB[id];
        console.log({user});
        if(!user) throw new Error('User not found')
        res.send(user);
      } catch (error) {
        console.log({error});
        res.status(400).json(error);
      }
    });

With that, we’ve successfully built a custom WebAuthn server that we can use for our angular application.

Add to Environmental Variables

Back in our angular application, let’s save our API URLs in our ./src/environments/environment.ts file:

export const environment = {
      production: false,
      api: 'http://localhost:8000/',
      todo: {
        api: 'https://dummyjson.com/todos',
      },
    };

Now, we can access the WebAuthn API URL as variables in this file from the rest of our application.

Set up WebAuthn Browser Package

We’ll be using the eSimpleWebAuthn Browser package to help us communicate with our WebAuthn Server. Run the following to install it in our angular project:

npm install @simplewebauthn/browser @simplewebauthn/typescript-types

Create Auth Service

Next, we generate our auth service:

ng generate service auth

Once that’s completed, we’ll create a function in our auth service that checks if the user is logged in or not.

Check if the user is authenticated

In our ./src/app/auth-service.ts, we’ll create an isLoggedIn() function which returns true or false depending on if the userInfo() function returns the user information after calling the '/user' endpoint in the API returns user data:

// ./src/app/auth.service.ts
    import { Injectable } from '@angular/core';
    import { environment } from './environments/environment';
    export type User = {
      id: string;
      name: string;
      displayName: string;
    };
    @Injectable({
      providedIn: 'root',
    })
    export class AuthService {
      _userData: User = { id: '', name: '', displayName: '' };
      API = environment.api;
      userData: User = this._userData;

      // function to check if user is logged in
      async isLoggedin(): Promise<boolean> {
        try {
          // get user data
          this.userData = await this.userInfo();
          // console.log({ userData: this.userData });
          if (!this.userData.id) throw new Error('no user id, not logged in');
          return true;
          // A valid JWT is in place so that the user object was able to be fetched.
        } catch (error) {
          console.log({ error });
          return false;
        }
      }
      // function to get user data
      async userInfo() {
        try {
          // get user id from cookie
          let id = '';
          const cookies = document.cookie;
          cookies.split('; ').forEach((cookie) => {
            const [key, value] = cookie.split('=');
            if (key === 'id') {
              id = value;
            }
          });

          // get user data from api
          const res = await fetch(`${this.API}/user?id=${id || this.userData.id}`);
          const user = await res.json();

          // set user data in service
          this.userData = {
            displayName: user.username,
            id: user.id,
            name: user.username,
          };

          // return user data
          return this.userData;
        } catch (error) {
          console.log({ error, user: this.userData });
          return this.userData;
        }
      }
      // function to log user out
      logOut() {
        // remove user id from cookie
        document.cookie = 'id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
        // reset user data
        this.userData = this._userData;
      }
      constructor() {}
    }

Here, we also have the logOut() function which removes the "id" key from the website cookies and resets the user data.

Show user information in site header

Since we can get some user information if the user is logged in, let’s display it for them, specifically, the username used. In ./src/app/app.component.ts, we’ll import the user data from the auth service and add it to our component variables user:

// ./src/app/app.component.ts
    import { Component } from '@angular/core';
    import { AuthService, User } from './auth.service';
    import { Router } from '@angular/router';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
    })
    export class AppComponent {
      title = 'passkeys-app-angular';
      user: User = {
        id: '',
        name: '',
        displayName: '',
      };
      constructor(private authService: AuthService, private router: Router) {
        router.events.subscribe((val) => {
          this.user = this.authService.userData;
        });
      }
      async ngOnInit(): Promise<void> {
        // get user data when component loads
        this.user = await this.authService.userInfo();
        console.log({ user: this.user });
      }
    }

Here, we also subscribe to router events within the constructor in order to set the component user data to that of the service.

Now, we can display it in the template - ./src/app/app.component.html

<!-- ./src/app/app.component.html -->
    <header class="site-header">
      <div class="wrapper">
        <a routerLink="/">
          <figure class="site-logo">
            <span>Todo</span>
          </figure>
        </a>
        <nav class="site-nav">
          <div class="wrapper">
            <ul class="links">
              <li class="link">
                <a routerLink="/todo">Todo</a>
              </li>
              <li *ngIf="!user.id" class="link">
                <a routerLink="/register">Register</a>
              </li>
              <li *ngIf="!user.id" class="link">
                <a routerLink="/login">Login</a>
              </li>
              <li *ngIf="user.id" class="link">
                <span>
                  {{ user.name }}
                </span>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
    <router-outlet></router-outlet>

With that, we should have something like this:

Add Register Functionality

Now, with our Auth service set up, we can add our register functionality in our ./src/app/login/register.component.ts page:

// ./src/app/login/register.component.ts

    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    import { startRegistration } from '@simplewebauthn/browser';
    import { AuthService, User } from '../auth.service';
    import { environment } from '../environments/environment';
    @Component({
      selector: 'app-register',
      templateUrl: './register.component.html',
      styleUrls: ['./register.component.css'],
    })
    export class RegisterComponent implements OnInit {
      // define component state
      API = environment.api;
      userData: User = {
        id: '',
        name: '',
        displayName: '',
      };
      username = '';
      attestationResponse = {};
      isLoading = false;

      ngOnInit(): void {}
      constructor(private router: Router, private authService: AuthService) {}

      // function to update username
      updateUsername(event: any) {
        this.username = event.target.value;
        console.log({ username: this.username });
      }

      // function to generate registration options
      async generateRegistrationOptions() {
        try {
          const res = await fetch(
            `${this.API}/generate-registration-options?username=${this.username}`
          );
          const creationOptions = await res.json();
          this.userData = creationOptions.user;
          console.log({ creationOptions, user: this.authService.userData });
          try {
            this.attestationResponse = await startRegistration(creationOptions);
            console.log({ attestationResponse: this.attestationResponse });
          } catch (error) {
            console.log({ error });
            throw error;
          }
        } catch (error) {
          console.log({ error });
        }
      }

      // function to verify registration
      async verifyRegistration() {
        try {
          const res = await fetch(`${this.API}/verify-registration`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              id: this.userData.id,
              attestationResponse: this.attestationResponse,
            }),
          });
          const verification = await res.json();
          console.log({ verification });
          if (verification.verified) {
            alert('Registration successful! Proceed to login');
            this.authService.userData.name = this.userData.name;
            // redirect to login
            this.router.navigate(['/login']);
          } else {
            alert('Registration failed! Please try again.');
          }
        } catch (error) {
          console.log({ error });
        }
      }

      // function to register
      async register(event: any) {
        event.preventDefault();
        this.isLoading = true;
        await this.generateRegistrationOptions();
        await this.verifyRegistration();
        this.isLoading = false;
      }
    }

Here, our register function calls generateRegistrationOptions() which gets the username and makes a request to the '/generate-registration-options' endpoint of our API which then returns some data which we assign to creationOptions. We also obtain the user data that includes the ID which we’ll use to make the registration verification request.

creationOptions is then passed into the startRegistration() function provided by the SimpleAuthn Browser package. This returns data that is passed to this.attestationResponse which we then use in the verifyRegistration() function along with the user ID.

register also calls verifyRegistration() to make the verification request. When the the request is made and verification is successful, we then save the username to the service so that when the page redirects to login for authentication, the user doesn’t have to type in the username again.

Here’s what our template code looks like in ./src/app/register/register.component.html:

<!-- ./src/app/register/register.component.html -->
    <section class="site-section">
      <div class="wrapper">
        <header class="my-6">
          <h1 class="font-bold text-4xl">Register</h1>
        </header>
        <form (submit)="register($event)" class="register-form flex flex-col gap-4">
          <div class="form-control">
            <label for="username">Username</label>
            <input
              value="{{ username }}"
              (change)="updateUsername($event)"
              type="text"
              type="username"
              name="username"
              class="input"
              required
            />
          </div>
          <div class="action-cont">
            <button class="cta" type="submit">
              {{ isLoading ? "Loading..." : "Register" }}
            </button>
          </div>
          <p>Or <a routerLink="/login" class="link">Login</a></p>
        </form>
      </div>
    </section>

With that, we should have something like this:

Add Login Functionality

For the log in, we have something similar, only we’ll be using the authentication endpoints this time. So in our ./src/app/login/login.component.ts file, we’ll create a few functions for authentiation:

// ./src/app/login/login.component.ts
    import { Component } from '@angular/core';
    import { Router } from '@angular/router';
    import { AuthService } from '../auth.service';
    import { startAuthentication } from '@simplewebauthn/browser';
    import { environment } from '../environments/environment';
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css'],
    })
    export class LoginComponent {
      API = environment.api;
      username = this.authService.userData.name || '';
      assertionResponse = {};
      isLoading = false;
      constructor(private router: Router, private authService: AuthService) {}
      // function to update username
      updateUsername(event: any) {
        this.username = event.target.value;
        console.log({ username: this.username });
      }
      // function to generate authentication options
      async generateAuthenticationOptions() {
        try {
          const res = await fetch(
            `${this.API}/generate-authentication-options?username=${this.username}`
          );
          const authOptions = await res.json();
          try {
            this.assertionResponse = await startAuthentication(authOptions);
            console.log({ assertionResponse: this.assertionResponse });
          } catch (error) {
            console.log({ error });
            throw error;
          }
        } catch (error) {
          console.log({ error });
        }
      }
      // function to verify authentication
      async verifyAuthentication() {
        try {
          const res = await fetch(`${this.API}/verify-authentication`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              username: this.username,
              assertionResponse: this.assertionResponse,
            }),
          });
          const data = await res.json();
          // if authentication is successful, set user data and call the redirect function
          if (data.verified) {
            this.authService.userData = {
              id: data.user.id,
              name: data.user.username,
              displayName: data.user.username,
            };
            alert(`Authentication successful! Welcome back ${data.user.username}!`);

            this.redirectAfterLogin(data);
          } else {
            alert('Authentication failed. Please try again.');
          }
        } catch (error) {
          console.log({ error });
        }
      }
      // function to authenticate user on form submit
      async authenticate(event: any) {
        event.preventDefault();
        this.isLoading = true;
        await this.generateAuthenticationOptions();
        await this.verifyAuthentication();
        // get user id and set cookie
        let id = this.authService.userData.id;
        document.cookie = `id=${id}`;
        console.log({ id, cookie: document.cookie });
        this.isLoading = false;
      }
      redirectAfterLogin(event: any) {
        console.log('redirecting after login', { event });
        // call loggedIn frunction to update auth service state
        this.authService.isLoggedin();
        this.router.navigate(['/todo']);
      }
    }

Here, we have the generateAuthenticationOptions() function which makes a request to the '/generate-authentication-options' endpoint. The edpoint returns some data which we pass into authOptions. Then we pass this data in to the startAuthentication() function to start the authentication process.

Once completed, the authenticate function calls verifyAuthentication() which verifies the assertionResponse which was generated by the startAuthentication function.

Once the verification is successful, we redirect to the todo page and save the user data in the auth service and the user id as a cookie, which will be used by the userInfo() function in the auth service to get user information.

Implement Auth Guards

In this section, in order to limit access to the todo application to only authenticated users, we need to implement an auth guard that checks if a condition is met during routing and allows the routing to continue or prevent it.

We’ll generate an auth guard by running:

ng generate guard auth

We should be presented with a prompt asking us which guard to implement, we’ll go with CanActivate:

$ ng generate guard auth
    ? Which interfaces would you like to implement? CanActivate
    CREATE src/app/auth.guard.spec.ts (331 bytes)
    CREATE src/app/auth.guard.ts (457 bytes)

Set up route guard to redirect the user if not authenticated

Now, we’ll set up our auth guard in ./src/app/auth.guard.ts that runs the isLoggedIn() function provided by our auth service.

// ./src/app/auth.guard.ts
    import { Injectable } from '@angular/core';
    import { CanActivate, Router } from '@angular/router';
    import { AuthService } from './auth.service';
    @Injectable({
      providedIn: 'root',
    })
    export class AuthGuard implements CanActivate {
      constructor(private authService: AuthService, private router: Router) {}
      async canActivate(): Promise<boolean> {
        if (await this.authService.isLoggedin()) {
          return true;
        } else {
          this.router.navigate(['/login']);
          return false;
        }
      }
    }

Here, within the canActive() function, we return true to allow the normal routing process if a user is logged in, if not, we’ll redirect to the login page and return false to cancel normal routing.

Finally, for the route guard we just set up to work, we need to configure our routing in ./src/app/app-routing.module.ts to use the route guard:

// ./src/app/app-routing.module.ts
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { AuthGuard } from './auth.guard';
    import { LoginComponent } from './login/login.component';
    import { RegisterComponent } from './register/register.component';
    import { TodoComponent } from './todo/todo.component';
    const routes: Routes = [
      {
        path: '',
        redirectTo: '/todo',
        pathMatch: 'full',
      },
      {
        path: 'login',
        component: LoginComponent,
      },
      {
        path: 'register',
        component: RegisterComponent,
      },
      {
        path: 'todo',
        component: TodoComponent,
        canActivate: [AuthGuard],
      },
    ];
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
    })
    export class AppRoutingModule {}

Here, we added the canActivate property with the AuthGuard value to the 'todo' path in order to apply the route guard to the path. Here, you can see that we’ve redirected to /login and can’t access /todo since we’re not authenticated.

Add Logout Functionality

Logout is pretty straightforward as all we have to do is to call the logOut() function in ./src/app/auth.service.ts to remove the user ID from cookies. We’ll create a function inin ./src/app/app.component.html:

// ./src/app/app.component.ts
    import { AuthService, User } from './auth.service';

    // ...

    export class AppComponent {
      title = 'passkeys-app-angular';
      user: User = {
        id: '',
        name: '',
        displayName: '',
      };
      // ...

      // function to log user out
      logOut() {
        // remove user id from cookie
        document.cookie = 'id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
        // reset user data
        this.userData = this._userData;
        alert("You've been logged out. Please log in again to continue.");
      }
    }

Now, we can add a button in our site header in ./src/app/app.component.html that appears when the user is logged in. The button will call the logout function when clicked:

<!-- ./src/app/app.component.html -->
    <header class="site-header">
      <div class="wrapper">
        <!-- ... -->
        <nav class="site-nav">
          <div class="wrapper">
            <ul class="links">
              <!-- ... -->
              <li *ngIf="user.id" class="link">
                <button class="cta" (click)="logOut()">Logout</button>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
    <router-outlet></router-outlet>

With that, we should have our complete passkeys authentication flow:

https://www.dropbox.com/s/nnzp0pqi1g1re4q/1f045a7d-3116-4b7d-836a-fb23915ab523_x264.mp4?dl=0

Conclusion

So far, we’ve covered the basics of authentication in Angular using passkeys by creating a simple application with passwordless registration and login. To achieve this without any third-party library or service, we made use of the SimpleWebAuthn Server and Browser packages in our backend and frontend respectively.

Further reading and resources

Passwordless login with passkeys
Use cases of Passkey authentication
What are passkeys?
WebAuthn Guide
Web Authentication API
SimpleWebAuthn - A collection of TypeScript-first libraries for simpler WebAuthn integration

Resources

Here, you’ll find a few resources to help you out:

MFA vs. SSO: What is the Difference?

Andy Agarwal — Mon, 13 Feb 2023 06:28:43 +0000

Over the years, Multi-factor Authentication (MFA) and Single Sign-on (SSO) have become crucial parts of authentication. MFA ensures the application and data security against various cyber attacks, while SSO ensures a great user experience as users don’t have to create or remember another account password.

The articles cover more details on each of these authentication approaches, including:

What is Multi-factor Authentication?
What is Single Sign-on?
MFA vs. SSO: How Do MFA and SSO Work Together?
MFA vs. SSO: What is the Difference?
MFA vs. SSO: Which is More Secure?
When to Choose MFA for Your Business
When to Choose SSO for Your Business

What is Multi-factor Authentication?

MFA requires multiple factors to authenticate a user after the first successful authentication, such as Email link, Email OTP, Phone SMS OTP, or biometric. It is designed to provide an additional layer of security by reverifying the user’s identity.

Examples of MFA Authentication

When users enter a password to access their Gmail account, it asks them to provide a second factor of authentication, such as an OTP or code from the authenticator app, before letting them access the account. Only after verifying both password and OTP/code, users are allowed to access Gmail accounts.
While withdrawing money from an ATM machine, users first provide their ATM card, which acts as the first factor for authentication. They then provide the ATM PIN to validate the second factor of authentication.

What is Single Sign-on?

SSO enables users to log in to multiple applications automatically with a single set of credentials. This authentication method saves users time and makes it easier for them to access the resources they need while also simplifying the management of user identities.

Examples of SSO Authentication

When users are logged in to Gmail, it automatically logs them into other related services of Google, such as YouTube and Google Analytics.
In an office setup, if the employee is logged in to their central system, they can automatically access other employee services such as Employee Portal.

It simplifies the login mechanism by eliminating the need for users to remember multiple usernames and passwords for each application.

The next sections discuss the difference between SSO and MFA and help you decide which is best for your organization.

MFA vs. SSO: Which is More Secure?

Both Multi-Factor Authentication (MFA) and Single Sign-On (SSO) have their own strengths and weaknesses when it comes to security. MFA is considered more secure because it adds an extra layer of security beyond just a password or single-factor authentication and can prevent 99.9% of account attacks.

SSO, on the other hand, allows a user to automatically log into multiple applications with just one set of credentials. While SSO can make the login process more convenient, it also represents a single point of failure. If a hacker gains access to a user’s SSO credentials, they can potentially access all the connected applications.

In conclusion, MFA is considered more secure due to the added layer of security. But both MFA and SSO can be effective if implemented properly and used in the right circumstances.

MFA vs. SSO: How Do MFA and SSO Work Together?

MFA and SSO can complement each other to provide a more secure and seamless user experience.

When MFA and SSO are combined, users can automatically initiate logging in once with their single set of credentials and then complete MFA to access all of their applications and services.

This makes the process more secure and convenient - by eliminating the security risk of SSO and user experience concerns of MFA. The following explains how:

Although MFA adds to the security posture of authentication, it comes with concerns about hampers user experience. As the user is first required to enter a password (that they should remember) and then enter another factor (code or OTP) sent to them, making the entire authentication process lengthier.
On the other hand, SSO is great for user experience - who would not want automatic logins with one set of credentials? But comes with the security concern of a single point of failure, the threat of impacting all related applications is hackers get access to base credentials.

Combining SSO with MFA effectively overcomes both above-explained concerns, thus, a great user experience with added security.

Here is an example of how SSO and MFA will work together - Active Directory and Employee Portal are connected with SSO in this example:

User is logged into their base application, let’s say Active Directory Employee Account.
User tries to access their employee portal that contains PII (personally identifiable information) and finance information.
The first factor of login will be auto-complete, as the user is already logged in to their Active Directory Employee Account.
Employee portal would request for 2nd factor of authentication, which can be a push notification sent to their mobile device.
Users will confirm the 2nd factor of authentication by confirming the access via push notification.
Upon successful verification of both authentication factors, the employee will be able to access the employee portal.

MFA vs. SSO: What is the Difference?

The following explains the differences between MFA and SSO:

The article has already discussed how combining SSO and MFA is a great solution to the security and user experience needs of businesses. However, you can also utilize them individually as per your business needs.

The following sections talk about when SSO or MFA is a good fit individually for your business:

When to Choose MFA for Your Business

MFA provides an additional layer of protection for business data, networks, and systems, helping to keep businesses safe from cyberattacks. Here are a few tips on when businesses should consider implementing MFA:

1. Store Sensitive Information

If a business stores sensitive information, such as personal data, financial information, or trade secrets, it should consider adding MFA to protect that information.

2. Have Remote Workers

If a business has employees who work remotely, it should consider adding MFA to secure remote access to the company’s systems and data.

3. Use Cloud Services

If a business uses cloud services to store data, it should consider adding MFA to secure access to that data. This is especially important for businesses that use cloud services for critical business operations.

4. Want to Comply With Regulations

If a business must comply with regulations, such as HIPAA or PCI-DSS, it should consider adding MFA to meet those regulations’ security requirements.

5. Want to Increase Security

If a business simply wants to increase the security of its authentication process, it should consider adding MFA. MFA provides an extra layer of security to prevent unauthorized access to sensitive information.

6. Experienced a Data Breach

If a business experiences a data breach, it should consider adding MFA to prevent future breaches. MFA provides an extra layer of security to prevent unauthorized access to sensitive information.

If the business falls into any of the above-explained categories, consider implementing MFA. Check out the best practices to finalize MFA for your business here.

When to Choose SSO for Your Business

SSO improves user onboarding and makes it easier for them to access the applications they need. Here are a few tips on when businesses should consider implementing MFA:

1. Use Multiple Applications

If a business uses multiple applications, it should consider using SSO to simplify the login process for users. With SSO, users only need to enter their login credentials once and can then access all the applications and websites they need without having to log in again.

2. Want to Simplify IT Administration

If a business wants to simplify the administration of its IT systems, it should consider using SSO. With SSO, IT administrators can manage user access to all the applications and websites in one central location, reducing the time and effort required to manage multiple systems.

3. Have Remote Workers

If a business has employees who work remotely, they should consider using SSO to simplify the login process for remote workers. With SSO, remote workers can access all the applications they need from anywhere without having to remember multiple login credentials.

4. Want to Increase User Productivity

If a business wants to increase the productivity of its users, it should consider using SSO. With SSO, users can access all the applications they need quickly and easily without having to log in multiple times or remember multiple login credentials.

If the business falls into any above-explained categories, consider implementing SSO.

Conclusion - SSO vs. MFA

In conclusion, from MFA vs. SSO analysis, businesses can make Single Sign-On (SSO) better and more secure by incorporating Passwordless Multi-Factor Authentication. By doing so, businesses can take advantage of the convenience of SSO while also adding an extra layer of security.

This approach helps against the single point of failure threat that comes with SSO, and if a hacker gains access to the SSO credentials, they will not be able to get access to connect applications due to added MFA.

Passwordless MFA eliminates the need for users to remember and manage another factor. Instead, it uses alternative authentication factors, such as biometrics or push notifications, to verify a user’s identity. This makes the login process even more convenient while also increasing security. Know more about implementing MFA feature.

In summary, combining SSO and Passwordless MFA can provide a balance between convenience and security.

Most Used REST API Authentication Methods & Strategies

Andy Agarwal — Tue, 07 Feb 2023 06:41:19 +0000

REST APIs are a powerful tool for developers, allowing them to quickly and easily access data and services. However, with this power comes the responsibility of ensuring that APIs are secure and only authorized users can access them. One way of doing so is adding authentication to the REST API.

REST API authentication is a process used to authenticate users and applications when making API requests. In this article, we’ll discuss the different types of authentication, the benefits and drawbacks of each, and how to implement them. It also covers how to secure your REST API with authentication.

What is API Authentication?

API Authentication is the process of verifying the identity of a user or device before allowing them access to an API’s protected resources. Authentication is used to ensure that only authorized users can access the API and to prevent unauthorized access.

API Authentication vs. Authorization

API Authentication

Verifies the identity of the client or user
Ensures that only authorized clients or users can access the API
Prevents unauthorized access. Examples: token-based authentication, OAuth, API keys

API Authorization

Controls access to specific resources or actions within the API
Determines what actions a client or user is allowed to perform via API
Can be based on user roles or permissions. Examples: role-based access control, attribute-based access control

Know more about authentication and authorization concepts.

4 Most Used REST API Authentication Methods

Several types of authentication methods for REST APIs can be used, including the following:

Basic Authentication
Token Authentication
OAuth Authentication
API Key Authentication

1. Basic Authentication

Basic authentication is the simplest form of authentication, and involves sending a username and password with each request. This is generally done using the HTTP authorization header, and the credentials are encoded using Base64.

When to Use Basic Authentication

Basic Authentication is a great solution for applications that require secure authentication and need to authenticate users quickly and easily. It is also a good choice for applications that require a user to be logged in before they can access certain resources.

Here is an example of basic authentication in Python using the requests library:

import requests

url = "https://example.com"

# Use the following format for the username and password: "username:password"
credentials = "user:pass"

headers = {
    "Authorization": f"Basic {credentials}"
}

response = requests.get(url, headers=headers)

print(response.status_code)

In this example, the credentials variable is set to a string in the format “username:password” which is then encoded in base64 and added to the headers as the Authorization key. The requests.get() function is then called with the headers to make the request. The response status code is then printed to check if the request was successful.

Note: Basic authentication sends the credentials in plaintext, it is not recommended for use in the production environment.

2. Token Authentication

Token Authentication is more secure when compared to basic authentication, since it involves the use of a unique token that is generated for each user. This token is sent with each request, and is used to authenticate the user.

When to Use Token Authentication

Token authentication is also a good choice for applications that require frequent authentication, such as single-page applications or mobile applications. Since the authentication process does not require user passwords in each request, once a user enters the credentials, receive a unique encrypted token that is valid for a specified session time.it is more efficient and can handle more concurrent requests.

Here is an example of token authentication in Python using the requests library:

import requests

url = "https://example.com"

headers = {
    "Authorization": f"Bearer {access_token}"
}

response = requests.get(url, headers=headers)

print(response.status_code)

In this example, the access_token variable is set to a string that contains the token, which is then added to the headers as the Authorization key with the Bearer prefix. The requests.get() function is then called with the headers to make the request. The response status code is then printed to check if the request was successful. The token is usually obtained by the client by sending a request to the server with a valid username and password. The server will then respond with the token, which the client can use for subsequent requests. The token will have a specific expiration date, after which the client will have to request a new token from the server. It is recommended to use HTTPS for token authentication, and token should be encrypted with JWT or OAuth for the production environment.

3. OAuth Authentication

OAuth is an open standard for authorization that provides a way for users to grant access to their data without sharing their passwords. OAuth is used to authenticate users and authorize access to a system or service.

When to Use OAuth Authentication

OAuth 2.0 authentication in REST API is a great option for applications that need to access user data from other services, such as Google, Facebook, Twitter, or any other external service. It allows users to grant access to their data without having to share their username and password with the application.

Here is an example of OAuth 2.0 authentication in Python using the requests-oauthlib library:

import requests
from requests_oauthlib import OAuth2Session

client_id = "your_client_id"
client_secret = "your_client_secret"

# The OAuth2Session object handles the OAuth 2.0 flow
oauth = OAuth2Session(client_id, client_secret=client_secret)

# Get the authorization URL
authorization_url, state = oauth.authorization_url("https://example.com/oauth/authorize")

print(f"Visit this URL to authorize the application: {authorization_url}")

# Have the user visit the authorization URL and provide the authorization code
authorization_response = input("Enter the full callback URL: ")

# Get the token
token = oauth.fetch_token("https://example.com/oauth/token", authorization_response=authorization_response)

# Use the token to make a request
response = oauth.get("https://example.com/api/resource")

print(response.json())

4. API Key Authentication

API keys are unique strings of characters that are used to authenticate users and allow them to access the API. The key is generated by the server and provided to the client. The client then sends the key along with each request to the server, and the server uses it to identify the user and authorize their access to the resources.

When to use API Key Authentication:

API key authentication is relatively simple to implement and can be a good choice for small projects or for internal use. However, it does not provide the same level of security as other methods, such as OAuth, and is not recommended for use in public-facing applications.

Here is an example of how to use an API key for authentication in Python using the requests library:

import requests

url = "https://example.com/api/resource"

headers = {
    "Authorization": f"api-key {api_key}"
}

response = requests.get(url, headers=headers)

print(response.status_code)

In this example, the api_key variable is set to a string that contains the key, which is then added to the headers as the Authorization key with the api-key prefix. The requests.get() function is then called with the headers to make the request. The response status code is then printed to check if the request was successful.

Basic Auth vs. Token Auth vs. OAuth vs. API Key Auth

Each of these methods of authentication has its own advantages and disadvantages.
Basic authentication is simple to implement and is the most widely used method of authentication. However, it is not as secure as other methods and can be vulnerable to attacks.
Token-based authentication is more secure than basic authentication, but it can be difficult to implement.
OAuth is a secure method of authentication, but it requires the user to have an account with the service provider.
API keys are also secure, but they can be difficult to manage.

Best Strategies for REST API Authentication Implementation

When implementing REST API authentication approaches, it is important to follow best practices to ensure secure access. Here are some best practices for implementing authentication.

1. Implement Access Control Lists (ACLs): ACLs are used to restrict access to specific users or applications. This helps ensure that only authorized users and applications can access an API.

2. Use Secure Authentication Protocols: Secure protocols such as OAuth and OpenID Connect can be used to authenticate users and applications. These protocols provide an extra layer of security and help ensure that only authorized users and applications can access an API.

3. Enforce Strong Passwords: Strong passwords should be used to protect user accounts and access tokens. Such as, passwords should be at least 8 characters long and contain a mix of upper and lowercase letters, numbers, and special characters.

4. Use Encryption: Encryption can be used to protect access tokens and other sensitive data. This helps ensure that only authorized users and applications can access an API.

5. Monitor Access: It’s important to monitor access to an API to detect unauthorized access attempts. This can help identify potential security issues and help ensure that only authorized users and applications can access an API.

Conclusion

REST API authentication is an essential part of any API system, as it provides a secure way to control access to the API and its resources. There are several types of authentication models in REST API, and it is important to choose the right one to authenticate the REST API for you. Understanding the workings of authentication in REST APIs and the different types of authentication methods available will ensure that your API is secure and that only authorized users and applications can access its resources.