Shopify Passkeys: Analysis of Sign-Ups and Logins with Passkeys

TL;DR

• Availability since Q4 2022
• Initial passkey setup works only via the Security section in the Shopify account settings
• Availability of passkeys on all major platforms (iOS, macOS, Windows, Android)
• Availability on both the Shopify website and app
• Passkeys only available at login, not at initial sign-up for an account (yet)
• Sophisticated device detection, device management and passkey-readiness detection logic by Shopify
• Seamless cross-device usage between different platforms

1. Introduction

More and more companies from a wide range of industries are stepping into
a password-free world and implement passkeys. Through this series of articles, we aim to provide a comprehensive overview of the passkey user experience of those companies. This should enable you to incorporate these findings and enhance your product login accordingly. In each article, we focus on a single company. Today, we dive into Shopify. Passkeys became available for Shopify accounts in Q4 2022. The widespread rollout of Shopify passkeys is a game- changing moment for the e-commerce industry, as one of the largest e-commerce platforms enabled millions of users to use passkeys.

Disclaimer:

1. Status of the analysis is May 2023. Passkey features are subject to change by companies on an ongoing basis.
2. Please refer to the use cases to find the devices we used for the analysis.

2. Key insights from Shopify analysis

In this section, we present the most important insights we have gained from the analysis of Shopify passkeys.

2.1 Highlights of Shopify passkeys implementation

2.1.1 Hybrid rollout strategy

Currently, Shopify passkeys are only available to log into your Shopify account. To initially set up a passkey for the device used, you must first go to the account settings in your Shopify admin area. The passkey can then be created manually in Security section. This is probably done to start with low risk and find bugs with early adopters (as passkeys flows, especially for cross-device and cross-platform processes are quite complex to implement). Before the passkey is actually created, the user must authenticate with their password and confirm the creation once again. The fact that users must proactively signal that they want to use passkeys by visiting the Security section shows that Shopify is gradually rolling them out to ensure a smooth process for every user. Even though this approach may be less user-friendly at the moment, it helps to gather feedback from early adopter usage and improve for all non-technical users who may not be familiar with passkeys as an additional login option. Therefore, all users can still use passwords to log in. This suggests that Shopify is using a hybrid passkey rollout strategy. This hybrid strategy is characterized by the fact that passkeys can only be used by existing users for login, and that they are not available for sign-up. In addition, legacy login methods are always retained here. This rollout strategy is to ensure a careful transition to passkeys for existing users.

2.1.2 Smart passkey management

Shopify detects for which devices a passkey has already been created and lists them in the Shopify account. The detection includes the platform (e.g., Android, Apple, and Windows), the location where the passkey is stored (e.g., Apple iCloud Keychain), and the creation timestamp. Although those features dont prevent the user from clicking the "Create a new passkey" button for already registered devices (see section Drawbacks of the current Shopify passkeys implementation) yet the user is given very clear details about his created passkeys here.

2.1.3 Most seamless way of cross-device usage currently possible

Cross-device usage for passkeys refers to the ability to use a single passkey to authenticate across multiple devices. This means that a user can create a passkey on one device and then use the same passkey to authenticate on other devices, even outside the same ecosystem (e.g., Apple), without having to enrol each device separately. Among all the companies examined thus far that have implemented passkeys, Shopify stands out as the first one where the cross-device usage functions the most seamless way currently possible (see use case 6). This is remarkable, as cross-device-usage is one of the biggest challenges in implementing passkeys.

2.1.4 Clear and simple user communication

Shopify uses the term passkeys. Since users consciously decide to store passkeys for their account by visiting Security section in the account settings mentioned above, Shopify probably assumes that these users know what passkeys are (or educates them hereby). One notable aspect we observed is that Shopify got all users covered who may be unfamiliar with passkeys or wish to learn more about them before using them. This is done through comprehensive documentation provided by Shopify. The passkey feature is accompanied by a concise description, conveniently located where users can create their passkey. Additionally, a detailed description is accessible through an additional link, offering users a more in-depth understanding of the passkey functionality. As with Google passkeys and eBay passkeys (check out our analysis on Google and eBay passkeys for more information), the reference is drawn to the underlying concept of biometric authentication here as well, with which the vast majority of users are likely to be familiar. However, general and no platform-specific authentication methods (e.g., Face ID or Windows Hello) are mentioned here.

2.2 Drawbacks of Shopify passkeys implementation

2.2.1 No synchronization within the Windows ecosystem

Currently, Shopify passkeys are only available to log into your Shopify account. To initially set up a passkey for the device used, you must first go to the account settings in your Shopify admin area. The passkey can then be created manually in Security section. This is probably done to start with low risk and find bugs with early adopters (as passkeys flows, especially for cross-device and cross-platform processes are quite complex to implement). Before the passkey is actually created, the user must authenticate with their password and confirm the creation once again. The fact that users must proactively signal that they want to use passkeys by visiting the Security section shows that Shopify is gradually rolling them out to ensure a smooth process for every user. Even though this approach may be less user-friendly at the moment, it helps to gather feedback from early adopter usage and improve for all non-technical users who may not be familiar with passkeys as an additional login option. Therefore, all users can still use passwords to log in. This suggests that Shopify is using a hybrid passkey rollout strategy. This hybrid strategy is characterized by the fact that passkeys can only be used by existing users for login, and that they are not available for sign-up. In addition, legacy login methods are always retained here. This rollout strategy is to ensure a careful transition to passkeys for existing users.

2.2.2 Disabled Conditional UI functionality

Conditional UI leverages the autofill function passkeys provide. It automatically prefills passkeys as soon as the user clicks on the username input field. This means that users no longer must search for their credentials manually (not even usernames!), as they are already stored in the device / browser and are automatically pre-filled. However, Shopify has not implemented this feature (yet).

2.2.3 Inaccurate passkey detection

Even if a passkey is already stored in the Shopify account for a device, the Create a new passkey button remains visible, allowing users to manually start the creation process for a new passkey. This implies that Shopify does not clearly detect that a passkey might have already been created for this device. If you try to recreate a passkey, you will be informed that a passkey has already been generated for this device in a proper manner (no bug) and the new one will not be stored.

3. Analysis of the login process

To make the analysis of Shopify passkeys as comprehensive as possible, we tested the login process with several device-browser-combinations. We have recorded the outcomes in the following use cases. To better understand the use cases, please read through the conceptual definitions of passkeys below before jumping into the use cases.

3.1 Conceptual definitions

3.1.1 Single-device passkey vs. multi-device passkey

Passkeys come in two distinct types which are single-device and multi-device credentials. Single-device passkeys are tied to a specific device, meaning that the passkey can only be used on the device it was generated on. Multi- device passkeys are the true passkeys that can be synced and transferred between devices. This means that users can use any of their devices that support passkeys to authenticate, regardless of whether the credential was created on that specific device. This greatly enhances the usability of passkeys, as users dont need to enrol each device.

3.2 Tested cases

Note that we have only performed the use cases with passkey-ready devices (e.g., no iPhone prior to iOS 16.0, no MacBook prior to macOS Ventura, no Android prior to Android 9, no Windows device prior to Windows 10). Also, for testing purposes we used two different Shopify accounts (livep58236@farebus.com for use cases 1-3 and 10, and yigesot408@favilu.com for uses cases 4-9). This is why you will find different passkey types for identical device- browser combinations in the table below. In addition, we tested the passkey login with an iPhone only in the Shopify app because the login process in different browsers does not differ regardless of the platform and device.

3.2.1 Use case 1: MacBook Chrome passkey creation (initial passkey setup)

We created the first Shopify passkey for our account using a MacBook in Chrome.

In the account settings, where passkeys can be created by the user, the term passkeys is used. Just next to it is a tag with the caption "Recommended", which shows that Shopify wants to encourage those users who have made it as far as the account settings to move passwords to passkeys. It can be implied that this tag also refers to the benefits of passkeys compared to passwords. The explanation below provides a short definition of passkeys. On the one hand, it refers to the use of biometric authentication without explicitly mentioning a platform-specific biometric authentication method such as Face ID. On the other hand, it is about the synchronisation of passkeys between identical platforms. The explanation is characterised by the fact that users are introduced to a complex technology using a simple and easy-to- understand wording. This education of users is extremely important, as passkeys are still rather unfamiliar, which can lead to user concerns that this new login ceremony may be more insecure and more difficult than the familiar password method. For those users who want to learn more about passkeys, a link to more detailed documentation has also been provided.

