Create an OAuth App

Wix Headless uses OAuth 2.0 for authorization and authentication of visitors and members. The OAuth protocol allows visitors or members to grant an external app or site (a "client") access to their data on a Wix project, without the them needing to provide the client with their login credentials for the Wix project itself.

The OAuth process works by Wix generating tokens which are used to identify a visitor or member when making API calls. In the case of a visitor, tokens can be generated and stored in a site or app without any action from the visitor. In the case of a member, the member needs to authenticate with Wix so Wix can generate tokens for the specific member.

You can have your members login by:

• Wix-managed login: Redirect your users to a Wix-managed login page. After authenticating, Wix redirects the member back to your site or app.
• Custom login page: Use API calls to create your own custom login page with Wix-managed authentication.
• Externally-managed login: Create your own custom login page that supports login and authentication with an external identity provider.

To ensure security, each client app or site must also be authorized in advance using the project's dashboard. This is done by creating an OAuth app with an associated Client ID. A client needs this ID, along with access tokens, in order to make API calls to access data from a project.

Add an OAuth app to your project

Create an OAuth app for each client that you will use to interact with your project. For example, if you're creating a site and a mobile app, create two OAuth apps, one for the site and the other for the mobile app.

To create an OAuth app:

1. In your project dashboard, go to Settings > Headless Settings.

2. In the Headless clients section, click Create New Client to create an OAuth app for your client.

   

3. Enter a name for the OAuth app in the Client name field. Choose a name that identifies the client clearly. For example, if the client is a fitness-related smartwatch app, you can name the OAuth app "Smartwatch Gym Client App".

   Once you enter a name, select the client type and click Create & Continue.

   

4. Select the stack you're using to call Wix APIs.

   

   Once you select the stack, the modal expands to display code snippets for 5 apps built by Wix. Each code snippet is customized for the stack that you choose. You can copy these snippets to help you get started working with Wix APIs.

   

   Once you choose your stack and copy any snippets you need, click Continue.

5. Click View Your Setup to close the modal and view the Headless Settings page. Optionally, you can test out API calls using one of the two options displayed:

   • Test API calls in the JavaScript playground: Clicking Open Playground opens a new modal that lets you select different APIs and methods, and test out calls to them using the client ID you just created.
   • See an example site in CodeSandbox: Clicking Go to Sandbox opens a new tab with a CodeSandbox project. The project contains complete code that makes calls to various APIs like eCommerce and Bookings. You can copy code straight from the example, or fork the project to start editing and testing your own code.

   

6. In the Headless clients section, your new OAuth app now appears with the client ID.

   

   Copy the Client ID and use it to connect and authenticate with your Wix project from a client. You can also retrieve the client ID later by returning to the Headless Settings page.

7. Many external client sites redirect visitors to Wix-managed pages for processes such as authentication and checkout. Wix then returns the visitor to the external site. To protect data security, Wix only ever redirects visitors to site addresses you approve in the URLs section. Therefore, if you want your external site to redirect to Wix-managed pages, you need to provide approval for the following URLs:

   • Allow Redirect Domains: Domains that Wix can redirect visitors to from Wix-managed pages.
   • Login URL: URL of your custom login interface, if you will develop one.
   • Allow Authorization Redirect URIs: URIs that Wix can redirect members back to after they complete the authorization process.