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

There are some limitations for using this feature: 

• Stores must use Classic customer accounts to use this feature. 
• Stores must have Shopify Setting "Require Login" turned off.
• SMS delivery for the four-digit access code is only compatible with phone numbers from the United States and Canada (with a +1 country code). International phone numbers only receive the four-digit access code via email. 
• Due to US laws and legislation, stores selling or referencing products containing hemp or cannabidiol (CBD) cannot send text message notifications. Stores selling or referencing CBD or hemp-based products can use this feature to only send email notifications. Referencing includes mentions of hemp in blog posts, or explanations on product pages. 
• 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.

How it works

Recharge's passwordless login widget allows customers to log in to the customer portal using a four-digit access code, instead of using the magic link sent via email. 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.  

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. 

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 allows customers to log in to their Recharge customer portal with 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 Customer portal login section of the page. 
3. Click the toggle to enable Customer portal passwordless login and choose the channel to send the 4-digit authentication code.
   • Available channels include text message, email, or both.
     
     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. 
     
4. Optional - Click Activate redirect from login page to install a code snippet that automatically redirects customers from the Shopify account login page to the Recharge passwordless login widget.
   • With this setting disabled, customers will have to click the Manage Subscriptions link on the Shopify account login page to access the passwordless login widget. 
     
5. Optional - Enable or disable the Manage subscription section on the checkout order summary page. If enabled, clicking Login or Register in the Manage subscription section will redirect the customer to the passwordless login page. 
   
6. Optional - Click Preview to preview the passwordless login widget. 
7. Click Save. 

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.
   
   Note: The Force Shopify account logins setting is only available after Multipass is enabled and with Embedded customer portal locations. This setting does not work with Hosted customer portal locations. For more information on customer portal locations, see Specify the customer portal location.
   
6. Click Save. 

Disable the feature

To disable passwordless login and/or Multipass, refer to the following instructions:

1. From the merchant portal, click Storefront and select Customer portal. 
2. Locate the Customer portal login section of the page.
3. Click the toggle to toggle off Customer portal passwordless login and/or Multipass. 
4. Click Save. 

Disabling passwordless login will turn off the feature and all other settings associated with the feature.

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.

Troubleshooting

I am not able to locate the passwordless login page

The passwordless login page is accessed from your store's Customer Account login page via the Account Access link. If you are unable to locate the Account Access link page, ensure you are linking {yourstorenamehere.myshopify.com}/tools/recurring/get-subscription-access from the Customer Account login page or from somewhere else on your storefront. For more details, see Confirming the Account Access link is installed.

My customer did not receive a 4-digit code via email or SMS

If you have a customer reach out that did not receive their 4-digit code via email or SMS, try these troubleshooting steps: 

1. Recommend that the customer checks their email's spam folder. 
2. From the merchant portal, check the customer's profile to verify the customer has a phone number listed with a valid +1 country code. SMS delivery for 4-digit authentication codes is only compatible with phone numbers from the United States and Canada (with a +1 country code). International phone numbers will only receive an email with their code. 
3. If the first two steps are unsuccessful, have the customer refresh the passwordless login page and re-enter their email address to receive a new code. 
4. If the issue is still unresolved, contact the Recharge support team. 

Customers are experiencing a login loop

Passwordless login works by directing the customer to the customer portal from the passwordless login widget. In Recharge, if the Force Shopify customer account logins setting is enabled for the customer portal, passwordless login will redirect the customer back to the Shopify login page. This creates a login loop. There is a solution being developed to fix this issue.

In the meantime, there are two methods to fix this issue: 

Method 1

Disable the Force Shopify customer account logins setting in the Recharge merchant portal:

1. 1. From the Recharge merchant portal, click Storefront and select Customer Portal.
   2. Under Customer Details, toggle off Force Shopify customer account logins. 
      
   3. Click Save.

Method 2

Enable Multipass. Multipass fixes this issue by logging the customer into Shopify and the Recharge customer portal at the same time. This method is only available for Shopify Plus merchants. 

If this setting is not enabled and customers are still experiencing a login loop, contact the Recharge support team for assistance.

FAQs

How can I translate the language used for passwordless login?

You can adjust the language used for passwordless login by adjusting your store's Account login translation settings. See Translations for more details. 

Can I edit the email and SMS messages that customers receive with their 4-digit code?

No, you cannot edit or customize these messages. 

Do customers need to have a phone number on file to use this feature?

No. Customers that do not have a phone number on file will receive the 4-digit code at the email address associated with their account. 

How does 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.