Next to the explanation, the user will find the button to manually create a passkey. This allows the user to decide whether and when to go passwordless at any time (opt-in). Above the button is a prompt addressed to the user, which we have not come across in previous analyses of major passkey adopters like eBay (find the eBay passkeys analysis) or Google (find the Google passkeys analysis).

This prompt is intended to further encourage the user to create a passkey by explicitly addressing the short time it takes to set it up, which might be associated with increased UX in the user's mind.

After we clicked on "Create a passkey", we were asked to enter our password, which we assigned during registration, so that no unauthorised user can create a passkey for our account.

Once the correct password has been entered and "Next" clicked, another user prompt follows, which initiates the actual passkey creation process. What is particularly remarkable is that at each step of the process, the user is clearly communicated what comes next.

As soon as the user clicks "Continue", a pop-up is automatically triggered in Chrome, allowing the user to create the passkey.

Since we are using a MacBook, the biometric authentication method is Touch ID.

After creating the passkey, the user is automatically returned to the account settings and receives a prompt that the passkey has been successfully created. Since the passkey creation worked for us, we cannot say whether the user also receives a notification if it did not work.

The passkey is stored in the account settings. The user can track the specifics of the passkey here, as Shopify recognises the type of passkey, in what browser, on what device, and at what time it was created. Since we used a MacBook in Chrome, the type of passkey is a single-device passkey which is not synced across Apple devices.

In addition to this smart passkey management, which we have also noticed for Google passkeys, it is also possible to create additional passkeys manually.

3.2.2 Use case 2: MacBook Chrome passkey login

In this use case, we used the passkey created in use case 1 to successfully log into our Shopify account on a MacBook using the Chrome browser. This was the first time logging into the Shopify website using a passkey.

After we entered our email address in the login screen, Shopify automatically recognized that a passkey was created for this account. This worked for every device-browser combination we tested. Hence, in the subsequent screen provided below, the recommendation was made to log in using the passkey. It is worth noting that while it is still feasible to log in with a password, emphasis is placed on passkeys by prominently positioning the passkey button above the password field.

After clicking the Log in with passkey button, the passkey created in use case 1 is retrieved.

Since we are using a MacBook, we verified our identity by using our fingerprint (Touch ID).

3.2.3 Use case 3: MacBook Safari passkey creation

In this use case, we created a 2nd passkey for our account by accessing the Shopify website with MacBook in Safari and clicking Create a passkey in the account settings. The following process steps are identical as presented in use case 1.

Since the passkey was successfully created, it is now also stored in the account. As compared to the passkey from use case 1, this is a multi-device passkey. This means that it is available on multiple devices of the same platform. As this passkey was generated on a MacBook in this use case, it becomes accessible on all Apple devices associated with the same iCloud account. This synchronization occurs through the Apple iCloud Keychain, allowing the passkey to be available across multiple Apple devices.

3.2.4 Use case 4: Android Chrome passkey creation

In this use case, we created a passkey in chrome using an Android device. Please note that we did not use the account from use cases 1-3 for this but created a new account. Since this is a new user, the created passkeys from use cases 1-3 are not available in the account settings.

The passkey generated during this step is stored within the Google account that is logged into Chrome (e.g., vincent.delitz@corbado.com). This enables the passkey to be synchronized with the Google Password Manager of that particular Google account, facilitating its retrieval on other devices.

The passkey generated during this step is stored within the Google account that is logged into Chrome (e.g., vincent.delitz@corbado.com). This enables the passkey to be synchronized with the Google Password Manager of that particular Google account, facilitating its retrieval on other devices.

3.2.5 Use case 5: Android Chrome passkey login

