|
12 | 12 | The Customer Account API is a public API that allows you to access your Shopify store's customer data, |
13 | 13 | such as customer profiles, addresses, and order history. |
14 | 14 | 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. |
16 | 17 |
|
17 | 18 | ::note |
18 | 19 | See the [module configuration](/essentials/configuration) to see how to set up the module for the Customer Account API. |
19 | 20 | If you need help obtaining your client credentials, see the [Shopify Setup Guide](/essentials/setup-shopify). |
20 | 21 | :: |
21 | 22 |
|
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 |
23 | 62 |
|
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 |
26 | 103 |
|
27 | 104 | ### Client-side |
28 | 105 |
|
|
0 commit comments