add logout redirect option

Shopify · Mar 19, 2024 · ffc7016 · ffc7016
1 parent 5ea3c2b
commit ffc7016
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git 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
@@ -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,