Passwordless login for the customer portal

With passwordless login, customers can access their customer portal without needing to sign into their Shopify account. To sign in, customers receive a secure four-digit code via email and SMS. In addition, Shopify Plus merchants can use Multipass with this feature. This article provides an overview of the passwordless login feature and steps for enabling the feature.

Before you start

• Stores using a custom customer portal can use Recharge's JavaScript SDK to implement passwordless login. For more information, see Using passwordless login for custom customer portals.
• SMS delivery of the four-digit access code only works with U.S. and Canadian phone numbers (+1 country code). If your customer uses an international number, they'll receive the access code by email instead.

How it works

Recharge's passwordless login widget enables customers to log in to the customer portal using a four-digit access code, eliminating the need for a magic link sent via email. Customers who do not have a phone number on file will receive the 4-digit code at the email address associated with their account.

The four-digit access code is sent via email and/or SMS using the following logic: 

• If the customer has both an email address and an eligible phone number on their account, they receive the four-digit access code via email and SMS.
• If the customer has only an email address or an email address and an ineligible phone number on their account, they receive the four-digit access code via email. 
• If you sell CBD products, customers receive the four-digit access code via email only.  

You cannot edit or customize the email and SMS messages that customers receive with their 4-digit code. You can adjust the language used for passwordless login by changing your store's Account login translation settings. See Passwordless login for Affinity for more details. 

In addition, Multipass is supported for Shopify Plus merchants. With Multipass enabled, subscriptions customers can sign into both Shopify and their Recharge customer portal using the passwordless login widget. 

Multipass work with Passwordless login

Multipass works differently with Passwordless login depending on your store configuration: 

• Store has Multipass and have configured a redirect URL: All customers, whether they exist in Recharge or just in Shopify will land on the page you have configured. For example, if you want your customers to always land on Recharge, you can configure that page to /tools/recurring/login.
• Store has Multipass and does not have a redirect URL: All customers, whether they exist in Recharge or just in Shopify will land on Shopify’s (/account) page. Subscribers will click “Manage subscription” to browse the Recharge customer portal.
• Store does not have Multipass configured:If the customer email exists in Recharge, the customer will log in and land in the Recharge customer portal. If the customer email doesn’t exist in Recharge, an error will be thrown stating that the account wasn’t found. Customers who only exist in Shopify are not automatically created in Recharge if Multipass is not enabled on your store.

Instructions for your customers

Passwordless login simplifies the process of accessing the customer portal. Provide customers with these instructions to log in using the passwordless login page: 

1. Navigate to the Shopify account login page. 

2. Click Manage Subscriptions. 

   Note: Some stores may not have this page or link, and will automatically redirect to the passwordless login widget. In this scenario, skip to Step 3.

   

3. Enter the email address associated with your subscription on the next page. Click Send login code.
   
4. You will receive a 4-digit authentication code by email and/or text message. The 4-digit authentication code is valid for four minutes. If the code has not been used in four minutes, go back to Step 1 to request a new code.
   • If you only have an email address on your account, you will only receive the 4-digit authentication code via email.
   • If you have a valid phone number and email address on your account, you will receive the 4-digit authentication code via email and SMS.
   • If you are purchasing a product containing CBD, you will only receive the 4-digit authentication code via email. 
5. Enter the 4-digit code into the passwordless login screen.

The maximum number of login attempts is five. If you have exceeded five failed login attempts, refresh your web browser to reset the login attempts. This requires you to re-enter your email address, obtain a new 4-digit code, and log in again. 

Enable the feature

The passwordless login feature can be enabled from your Customer portal settings page and configured in several different ways.

Enable passwordless login

Enabling passwordless login lets customers log in to their Recharge customer portal using a four-digit access code. Refer to the following instructions to enable passwordless login:

1. From the merchant portal, click Storefront and select Customer portal. 
2. Locate the Login settings section of the page. 
3. Select Recommended: allow passwordless login as your preferred login setting option.
4. Click Save. 

Note: Due to US laws and legislation, stores selling products containing cannabidiol (CBD) do not have access to the text message channel. If you believe your store was incorrectly flagged for CBD products, contact the Recharge support team. 

Enable Multipass

Multipass is available for Shopify Plus merchants. Enabling Multipass allows customers to log in to both their Shopify account and the Recharge customer portal using the passwordless login widget. Passwordless login must be enabled to use Multipass. Refer to the following instructions to enable Multipass: 

1. Enable passwordless login. 
2. Click the toggle to toggle on Shopify Multipass. 
3. Enter your Multipass secret. For instructions on finding your Multipass secret, see Shopify Multipass.
4. Optional - Provide a Login direct URL. This is the URL your customers are redirected to after signing in with passwordless login. By default, this is usually the customer portal.
5. Optional - Enable or disable Force Shopify account logins by clicking the toggle under the passwordless login settings.
6. Click Save. 

Disable the feature

To disable passwordless login, refer to the following instructions:

1. In the merchant portal, click Storefront, then select Customer portal. 
2. Locate the Login settings section of the page.
3. Select Don't allow passwordless login.
4. Click Save. 

Disabling passwordless login will disable the feature and all associated settings.

Customize the passwordless login page

You may want to customize the passwordless login page to match the look and feel of your storefront and brand. The default styling of the passwordless login page can be customized using CSS: 

1. From your Shopify admin, go to Online Store and click Themes.
2. Click Actions and select Edit code.

3. Click the Assets folder and launch the theme.css or base.css file.

   Note: The name of this file can vary depending on the Shopify theme being used. If you cannot locate the correct file, contact the theme developer for assistance.
4. Insert the following code template on the last line of your store's theme code: 

:root .rc-login {
--rc-title-font: 
--rc-body-font:
--rc-font-color:
--rc-button-bg-color:
--rc-button-font-color:
--rc-secured-display:
--rc-border-radius: 
}

You do not need to include a value for each CSS variable in the code template. If you would only like to customize specific CSS variables, remove the lines that you do not want to change. Removed lines will display as their default values.

Use the following table as a reference for customizing each element of the passwordless login page: 

In addition to customizing the passwordless login page, you can customize the Account Access page. For more information, see Customize the Account Invite page.

Customize the passwordless login notification

You can customize the passwordless login email and SMS notifications sent to your customers when they receive their 4-digit authentication code in your Recharge Notification settings. 

• For information on customizing email notifications, see Notifications.
• For information on customizing SMS notifications, see Notifications for an overview of the template and Variables for SMS for an overview of the available SMS variables.

Considerations

Consider the following when using passwordless login: