Get to know our frameworks

Select an app template built on your preferred framework.

Build apps on our native app editor. Use drag and drop elements, Velo code and Wix APIs to develop custom features.

Streamline your app development process with the Wix CLI. Get a familiar developer experience with minimal setup and configuration.

Take full control over your app's tech stack, deployment, and hosting.

App templates

Wix Blocks templates

Wix CLI templates

Self-hosted templates

Kickstart your app development with templates built on your preferred Wix developer tool. Browse templates for practical foundation and get to know the Wix ecosystem.

Wix App Templates for Developers

This example apps can be used as a starting point for building your own app, for concrete examples of how to use Wix framework, or for inspiration.

Choose a template.<0 />Build an app.

Browse by:

How to build it step by step:

This template is built with:

Read how this template was built, step by step.

How we built this template

Deployment instructions:

Choose a package manager and run the command in your terminal.

Copy command

Before you get started, make sure you have the following:

Prerequisite steps

Get started with Wix CLI

Begin by setting up your Next.js project with your preferred hosting platform.

Select your hosting service

Start the deployment flow and set up your template repo on Netlify. After you finish set up, come back here and add your Netlify custom domain.

Copy the code from our Git repo to deploy your app on any platform that supports Next.js.

Start the deployment flow and set up your template repo on Vercel. After you finish set up, come back here and add your Vercel generated URL.

Add the base URL and give your app a name.

App details

Go to the app dashboard and test your app to ensure a smooth integration within the Wix ecosystem. <0>Learn more about app checks and testing</0>

Define your environment

Terminal

Related templates

Note

Warning

Your app name will be used as the namespace suffix.

Name your app to generate a namespace. This lets you refer to your app in code later on.

Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

oAuthApp

OAuthApp

Creates a new OAuth app for a Wix Headless client.


An OAuth app authorizes an external client app or site, on any platform, to authenticate with a Wix site or project and manage its data.

> **Note:** The OAuth app secret is returned only when creating the OAuth app, and can't be retrieved later. Store the secret in a secure location.

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { oAuthApps } from '@wix/auth-management';

const wixClient = createClient({
  modules: { oAuthApps },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function createOAuthApp(oAuthApp) {
  const response = await wixClient.oAuthApps.createOAuthApp(oAuthApp);
}

createOAuthApp() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { oAuthApps } from '@wix/auth-management';

const wixClient = createClient({
  modules: { oAuthApps },
  auth: dashboard.auth(),
  host: dashboard.host()
  })
});

async function createOAuthApp(oAuthApp) {
  const response = await wixClient.oAuthApps.createOAuthApp(oAuthApp);
}

createOAuthApp() with Dashboard app access

createOAuthApp

oAuthAppId

string

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { oAuthApps } from '@wix/auth-management';

const wixClient = createClient({
  modules: { oAuthApps },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function getOAuthApp(oAuthAppId) {
  const response = await wixClient.oAuthApps.getOAuthApp(oAuthAppId);
}

getOAuthApp() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { oAuthApps } from '@wix/auth-management';

const wixClient = createClient({
  modules: { oAuthApps },
  auth: dashboard.auth(),
  host: dashboard.host()
  })
});

async function getOAuthApp(oAuthAppId) {
  const response = await wixClient.oAuthApps.getOAuthApp(oAuthAppId);
}

getOAuthApp() with Dashboard app access

getOAuthApp

Retrieves a list of OAuth apps, given the provided paging, filtering, and sorting.


Query OAuth Apps runs with these defaults, which you can override:
+ Results are sorted by `id` in descending order.
+ `paging.offset` is `0`.


|PROPERTY	|SUPPORTED FILTERS & SORTING	
|:---:|:---:|
|`_id`|[`eq()`](/o-auth-apps/o-auth-apps-query-builder/eq)|
|`_createdDate`|[`ascending()`](/o-auth-apps/o-auth-apps-query-builder/ascending),[`descending()`](/o-auth-apps/o-auth-apps-query-builder/descending)|
|`name`|[`ascending()`](/o-auth-apps/o-auth-apps-query-builder/ascending),[`descending()`](/o-auth-apps/o-auth-apps-query-builder/descending)|

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { oAuthApps } from '@wix/auth-management';

const wixClient = createClient({
  modules: { oAuthApps },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function queryOAuthApps() {
  const { items } = await wixClient.oAuthApps.queryOAuthApps().find();
}

queryOAuthApps() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { oAuthApps } from '@wix/auth-management';

const wixClient = createClient({
  modules: { oAuthApps },
  auth: dashboard.auth(),
  host: dashboard.host()
  })
});

