Create a Client with OAuth

 

New Release
Wix Headless is ready for your feedback! Please feel free to reach out to us with any comments, suggestions, or concerns. Join the Wix Headless Discord community to discuss features, ask questions, and share ideas with our growing community of developers.
 

After you create an OAuth app for your client site or app in your project dashboard, you can begin coding by installing the Wix JavaScript SDK, importing modules in your code, and creating an API client.

Prerequisites

Note: Before you start, make sure you are using Node.js version 18 or higher.

Install packages

Install @wix/api-client and the packages for the domain-specific APIs you wish to work with. Domain-specific packages follow the naming convention @wix/{domain}. For example:

Copy
1
npm install @wix/api-client
2
npm install @wix/bookings
3
npm install @wix/stores

or

Copy
1
yarn add @wix/api-client
2
yarn add @wix/bookings
3
yarn add @wix/stores

Import modules in your code

To use the APIs you have installed, import wixApiClient from the @wix/api-client package, and import the desired domain-specific packages you installed. For example:

Copy
1
import wixApiClient from '@wix/api-client';
2
import bookings from '@wix/bookings';
3
import stores from '@wix/stores';

Note that for all modules you can import either the generic default export (as above) or specific named exports:

Copy
1
import { createClient, OAuthStrategy } from '@wix/api-client';
2
import { availabilityCalendar, services } from '@wix/bookings';
3
import { products } from '@wix/stores';

Make sure to import both createClient and OAuthStrategy from @wix/api-client.

Create a client

To get started connecting to a Wix project, use the createClient() function imported from the @wix/api-client package to create a new client.

For example:

Copy
1
const myWixClient = createClient({
2
modules: {
3
products,
4
services
5
},
6
auth: OAuthStrategy({
7
clientId: '<YOUR_CLIENT_ID>',
8
tokens: {
9
accessToken: {
10
value: '<ACCESS_TOKEN_VALUE>',
11
expiresAt: <ACCESS_TOKEN_EXPIRY_DATE>
12
13
},
14
refreshToken: {
15
value: '<REFRESH_TOKEN_VALUE>'
16
}
17
}
18
})
19
})

Pass the modules you want to use and authorization information when creating the client.

  • The modules property contains key:value pairs. Each value is an imported module you wish to enable in the client, and the key defines the name to use for working with that module.
  • The auth property contains the authentication method and credentials for connecting with your Wix project. To use the OAuth authentication strategy, call OAuthStrategy() with an object containing:
    • clientId: You OAuth app client ID. You can retrieve it from the Headless Settings menu in the dashboard. If you haven't created an OAuth app yet, see Create an OAuth App to set one up.
    • tokens: Optional. An object containing access and refresh tokens for a site visitor or member. If you pass tokens, every call made by the client uses these tokens to maintain a persistent session.

Call APIs with a client

After creating a client, you can use it to call APIs.

For example:

Copy
1
const { items } = await myWixClient.products.queryProducts().find();

Work with visitor or member sessions

Often, you will need to maintain a persistent session to work with site or app visitors and members. Sessions are maintained using tokens. Most of the token management is handled by the client object, but there is some work you need to do, which differs depending on your situation.

Was this helpful?
Yes
No