docs: update storefront development guides to use JS SDK [2] (#12015)

www/apps/resources/app/storefront-development/customers/retrieve/page.mdx

@@ -13,63 +13,68 @@ export const metadata = {
 
 # {metadata.title}
 
-To retrieve a customer after it's been authenticated in your storefront, send a request to the [Get Customer API route](!api!/store#customers_getcustomersme):
+In this guide, you'll learn how to retrieve a customer after they've been authenticated in your storefront.
 
-<CodeTabs group="authenticated-request">
-  <CodeTab label="Using Bearer Token" value="bearer">
+## Prerequisites: Set the Customer's Authentication Token
 
-export const bearerHighlights = [
-  ["7", "", "Pass JWT token as bearer token in authorization header."],
-]
+When using the [JS SDK](../../../js-sdk/page.mdx), make sure that you've set the customer's authentication token using the `setToken` function:
 
-  ```ts highlights={bearerHighlights}
-  fetch(
-    `http://localhost:9000/store/customers/me`,
-    {
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        "Authorization": `Bearer ${token}`,
-        "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
-      },
-    }
-  )
-  .then((res) => res.json())
-  .then(({ customer }) => {
-    // use customer...
-    console.log(customer)
-  })
-  ```
+```ts
+sdk.client.setToken(token)
+```
 
-  </CodeTab>
-  <CodeTab label="Using Cookie Session" value="session">
+You can learn more in the [Login Customer](../login/page.mdx) and [Third-Party Login](../third-party-login/page.mdx) guides.
 
-export const sessionHighlights = [
-  ["4", "", "Pass this option to ensure the cookie session is passed in the request."],
-]
+---
 
-  ```ts highlights={sessionHighlights}
-  fetch(
-    `http://localhost:9000/store/customers/me`,
-    {
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
-      },
-    }
-  )
-  .then((res) => res.json())
-  .then(({ customer }) => {
-    // use customer...
-    console.log(customer)
-  })
-  ```
+## Retrieve Logged-In Customer
 
-  </CodeTab>
-</CodeTabs>
+To retrieve the logged-in customer, send a request to the [Get Customer API route](!api!/store#customers_getcustomersme):
+
+```ts
+sdk.store.customer.retrieve()
+.then(({ customer }) => {
+  // use customer...
+  console.log(customer)
+})
+```
+
+This will retrieve the authenticated customer's details. The [Get Customer API route](!api!/store#customers_getcustomersme) returns a `customer` field, which is a [customer object](!api!/store#customers_customer_schema).
+
+Notice that the JS SDK automatically passes the necessary authentication headers or cookies based on your authentication configurations, as explained in the [Login Customer](../login/page.mdx) guide.
+
+If you're not using the JS SDK, you need to pass the authentication token in the request headers or cookies accordingly:
 
 - If you authenticate the customer with bearer authorization, pass the token in the authorization header of the request.
 - If you authenticate the customer with cookie session, pass the `credentials: include` option to the `fetch` function.
 
-The Get Customer API route returns a `customer` field, which is a [customer object](!api!/store#customers_customer_schema).
+---
+
+## Restrict Access to Authenticated Customers
+
+In your storefront, it's common to restrict access to certain pages to authenticated customers only.
+
+For example, you may want to restrict access to the customer's profile page to authenticated customers only.
+
+To do this, you can try to retrieve the customer's details. If the request fails, you can redirect the customer to the login page.
+
+For example:
+
+```ts
+sdk.store.customer.retrieve()
+.then(({ customer }) => {
+  // use customer...
+  console.log(customer)
+})
+.catch(() => {
+  // redirect to login page
+})
+```
+
+The `catch` block will only execute if the request fails, which means that the customer is not authenticated. You can add the redirect logic to the `catch` block based on your storefront framework.
+
+<Note title="Tip">
+
+If you're building a React storefront, you can use the `useCustomer` hook defined in the [Customer Context guide](../context/page.mdx) to check if the customer is set. If not, you can redirect the customer to the login page.
+
+</Note>