async function queryOAuthApps() {
  const { items } = await wixClient.oAuthApps.queryOAuthApps().find();
}

queryOAuthApps() with Dashboard app access

queryOAuthApps

OAuthAppsQueryBuilder

UpdateOAuthApp

Updates an OAuth app.


Only fields provided in `mask` are updated.

You can update the following fields:
+ `name`
+ `description`
+ `allowedDomain`
+ `loginUrl`
+ `logoutUrl`

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { oAuthApps } from '@wix/auth-management';

const wixClient = createClient({
  modules: { oAuthApps },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function updateOAuthApp(id, oAuthApp, mask) {
  const response = await wixClient.oAuthApps.updateOAuthApp(id, oAuthApp, mask);
}

updateOAuthApp() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { oAuthApps } from '@wix/auth-management';

const wixClient = createClient({
  modules: { oAuthApps },
  auth: dashboard.auth(),
  host: dashboard.host()
  })
});

async function updateOAuthApp(id, oAuthApp, mask) {
  const response = await wixClient.oAuthApps.updateOAuthApp(id, oAuthApp, mask);
}

updateOAuthApp() with Dashboard app access

updateOAuthApp

---
title: Introduction
---

# About the OAuth Apps API

The OAuth Apps API enables you to manage OAuth apps for a [Wix Headless](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/api/sdk/about-wix-headless/overview) project or site. An OAuth app authorizes an external client app or site, on any platform, to authenticate with a Wix site or project and manage its data using the [Wix JavaScript SDK](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/api/sdk/introduction/about-the-wix-javascript-sdk).

With the OAuth Apps API, you can:

+ Create a new OAuth app to enable an external client to access a Wix project or site.
+ Query and retrieve information about existing OAuth apps.
+ Update details of an existing OAuth app.
+ Delete an OAuth app.

To use Wix Headless functionality you need to create an OAuth app, either using the OAuth Apps API or in the project or site's [dashboard](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings). For instructions on how to do this, see how to [Set Up Authorization](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/api/sdk/sdk-setup:-wix-headless/authorization) for Wix Headless.

Once you have created an OAuth app, learn how to [Set Up the Wix JavaScript SDK for Wix Headless](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/api/sdk/sdk-setup:-wix-headless/set-up-the-wix-sdk).

## Before you begin

It's important to note the following points before starting to code:

+ Each external client should authenticate using its own OAuth app.
+ You can only generate a secret once for each OAuth app, and the secret can't be retrieved later. Store the secret securely.
+ After you delete an OAuth app, an external client can no longer make API calls by authenticating with its client ID.

## Use cases

+ Connect a custom template on any platform to an existing Wix project.
+ Change allowed redirect domains for an external client app or site.
+ Prevent an existing client app or site from connecting to a Wix project.

## Terminology

+ **OAuth app:** An intermediary application that authorizes and authenticates an external client to access data on a Wix project or site.
+ **Project:** A Wix business backend incorporating Wix business solutions, but which doesn't necessarily have a Wix site frontend.
+ **Client:** An external app or site, built on any platform, which accesses or manages data on a Wix project or site using Wix APIs.
+ **Client ID:** A unique ID that an external client uses to authenticate for making API calls.
+ **Client secret:** A unique credential that an external client uses to authenticate for admin access to a Wix project or site.


To use the OAuthApps API, install the `@wix/auth-management` package using npm or Yarn:
  ```console
npm install @wix/auth-management
```

or

```console
yarn add @wix/auth-management
```

Then import `{ oAuthApps }` from `@wix/auth-management`:

```js
import { oAuthApps } from '@wix/auth-management'
```
  

OAuthAppsQueryResult

auth-management_o-auth-apps

Date and time the OAuth app was created, in ISO 8601 format.

_createdDate

Whether a secret can be generated for this OAuth app.

Default: `true` until a secret has been generated for the OAuth App.

allowSecretGeneration

boolean

List of domains to which redirection from Wix is allowed after processes other than authentication.

When a client redirects a user to a Wix page (for example, for checkout), the client provides a URL to redirect the user back to.
Wix only redirects the user if the URL is in one of the specified domains.

allowedRedirectDomains

List of URIs to which redirection from Wix is allowed after authentication.

When a client redirects a user to Wix for authentication, the client provides a URI to redirect the user back to after the user has been authenticated.
Wix only redirects the user if the exact URI is contained in this array.

allowedRedirectUris

