Implementing “Sign in with Google” in a headless Shopify storefront (React, Next.js, Hydrogen, etc.) is much easier with the Shopify SSO app. It manages the OAuth 2.0 flow, token exchange, and integration with the Customer Account API or Multipass for Shopify Plus.
Here’s the step-by-step process:
1. Set up Google OAuth in Google Cloud Console
- Go to Google Cloud Console and create a new project.
- Under APIs & Services, then Credentials, create OAuth 2.0 Client IDs for a web application.
- Add your Hydrogen/React/Next.js app’s URL as an authorized JavaScript origin and the callback URL generated by the Shopify SSO app as an authorized redirect URI.
- Save the Client ID and Client Secret for later.
2. Configure the Shopify SSO app
- Install the Shopify SSO app from the Shopify App Store.
- In the app dashboard, select the supported protocol and then select Google as a provider.
- Enter the Client ID and Client Secret from Google Cloud Console.
- The app will handle redirect URI mapping automatically to match your Google OAuth settings.
3. Enable Headless & Shopify Plus Support
- If you’re on Shopify Plus, enable Multipass in Shopify Admin and in the Shopify SSO app to generate secure Multipass tokens after Google sign-in.
- If you’re not on Plus, enable Customer Account API mode in the Shopify SSO app to authenticate customers in your headless setup.
4. Frontend Implementation (React / Next.js / Hydrogen)
- Add a “Sign in with Google” button to your storefront UI.
- Instead of building the OAuth flow manually with a library like react-oauth/google, point the button’s click action to the Shopify SSO app’s Google login endpoint.
- When clicked, the user will be redirected to Google for authentication and then back to the SSO app for token processing.
5. Account Creation or Mapping
- If the user is new, the Shopify SSO app creates a Shopify customer account using the Admin API.
- If they already exist, the account is mapped automatically based on their Google email address.
6. Storing Authentication State in the Frontend
- Store the customerAccessToken securely, using local storage, cookies, or secure state management, to keep the user logged in.
- Use this token for all subsequent Customer Account API or Storefront API requests.
Why use Shopify SSO for this
- Implement OAuth 2.0 flows
- Verify Google tokens
- Integrate with Multipass or Customer Account API
- Handle account creation in Shopify
- Securely store tokens
The Shopify SSO app automates all of this for both standard and Shopify Plus stores, supports IdP integrations, and ensures GDPR/PCI-compliant secure handling of sensitive data.
For further assistance, please feel free to contact our support team.
