4 posts tagged with "saas"

Passkeyme now supports Discoverable Credentials! This new feature takes user authentication to the next level, providing a more seamless and secure experience for your users. 🚀

What are Discoverable Credentials?​

Discoverable Credentials, also known as Resident Keys, allow users to authenticate without needing to remember and enter their username. This is a significant improvement over non-discoverable credentials, where users must input their username every time they log in. With discoverable credentials, the authentication dialog will automatically display all available credentials for the user to choose from.

Non-Discoverable Credentials​

Discoverable Credentials​

Pros and Cons of Discoverable Credentials​

Pros​

• User Convenience: Users don’t need to remember and type their usernames. They can simply select their credential from a list.
• Enhanced Security: Reduces the risk of phishing attacks as users do not type their usernames, which could be intercepted by malicious actors.
• Improved User Experience: Faster and easier authentication process.

Cons​

There are normally some downsides to using discoverable credentials, however Passkeyme takes care of these for you!

This includes:

• Storage Requirements: Discoverable credentials need to be stored securely on the device - but Passkeyme takes care of storage of the credential, securely, and anonymously!

• Complexity: Implementing and managing discoverable credentials can add complexity to the authentication process - except if you use Passkeyme, and then its a breeze!

• Device Dependency: If a user loses their device, they could lose access to their credentials unless they have a backup method - this is still true, however with Passkeyme:

  • The user can still enter their username, and use non-discoverale mode and get access to their Passkey
  • Fallback-flow is being built as we speak - watch this space!

• Comparatively worse UX: Compared to non-discoverable, discoverable credentials require the user to select the correct passkey, which is an extra step. If it is possible to use non-discoverable credentials, this is recommended - i.e. if the username is cached on the device, or can be input buy the user

How to Enable Discoverable Credentials in Passkeyme​

Activating discoverable credentials in Passkeyme is simple. Follow these steps:

Step 1: Edit the Application​

Navigate to your application settings in the Passkeyme dashboard and click on "Edit Application".

Step 2: Set the "Allow discoverable credentials" Flag​

In the application settings, set the "Allow discoverable credentials" flag to true.

Step 3: Modify Your Authentication Requests​

When sending authentication requests, ensure that you do not include a username in your POST requests to /start_authentication and /end_authentication.

Note, even with Discoverable enabled, you can still trigger a non-discoverable (which is less prone to device-specific operability issues) by specifying the username. If the username is known - i.e. if its a device that has previously logged in with the passkey and you have stored the username locally, we reccommend to use non-discoverable credentials so the user does not have to select their username from the Passkey dialog, which is cleaner.

POST /start_authentication
{
}

POST /complete_authentication
{
    "credential": "...."
}

Passkeyme.com supports Passkeys!​

Well, it would be rude not to - you can now register a passkey for Passkeyme.com!

I do have to take a bow - it was pretty straightforward to set up. The basic flow is as follows:

1. User logs in as Normal
2. Go to the Upper RHS Passkey menu item
3. Follows the prompts to register their passkey
4. Log out
5. Select their username from the dropdown on the login screen
6. Click Sign in with Passkey
7. Done!

Implementation​

To implement, I went through the following steps:

1. Install the passkeyme-web-sdk via

npm install passkeyme-web-sdk

2. Then added a RegisterPasskey component to my React frontend:

import PasskeymeSDK from 'passkeyme-web-sdk';
const passkeymeSDK = new PasskeymeSDK();

...

      let challengeResponse = await axiosClient.post(`/api/auth/register-passkey`, {
        username: thisuser.username,
        displayname: thisuser.name
      });

      const passkeyResponse = await passkeymeSDK.passkeyRegister(challengeResponse.data.challenge);

      let completeResponse = await axiosClient.post(`/api/auth/register-passkey/complete`, {
        username: thisuser.username,
        credential: passkeyResponse.credential
      });

3. In the above, I added two new endpoints to my backend:

