# 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:

<table><thead><tr><th>Method</th><th width="141.578125">New customer accounts</th><th width="170.4765625">Shopify plus &#x26; Legacy customer accounts</th><th>Merchant Setup</th></tr></thead><tbody><tr><td><strong>Sign in with Shop App</strong></td><td>✅</td><td>✅</td><td>Toggle only</td></tr><tr><td><strong>Email OTP</strong></td><td>❌</td><td>✅</td><td>Paste Multipass key</td></tr><tr><td><strong>Sign in with Google</strong></td><td>❌</td><td>✅</td><td>Toggle only</td></tr><tr><td><strong>Sign in with Facebook</strong></td><td>❌</td><td>✅</td><td>Toggle only</td></tr></tbody></table>

{% 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="<https://youtu.be/OlPg2aYLRC0>" %}

#### 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="<https://youtu.be/1zW0dBSkCoE>" %}

#### 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:** <hi@joy.so>
* 📖 **More docs:** [help.joy.so](https://help.joy.so)