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.
- Recharge Checkout on Shopify
- Shopify Checkout Integration
Before you start
There are some limitations for using this feature:
- Stores must use Classic customer accounts to use this feature.
- 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 products containing cannabidiol (CBD) cannot use this feature.
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.
In addition, Multipass is now 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.
Note: 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.
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:
- Navigate to the Shopify account login page.
- Under Need help accessing your subscriptions?, click Click here. This launches the passwordless login page.
- On the passwordless login widget, enter the email address associated with your subscription. Click Send login code.
- You will receive a 4-digit authentication code by email and 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.
- 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
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:
- From the merchant portal, click Storefront and select Customer portal.
- Locate the Customer portal login section of the page.
- Click the toggle to toggle on Customer portal passwordless login.
- Optional - Click Preview to preview the passwordless login widget.
- Optional - Disable the Force Shopify customer account logins setting.
- If this setting is enabled with passwordless login, customers may experience login errors. If you wish to keep this setting enabled, you must use Multipass. Multipass is only available for Shopify Plus merchants.
- If this setting is disabled, skip this step.
- 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:
- Enable passwordless login.
- Click the toggle to toggle on Shopify Multipass.
- Enter your Multipass secret. For instructions on finding your Multipass secret, see Shopify Multipass.
- 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.
- Click Save.
Disable the feature
To disable passwordless login and/or Multipass, refer to the following instructions:
- From the merchant portal, click Storefront and select Customer portal.
- Locate the Customer portal login section of the page.
- Click the toggle to toggle off Customer portal passwordless login and/or Multipass.
- Click Save.
Customize the passwordless login page
Note: Customizing this page requires custom code and editing of your store's theme code. Custom code is not supported by Recharge as per the design and integration policy. If you require the assistance of a developer, visit the Recharge Agency Partner Directory.
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:
- From your Shopify admin, go to Online Store and click Themes.
- Click Actions and select Edit code.
- Click the Assets folder and launch the theme.css file.
- 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:
CSS Variable |
Element |
Default value |
--rc-title-font |
Title font |
Greycliff, sans-serif |
--rc-body-font |
Body font |
Avenir |
--rc-font-color |
Font color |
#000 |
--rc-button-bg-color |
Button background color |
#163840 |
--rc-button-font-color |
Button font color |
#FFF |
--rc-secured-display |
Recharge Secured logo |
block |
--rc-border-radius |
Border radius | 6px |
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:
- Recommend that the customer checks their email's spam folder.
- 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.
- 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.
- 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:
-
- From the Recharge merchant portal, click Storefront and select Customer Portal.
- Under Customer Details, toggle off Force Shopify customer account logins.
- 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.
FAQ
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.