Hydrogen Multipass

Overview

This article provides a guide on how to implement the Hydrogen Demo Store + Multipass Google Sign in and checkout persistence for Shopify. It includes instructions on how to persist the user session between Hydrogen and the checkout process, as well as how to enable external user authentication through Google Sign in. Please note that this implementation is not official and should be used at your own risk.

Features

• Checkout login persistence: Demonstrates how to persist the user session between Hydrogen and the checkout.
• External user authentication via Google Sign in: Allows users to login using their Google accounts and integrates with Shopify multipass.

Installation

To install the Hydrogen Demo Store + Multipass Google Sign in and checkout persistence, follow these steps:

1. Add the necessary environment variables.
2. Add the MultipassCheckoutButton component 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.
7. For external user authentication via Google Sign in, add the necessary environment variables.
8. Add the GoogleSingInButton component to app/components/GoogleLoginButton.tsx.
9. Add the multipass.tsx helper to /lib/multipass/multipass.tsx.
10. Add the Multipassify class to /lib/multipass/multipassify.server.tsx.
11. Add the multipass token generation route to app/routes/($lang)/account/__public/login.multipass.tsx.
12. Add the multipass token validation route to app/routes/(%24lang)/account/__public/login.multipass.%24token.tsx.
13. Implement the <GoogleSignIn /> in the Google sign in login route (or /app/routes/account/login) in app/components/Cart.tsx.

Summary

This article provides instructions on how to implement the Hydrogen Demo Store + Multipass Google Sign in and checkout persistence for Shopify. It demonstrates how to persist the user session between Hydrogen and the checkout process, as well as how to enable external user authentication via Google Sign in.