To test whether the synchronization of the passkey created in use case 4 works between different Android devices, we used a new Android device in this use case. To accomplish this, we pre-logged into Chrome using the Google account associated with the synchronized passkey (vincent.delitz@corbado.com).

To log in, we followed the same steps as in use case 2. After we entered the email address of our Shopify account , Shopify recognized that a passkey has already been created for this account. After clicking the Log in with passkey button, we were seamlessly prompted to retrieve the passkey from use case 4, using the Android device on which it was initially generated (Galaxy S21 5G).

3.2.6 Use case 6: MacBook Chrome passkey login

After the synchronization of the passkey created in use case 4 worked seamlessly between different Android devices, we tested the cross-device synchronisation between devices of different platforms (e.g., Apple vs. Android) in this use case. Again, we used the same Shopify account for this so that Shopify recognises that a passkey already exists for this account (yigesot408@favilu.com).

To test the cross-device synchronisation properly, we pre-logged into Chrome using the Google account associated with the synchronized passkey (vincent.delitz@corbado.com). After clicking on Log in with passkey, the Chrome pop-up suggested to retrieve the passkey from the Android device that is associated with the Google account and on which the passkey was initially created (S21 von Vincent).

After selecting S21 from Vincent, we received a push notification on this Android device. For the sake of completeness, it should be mentioned here that we received the push notification both with Bluetooth switched on and off on the Android device.

After confirming it, we were successfully logged into our Shopify account without having created a new passkey.

The successful log in was signaled by another push notification Sign-in succeeded on the home screen of our Android device.

3.2.7 Use case 7: Windows Chrome passkey login

In this use case we used a Windows device and tried to log in with the Shopify account that we already used in use cases 4-5 (yigesot408@favilu.com).

Since we already created a passkey for this account, Shopify again suggested that we use this passkey to log in. After clicking on the Log in with passkey, we received the Windows Security pop-up below. This is because we generated the passkey for this Shopify account using an Android device. This passkey is only synced within the Android ecosystem and therefore cannot be accessed with a Windows device. As we do not have an external security key, we clicked Cancel.

After we clicked Cancel, the pop-up triggered by Chrome below automatically appears to let you choose another way to log in. Since Windows Hello is also not possible due to the non-synchronised passkey, we clicked Cancel again.

Shopify then automatically jumps to the password field and highlights it.

3.2.8 Use case 8: MacBook Chrome passkey login

In this use case we used a MacBook and tried to log in with the Shopify account that we already used in use cases 4-6 (yigesot408@favilu.com).

Since the passkey generated for this account was only synced within the Android ecosystem, Chrome automatically triggered the pop-up below, which looks slightly different compared to Chrome on Windows.

We clicked on Use a phone or tablet which automatically triggered the QR code below.

We scanned the QR code with a passkey-ready iPhone going to be introduced in a later use case. Since no passkey has been created for this account in the Apple ecosystem yet, none can be retrieved.

3.2.9 Use case 9: MacBook Safari passkey login

This use case is identical to the previous use case, except that this time we tried to log in via Safari.

After Shopify recognises that a passkey exists for this account (use case 4), an automatic pop-up appears, just as in Chrome, giving us various options for retrieving this passkey. First, we chose the first option.

We scanned the QR code with the same iPhone that we used in the previous use case.

Since the passkey created on the Android device cannot be retrieved, we could not log in. The same was the case when we decided to use the security key because we didn't have one at hand.

3.2.10 Use case 10: iPhone App passkey login

In this use case we show how the passkey login looks in the Shopify app for a Shopify account with existing passkey.

After clicking on Log in in the Shopify app, an automatic notification appears that the login will be performed via the Shopify website. If you confirm this, the Shopify web app appears. From this point on, the login process is similar to that of the previous use cases.

4. Conclusion

As one of the leading e-commerce companies, Shopify has introduced passkeys for all users across all platforms. Their implementation of passkeys is commendable, emphasizing user education, providing excellent user experience, and addressing the existing limitations of passkeys, such as cross-device processes and the lack of sync options on Windows. In our opinion, Shopify offers one of the best passkey implementations available. However, it is worth noting that the sign-up process has not yet been touched, as users are still required to set a password when creating a new Shopify account.