From ffc7016d7f5a604b57f573ecd014739588c752c3 Mon Sep 17 00:00:00 2001
From: Michelle Chen <michelle.chen@shopify.com>
Date: Tue, 19 Mar 2024 10:36:35 -0400
Subject: [PATCH] add logout redirect option

---
 packages/hydrogen/src/customer/customer.ts | 34 +++++++++++++++-------
 packages/hydrogen/src/customer/types.ts    | 12 +++++---
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/packages/hydrogen/src/customer/customer.ts b/packages/hydrogen/src/customer/customer.ts
index 84f024b595..bdfb5e9c9c 100644
--- a/packages/hydrogen/src/customer/customer.ts
+++ b/packages/hydrogen/src/customer/customer.ts
@@ -41,6 +41,7 @@ import type {
   CustomerAccount,
   CustomerAPIResponse,
   LoginOptions,
+  LogoutOptions,
 } from './types';
 import {LanguageCode} from '@shopify/hydrogen-react/storefront-api-types';
 
@@ -293,22 +294,33 @@ export function createCustomerAccountClient({
         },
       });
     },
-    logout: async () => {
+    logout: async (options?: LogoutOptions) => {
       ifInvalidCredentialThrowError(customerAccountUrl, customerAccountId);
-      const idToken = session.get(CUSTOMER_ACCOUNT_SESSION_KEY)?.idToken;
 
-      clearSession(session);
+      const logoutUrl = new URL(customerAccountUrl + '/auth/logout');
 
-      return redirect(
-        `${customerAccountUrl}/auth/logout?id_token_hint=${idToken}`,
-        {
-          status: 302,
+      logoutUrl.searchParams.set(
+        'id_token_hint',
+        session.get(CUSTOMER_ACCOUNT_SESSION_KEY)?.idToken,
+      );
 
-          headers: {
-            'Set-Cookie': await session.commit(),
-          },
-        },
+      logoutUrl.searchParams.set(
+        'post_logout_redirect_uri',
+        options?.postLogoutRedirectUri
+          ? options.postLogoutRedirectUri.startsWith('/')
+            ? origin + options?.postLogoutRedirectUri
+            : options.postLogoutRedirectUri
+          : origin,
       );
+
+      clearSession(session);
+
+      return redirect(logoutUrl.toString(), {
+        status: 302,
+        headers: {
+          'Set-Cookie': await session.commit(),
+        },
+      });
     },
     isLoggedIn,
     handleAuthStatus,
diff --git a/packages/hydrogen/src/customer/types.ts b/packages/hydrogen/src/customer/types.ts
index 0714180eb6..920387139d 100644
--- a/packages/hydrogen/src/customer/types.ts
+++ b/packages/hydrogen/src/customer/types.ts
@@ -50,6 +50,10 @@ export type LoginOptions = {
   uiLocales?: LanguageCode;
 };
 
+export type LogoutOptions = {
+  postLogoutRedirectUri?: string;
+};
+
 export type CustomerAccount = {
   /** Start the OAuth login flow. This function should be called and returned from a Remix action.
    * It redirects the customer to a Shopify login domain. It also defined the final path the customer
@@ -72,7 +76,7 @@ export type CustomerAccount = {
   /** Creates the fully-qualified URL to your store's GraphQL endpoint.*/
   getApiUrl: () => string;
   /** Logout the customer by clearing the session and redirecting to the login domain. It should be called and returned from a Remix action. The path app should redirect to after logout can be setup in Customer Account API settings in admin.*/
-  logout: () => Promise<Response>;
+  logout: (options?: LogoutOptions) => Promise<Response>;
   /** Execute a GraphQL query against the Customer Account API. This method execute `handleAuthStatus()` ahead of query. */
   query: <
     OverrideReturnType extends any = never,
@@ -144,7 +148,7 @@ export type CustomerAccountForDocs = {
    * `en`, `fr`, `cs`, `da`, `de`, `es`, `fi`, `it`, `ja`, `ko`, `nb`, `nl`, `pl`, `pt-BR`, `pt-PT`,
    * `sv`, `th`, `tr`, `vi`, `zh-CN`, `zh-TW`. If supplied any other language code, it will default to `en`.
    * */
-  login: (options?: LoginOptions) => Promise<Response>;
+  login?: (options?: LoginOptions) => Promise<Response>;
   /** On successful login, the customer redirects back to your app. This function validates the OAuth response and exchanges the authorization code for an access token and refresh token. It also persists the tokens on your session. This function should be called and returned from the Remix loader configured as the redirect URI within the Customer Account API settings in admin. */
   authorize?: () => Promise<Response>;
   /** Returns if the customer is logged in. It also checks if the access token is expired and refreshes it if needed. */
@@ -154,9 +158,9 @@ export type CustomerAccountForDocs = {
   /** Returns CustomerAccessToken if the customer is logged in. It also run a expiry check and does a token refresh if needed. */
   getAccessToken?: () => Promise<string | undefined>;
   /** Creates the fully-qualified URL to your store's GraphQL endpoint.*/
-  getApiUrl: () => string;
+  getApiUrl?: () => string;
   /** Logout the customer by clearing the session and redirecting to the login domain. It should be called and returned from a Remix action. The path app should redirect to after logout can be setup in Customer Account API settings in admin.*/
-  logout?: () => Promise<Response>;
+  logout?: (options?: LogoutOptions) => Promise<Response>;
   /** Execute a GraphQL query against the Customer Account API. This method execute `handleAuthStatus()` ahead of query. */
   query?: <TData = any>(
     query: string,