Skip to content

Commit 5c9c2b8

Browse files
committed
chore(docs): update customer account docs
Signed-off-by: Frederik Bußmann <frederik@bussmann.io>
1 parent 660ffde commit 5c9c2b8

2 files changed

Lines changed: 86 additions & 4 deletions

File tree

docs/content/2.essentials/4.customer-account.md

Lines changed: 81 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,94 @@ seo:
1212
The Customer Account API is a public API that allows you to access your Shopify store's customer data,
1313
such as customer profiles, addresses, and order history.
1414
It is designed to be used in client-side applications, such as a Nuxt frontend.
15-
To use the Customer Account API, you need to obtain a client id and optionally a client secret.
15+
To use the Customer Account API, you need to obtain a client id.
16+
Confidential client authentication is currently not supported, so a client secret is not required.
1617

1718
::note
1819
See the [module configuration](/essentials/configuration) to see how to set up the module for the Customer Account API.
1920
If you need help obtaining your client credentials, see the [Shopify Setup Guide](/essentials/setup-shopify).
2021
::
2122

22-
## Usage
23+
## Setup
24+
25+
For the type generation to work correctly, make sure to install the `@shopify/hydrogen` package for the appropriate version of the API
26+
you are using (e.g. `@shopify/hydrogen@2026.4.0` for API version 2026-04).
27+
28+
```bash
29+
npm install @shopify/hydrogen
30+
```
31+
32+
For the customer account authentication flow, also make sure to install the `nuxt-auth-utils` package:
33+
34+
```bash
35+
npm install nuxt-auth-utils
36+
```
37+
38+
Then, once configured, you can use the Customer Account API in your Nuxt application via the `useCustomerAccount`
39+
and `useCustomerAccountData` composables. The `useCustomerAccount` composable is available to both server and client-side.
40+
41+
## Authentication
42+
43+
The module provides built-in routes for the OAuth authentication flow. You do not need to create these routes yourself.
44+
45+
### Logging in
46+
47+
To initiate the login flow, redirect the user to `/_auth/customer-account/callback`:
48+
49+
```vue [~/app/pages/account.vue]
50+
<script setup lang="ts">
51+
function login() {
52+
navigateTo('/_auth/customer-account/callback')
53+
}
54+
</script>
55+
56+
<template>
57+
<button @click="login">Log in</button>
58+
</template>
59+
```
60+
61+
### Logging out
2362

24-
Once configured, you can use the Customer Account API in your Nuxt application via the `useCustomerAccount`
25-
composable. It is available to both server and client-side.
63+
To log the user out, redirect them to `/_auth/customer-account/logout`:
64+
65+
```vue [~/app/pages/account.vue]
66+
<script setup lang="ts">
67+
function logout() {
68+
navigateTo('/_auth/customer-account/logout')
69+
}
70+
</script>
71+
72+
<template>
73+
<button @click="logout">Log out</button>
74+
</template>
75+
```
76+
77+
### Checking login status
78+
79+
The module uses [`nuxt-auth-utils`](https://github.com/atinux/nuxt-auth-utils) under the hood to manage the session.
80+
You can use its composables to check whether a user is currently authenticated:
81+
82+
```vue [~/app/pages/account.vue]
83+
<script setup lang="ts">
84+
const { loggedIn, user } = useUserSession()
85+
</script>
86+
87+
<template>
88+
<div v-if="loggedIn">
89+
<p>Logged in as {{ user?.email }}</p>
90+
</div>
91+
<div v-else>
92+
<button @click="navigateTo('/_auth/customer-account/callback')">
93+
Log in
94+
</button>
95+
</div>
96+
</template>
97+
```
98+
99+
Once the user is authenticated, you can use the `useCustomerAccount` and `useCustomerAccountData` composables
100+
to fetch customer data from the Customer Account API.
101+
102+
## Usage
26103

27104
### Client-side
28105

docs/content/2.essentials/7.caching.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ seo:
1111
If you want to improve the performance of your Nuxt Shopify app, consider using a cache for your Storefront API and Admin API requests.
1212
Caching can help reduce the number of API calls, decrease latency, and improve the overall user experience.
1313

14+
::note
15+
Client side and proxy caching is only available for the Storefront API.
16+
Customer account API and Admin API requests can only be cached on the server side using Nitro's caching utilities.
17+
::
18+
1419
## Configuration
1520

1621
In the `nuxt.config.ts`, you can configure caching options for client side requests and

0 commit comments

Comments
 (0)