/auth/register-passkey
/auth/register-passkey/complete

These delegate to the passkeyme.com/webauthn/:appid/start_registration and complete_registration endpoints

4. For Authentication, I added the following two endpoints to my backend:

/auth/authenticate-passkey
/auth/authenticate-passkey/complete

Which similarly delegate to the passkeyme.com/webauthn/:appid/start_authentication and complete_authentication endpoints

5. Add the corresponding calls to my frontend login component:

      let challengeResponse = await axiosClient.post(`/api/auth/authenticate-passkey`, {
        username
      });

      const passkeyResponse = await passkeymeSDK.passkeyAuthenticate(challengeResponse.data.challenge);

      let completeResponse = await axiosClient.post(`/api/auth/authenticate-passkey/complete`, {
        username,
        credential: passkeyResponse.credential
      });

5. Persist the array of usernames, and last used username in localStorage for convenience - you could also require the user to enter the username if that is more appropriate.

The Passkey form looks like (Its a React component using Chakra-UI):

      {passkeyUser && (
        <>
        <Box mb="6">
          <Select value={passkeyUser} onChange={(e) => setPasskeyUser(e.target.value)}>
            {passkeymeUsers.map((user: string) => (
              <option value={user} key={user}>{user}</option>
            ))}
            </Select>
          <Button mt="6" type="submit" width="full" colorScheme="brand" onClick={() => doPasskeyAuthenticate(passkeyUser)}>
            {translate("pages.login.passkey.button", "Sign in with Passkey")}
          </Button>
        </Box>
        <Divider></Divider>
        </>
      )}

Note it will only show the Passkey Box if there is a passkeyme username in localStorage, so if the user has not registered a Passkey, it won't be confusing.

Key Points​

• Note it supports multiple passkeys, you select the one you want to log in with from the dropdown. These are just maintained in the browser localStorage - its just the usernames, so its safe.

• This actually does serve to showcase how you can implement passkeys with a simple workflow that yields an awesome user-experience! It demonstrates a best practice for implementing passkeys, i.e:

1. Register the passkey from an Authenticated user inside your app - your backend proxy to start/finish_registration should require an authenticated session
2. User then just needs to specify their username to log in subsequently
3. You can persist the username(s) on the device for convenience for the user.

• Note also, the standard login serves as a Fallback. It is vital to always have a Fallback mechanism in case the user cannot access their Passkey - e.g. they have lost access to their iCloud, or lost the only device they use, etc.

More on the Fallback flow in future - this will be where I focus next, as it is important to get it right.

Conclusions​

This was a simple, yet straightforward implementation using the Passkeyme passkeyme-web-sdk and API endpoints. It took a couple of hours to put together, yet it resulted in a quite elegant UX.

It does highlight that while Passkeys don't have to be complex to implement - your User eXperience is extremely important and needs careful attention - don't just shoehorn it in, spend time on the User Journey. Or if you can't - then follow the above blueprint!

So, what are you waiting for? You can add Passkeys to your app today!

Usage Charts added!​

Passkeyme now includes usage reports - check out the Usage button from the Applications list/show pages!

Charts are interactive, so you can select date ranges, and view usage at monthly points.

Once you have built up a few months of usage, these will prove to be useful - but don't worry if there's nothig in there when you're just getting set up!

What is Passkeyme?​

Passkeyme is a SaaS platform that allows developers to easily integrate passkeys into their web or mobile applications. It provides a secure and user-friendly authentication alternative to traditional passwords.

Why Use Passkeyme?​

• Enhanced Security: Passkeys leverage public-key cryptography, reducing the risk of phishing, credential stuffing, and other common attacks.
• User-Friendly: Users no longer need to remember passwords, offering a better user experience.
• Easy Integration: Passkeyme can be integrated into existing authentication frameworks, complementing traditional authentication methods.

Getting Started​

To get started with Passkeyme, check out our documentation.