This is NOT an official Shopify implementation, use at your own risk

---

Hydrogen Demo Store + Multipass Google Sign in and checkout persistence

At the time of writing multipass is available for Shopify Plus customers only.

1. Checkout login persistence

Demonstrates how to persist the user session between Hydrogen and the checkout.

Implementation

1. Add env variables
2. Add the MulitpassCheckoutButton to /app/components/MultipassCheckoutButton.tsx
3. Add the multipass.tsx helper to /lib/multipass/multipass.tsx
4. Add the Multipassify class to /lib/multipass/multipassify.server.tsx
5. Add the multipass token generation route to app/routes/($lang)/account/__public/login.multipass.tsx
6. Implement the <MulitpassCheckoutButton /> in the <Cart /> component at app/components/Cart.tsx

Checkout flow

1. Login via /account/login
2. Add any product to the cart
3. Click checkout. The MultipassCheckoutButton runs the multipass helper
4. The multipass helper makes a POST request to the multipass route /account/login/multipass to generate a token for the current customer and the target url in this case cart.checkoutUrl
5. With the token, the multipass helper then redirects to the ${PRIVATE_SHOPIFY_CHECKOUT_DOMAIN}/account/login/multipass/token for token authentication. If successful, the user is authenticated and redirected to the checkoutUrl otherwise the user is still redirected but it is not authenticated.

2. External user authentication via Google sign in

The /account/login-google route demonstrates loginng with a 3rd-Party auth provider (Google Sign in) and Shopify multipass.

Implementation

1. Add env variables
2. Add the GoogleSingInButton to app/components/GoogleLoginButton.tsx
3. Add the multipass.tsx helper to /lib/multipass/multipass.tsx
4. Add the Multipassify class to /lib/multipass/multipassify.server.tsx
5. Add the multipass token generation route to app/routes/($lang)/account/__public/login.multipass.tsx
6. Add the multipass token validation route to app/routes/(%24lang)/account/__public/login.multipass.%24token.tsx
7. Implement the <GoogleSignIn /> in the google sign in login route (or /app/routes/account/login) app/components/Cart.tsx

Login flow:

1. Login via /account/login-google/
2. The triggers the google auth flow
3. Using the return google user data we trigger the multipass helper to automatically create (if the customer does not exist in Shopify) or login (if it exists) via multipass
4. The multipass helper makes a POST request to the route /account/login/multipass to generate a token for the current customer and the target url in this case /account
5. The helper redirects to the local multipass validator /account/login/multipass/token which persists the user session upon successful validation and redirects to the target url /account.

Required env vars

PRIVATE_SHOPIFY_STORE_MULTIPASS_SECRET=64 chars (Shopify Plus only)
PUBLIC_STORE_DOMAIN=your-store.myshopify.com
PRIVATE_SHOPIFY_CHECKOUT_DOMAIN=checkout.your-store.com (e.g if configured, otherwise repeat your-store.myshopify.com)
PUBLIC_GOOGLE_CLIENT_ID=xyz123.apps.googleusercontent.com

Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with Remix, Shopify’s full stack web framework. This template contains a full-featured setup of components, queries and tooling to get started with Hydrogen.

Check out Hydrogen docs Get familiar with Remix

What's included

• Remix
• Hydrogen
• Oxygen
• Shopify CLI
• ESLint
• Prettier
• GraphQL generator
• TypeScript and JavaScript flavors
• Tailwind CSS (via PostCSS)
• Full-featured setup of components and routes

Getting started

Requirements:

• Node.js version 16.14.0 or higher

npm create @shopify/hydrogen@latest --template demo-store

Remember to update .env with your shop's domain and Storefront API token!

Building for production

npm run build

Local development

npm run dev