# Customer Login within Loyalty Widget
{% hint style="info" %}
All methods are available on **all plans**.\
But **Email OTP, Google Login,** and **Facebook Login** require **Shopify plus** & **Legacy customer account**
{% endhint %}
### **Overview**
Customers can sign in directly from the Joy loyalty widget without leaving the page. Joy supports four login methods — availability depends on your Shopify customer account type:
| Method | New customer accounts | Shopify plus & Legacy customer accounts | Merchant Setup |
|---|
| Sign in with Shop App | ✅ | ✅ | Toggle only |
| Email OTP | ❌ | ✅ | Paste Multipass key |
| Sign in with Google | ❌ | ✅ | Toggle only |
| Sign in with Facebook | ❌ | ✅ | Toggle only |
{% hint style="warning" %}
**Using Shopify's new customer accounts?** Email OTP, Google, and Facebook are automatically hidden — only Shop App Login will be available. Multipass only works with legacy (classic) customer accounts.
{% endhint %}
***
### For All Merchants
{% embed url="" %}
#### Shop App Login
Customers with the [Shop app](https://shop.app/) installed tap once and they're in — fastest method, no page reload.
**Merchant Setup**
{% stepper %}
{% step %}
Go to **Joy Admin → Settings → Additional Features** → toggle **"Sign in with Shop App"** ON.
That's it.
{% endstep %}
{% endstepper %}
{% hint style="info" %}
Works with both new and legacy Shopify customer accounts. No extra configuration needed.
{% endhint %}
**Customer Experience**
1. Customer opens the Joy widget → taps **"Sign in with Shop"**
2. Shop app authenticates the customer in the background
3. Widget updates in place — points, tier, and rewards visible instantly
4. **No page reload needed**
***
### For Plus & Legacy Customer Account Merchants
Shopify plus merchants using **legacy customer accounts** unlock three more methods via **Multipass**: Email OTP, Google, and Facebook.
{% hint style="success" %}
**No OAuth credentials needed.** Google and Facebook login are fully managed by Joy — just toggle them on after enabling Multipass.
{% endhint %}
{% embed url="" %}
#### Multipass Setup (prerequisite)
All three methods below require Multipass. Set it up once, then enable any combination.
{% stepper %}
{% step %}
**Enable Multipass in Shopify**
Go to **Shopify Admin → Settings → Customer accounts → Multipass** and enable it. Copy the **Multipass Secret Key**.
{% hint style="info" %}
Multipass is only available on **Shopify Plus** plans with **legacy (classic) customer accounts**. If you don't see the Multipass option, check that your store is using legacy accounts.
{% endhint %}
{% endstep %}
{% step %}
**Paste Key in Joy**
Go to **Joy Admin → Settings → Additional Features** → find the **Multipass** section → Toggle it on → paste your secret key → **Save**.
{% endstep %}
{% endstepper %}
#### Email OTP
Customers enter their email, receive a 4-digit code, type it in — done. Universal, works for every customer with an email.
**Merchant Setup**
Once multipass enabled, Email OTP will be visible by default. No set up needed!
**Customer Experience**
1. Customer enters their email in the widget → clicks **"Get Sign In Code"**
2. Receives a 4-digit code via email
3. Enters the code → clicks **"Sign In"**
4. Page reloads briefly — customer is logged in
**Code details:** 4 digits · expires in 5 minutes · single-use.
#### Google Login
One-click Google authentication. No Google Cloud Console setup needed — Joy manages OAuth server-side.
**Merchant Setup**
After enabling Multipass, toggle **"Sign in with Google"** ON. The toggle is grayed out until Multipass is active.
**Customer Experience**
1. Customer clicks **"Sign in with Google"** in the widget
2. Google authentication popup opens
3. Customer selects their Google account and approves
4. Page reloads briefly — customer is logged in
#### Facebook Login
One-click Facebook authentication. No Facebook Developer setup needed — Joy manages OAuth server-side.
**Merchant Setup**
After enabling Multipass, toggle **"Sign in with Facebook"** ON.
**Customer Experience**
1. Customer clicks **"Sign in with Facebook"** in the widget
2. Facebook login popup opens
3. Customer logs in and approves
4. Page reloads briefly — customer is logged in
{% hint style="info" %}
Google, Facebook, and Email OTP briefly reload the page as part of Multipass login. Shop App Login does **not** reload.
{% endhint %}
***
### Choosing the Right Methods
| Situation | Recommended |
| ----------------------------------- | -------------------------------- |
| Any plan, quickest setup | **Shop App** — free, zero config |
| Using new customer accounts | **Shop App** (only option) |
| Universal coverage (legacy) | **Shop App** + **Email OTP** |
| Maximum convenience (legacy + Plus) | All four methods |
{% hint style="info" %}
**Tip:** Start with **Shop App Login** (free, no setup, no page reload). If you're using legacy customer accounts with Shopify Plus, add **Email OTP** for broader coverage, then **Google** and **Facebook** for one-click social login.
{% endhint %}
***
### After Successful Login
Regardless of method, customers instantly get:
* ✅ Points balance visible
* ✅ VIP tier status and perks shown
* ✅ Rewards available to redeem
* ✅ Activity history synced
* ✅ Full widget functionality unlocked
***
### FAQ
**Q: Do I need to set up Google Cloud Console or Facebook Developer?**\
No. Joy manages all OAuth connections server-side. Just toggle on after enabling Multipass.
**Q: Why is the Google/Facebook toggle grayed out?**\
Enable **Multipass** first and paste the secret key. The toggles activate after that.
**Q: Does Shop App Login require Shopify Plus?**\
No. Works on all Joy plans with both new and legacy customer accounts.
**Q: Why does the page reload after Google/Facebook/OTP login?**\
These use Multipass which requires a Shopify redirect. Shop App Login does **not** reload.
**Q: Can I enable multiple methods at once?**\
Yes! Enable any combination. Customers see all enabled options.
**Q: Can I use OTP/Google/Facebook with Shopify's new customer accounts?**\
No. These methods require **legacy (classic) customer accounts** because they depend on Multipass. Only **Shop App Login** works with new customer accounts.
**Q: Do I need Shopify Plus for Multipass?**\
Yes. Multipass is a Shopify Plus feature and only works with legacy customer accounts.
***
### Troubleshooting
#### Shop App Login
* **Button not showing** — Check toggle is ON in Settings → Additional Features. Clear cache.
* **"Allow popups" message** — Customer needs to allow popups for your store domain.
* **Login stuck** — Joy checks every 2 seconds (5 min timeout). Ensure Shop app is installed.
#### Email OTP
* **Code not received** — Check spam folder. Wait 60 seconds. Request new code.
* **"Invalid code"** — Codes expire after 5 minutes. Must be exactly 4 digits.
* **Multipass not showing** — Store must have legacy (classic) customer accounts enabled.
#### Google / Facebook
* **Toggle grayed out** — Enable Multipass first.
* **Popup not opening** — Allow popups for your store domain. Try incognito.
* **Not logged in after reload** — Multipass key may be invalid. Re-paste from Shopify Admin.
***
### Security
* 🔒 **Multipass Secret Key** — encrypted at rest
* 🔒 **OTP codes** — hashed before storage, single-use
* 🔒 **Multipass tokens** — single-use, time-limited (15 min max)
* 🔒 **OAuth** — managed server-side by Joy
* 🔒 **HTTPS only** — all data encrypted in transit
***
### Need Help?
* 💬 **Live chat:** Use the chat widget in [Joy Admin](https://apps.shopify.com/joy)
* 📧 **Email:**
* 📖 **More docs:** [help.joy.so](https://help.joy.so)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.joy.so/on-site-content/branding/widget-login.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.