Description of the OAuth app, as it appears in the dashboard.

description

External login URL to which users are redirected automatically to authenticate. If no login URL is specified, the user is redirected to Wix to authenticate.

loginUrl

External logout URL to which we invoke when user logout at wix. If no logout URL is specified, the user is logged out only at Wix.

logoutUrl

Display name of the OAuth app, as it appears in the dashboard.

name

secret

Adds a sort to a query, sorting by the specified properties in ascending order.

The `ascending()` function refines a `OAuthAppsQueryBuilder` to sort by the value of `propertyName` in ascending order.
You can specify multiple properties for sorting in ascending order by passing each property name as an additional argument. `ascending()` sorts the results in the order the properties are passed.
You can sort the following types:
- Number: Sorts numerically.
- Date: Sorts by date and time.
- String: Sorts lexicographically, so `'abc'` comes after `'XYZ'`.
If a property contains a number stored as a string (for example, `'0'`), that value is sorted alphabetically and not numerically. If a property doesn't have a value, that value is ranked lowest.

ascending

Adds a sort to a query, sorting by the specified properties in descending order.

The `descending()` function refines a `OAuthAppsQueryBuilder` to sort by the value of `propertyName` in descending order.
You can specify multiple properties for sorting in descending order by passing each property name as an additional argument. `descending()` sorts the results in the order the properties are passed.
You can sort the following types:
- Number: Sorts numerically.
- Date: Sorts by date and time.
- String: Sorts lexicographically, so `'abc'` comes after `'XYZ'`.
If a property contains a number stored as a string (for example, `'0'`), that value is sorted alphabetically and not numerically. If a property doesn't have a value, that value is ranked lowest.

descending

Refines a query to match items where the specified property equals the specified value.

The `eq()` function refines a `OAuthAppsQueryBuilder` to match only items where the value of the specified `propertyName` equals the specified `value`.
`eq()` matches only values of the same type. For example, `0` stored as a number doesn't match `'0'` stored as a string.
Matching strings with `eq()` is case-sensitive, so `'text'` isn't equal to `'Text'`.

Returns the query results.

The `find()` function returns a Promise that resolves to the query results and metadata.
The Promise is rejected if `find()` is called with insufficient permissions or if any of the previous functions used to refine the query are invalid.

find

Limits the number of items the query returns.

The `limit()` function defines the number of results a query returns in each page. Only one page of results is retrieved at a time.
You can use the `next()` and `prev()` functions to navigate the pages of a query result.

limit

Sets the number of items to skip before returning query results.

The `skip()` function defines the number of results to skip before returning new query results.
For example, if you query a collection and 50 items match your query, but you set `skip()` to `10`, the first 10 items that match are ignored, and the 11th through 50th items are returned.

skip

Indicates whether the query has more results.

You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `oAuthApps` to navigate the pages of a query result.

hasNext

Indicates whether the query has previous results.

You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `oAuthApps` to navigate the pages of a query result.

hasPrev

Retrieves the next page of query results.

The `next()` function retrieves the next page of query results.
The page size is defined by the [`limit()`](auth-management.OAuthApps.OAuthAppsQueryBuilder#limit) function and can be retrieved using the [`pageSize`](#pagesize) property. You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `oAuthApps` to navigate the pages of a query result.
If items are added or removed between calls to `next()`, the values returned by `OAuthAppsQueryBuilder` may change.

Retrieves the previous page of query results.

The `prev()` function retrieves the previous page of query results.
The page size is defined by the [`limit()`](auth-management.OAuthApps.OAuthAppsQueryBuilder#limit) function and can be retrieved using the [`pageSize`](#pagesize) property. You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `oAuthApps` to navigate the pages of a query result.
If items are added or removed between calls to `prev()`, the values returned may change.

currentPage

number

Returns an array of `oAuthApps` items that match the query.

`items` contains the current page of results retrieved by the query.
If no results match the query, `items` is an empty array.
The page size is defined by the [`limit()`](auth-management.OAuthApps.OAuthAppsQueryBuilder#limit) function and can be retrieved using the [`pageSize`](#pagesize) property. You can use the [`next()`](#next) and [`prev()`](#prev) functions returned by `oAuthApps` to navigate the pages of a query result.

items

length

pageSize

Returns the `OAuthAppsQueryBuilder` object used to get the current results.

Use `query` to create and run a new query by chaining additional `OAuthAppsQueryBuilder` functions to it. You can filter only on properties that haven't already been used in the previous `OAuthAppsQueryBuilder`.

getOAuthApp( )