Go Headless

Build Apps

Client

API Preview

Develop Websites

REST

Velo

GraphQL (Alpha)

# Authenticate on behalf of a Wix User

Your app can authenticate on behalf of a Wix user to access site data and perform actions, combining the permissions of the app and the user. Wix users may have different [user roles](fallback::https://support.wix.com/en/article/roles-permissions-overview), resulting in different permissions granted to your app for each user.

On behalf of user authentication is supported for [dashboard pages](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-pages/about-dashboard-page-extensions), which facilitate user site and business management. It allows your app to recognize requests aligned with the permissions of the Wix user within the dashboard.

This article explains how to authenticate on behalf of a Wix user using the [Javascript SDK](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk/introduction) as well as the [React SDK](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk-react/introduction). The SDK manages the OAuth process for you behind the scenes. This functionality isn't currently supported using the REST API.

<blockquote class="important">

__Important:__ This authentication strategy is currently only supported for [dashboard pages](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-pages/about-dashboard-page-extensions).

</blockquote>

## Javascript SDK

To authenticate your app on behalf of a Wix user using the JavaScript SDK:

1. Install the [SDK](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk/introduction):

    ```bash
    npm install @wix/sdk
    ```

   The SDK module is used to communicate with the Wix platform from JavaScript code by providing a client for making authenticated calls to Wix APIs.

1. Install the [Dashboard SDK](fallback::https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction):

    ```bash
    npm install @wix/dashboard
    ```
	
    The Dashboard SDK allows code in custom dashboard components to interact with the Wix dashboard. This includes features like navigating users, displaying modals, and sending alerts and updates. 
    
1. Create a [`WixClient`](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk/wix-client) instance with the dashboard host and authentication strategy:

    ```javascript
    import { createClient } from '@wix/sdk';
    import { dashboard } from '@wix/dashboard';
    
    const myClient = createClient({
      host: dashboard.host(),
      auth: dashboard.auth(),
      modules: {
        dashboard,
      },
    });
    ```

    The dashboard authentication strategy considers the Wix user in context, providing an app access token with combined app and user permissions.

1. Make an API request. Behind the scenes, the client makes a request to obtain an access token and incorporates it into the `Authorization` request header. For example:

    ```javascript
    import { products } from '@wix/stores';
    
    const { items } = await myClient.products.queryProducts()
      .startsWith('name', 'shoes')
      .limit(4)
      .find();
    ```

    <blockquote class="tip">

    __Tip:__ If a REST API isn't available in the SDK, you can still access it using the [`fetch()`](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk/wix-client#fetch) method.
    
    </blockquote>

## React SDK

To authenticate your app on behalf of a Wix user using the React SDK:

1. Install the [React SDK](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk-react/introduction):

    ```bash
    npm install @wix/sdk-react
    ```

    The React SDK enables the integration of Wix JavaScript SDK APIs within React components.

1. Install the [Dashboard React SDK](fallback::https://dev.wix.com/docs/sdk/host-modules/dashboard-react/introduction):

    ```bash
    npm install @wix/dashboard-react
    ```
	
    The Dashboard React SDK is a collection of React utilites, components, and hooks that you can use to build Wix dashboard extensions with React.

1. Wrap your code with the [`withDashboard()`](fallback::https://dev.wix.com/docs/sdk/host-modules/dashboard-react/with-dashboard) higher-order component:

    ```javascript
    import { withDashboard } from '@wix/dashboard-react';
    
    export default withDashboard(() => {
      return <div>Hello World</div>
    });
    ```

    When you wrap a component with `withDashboard()`, a [`WixProvider`](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk-react/wix-provider) component is initialized with the dashboard host and authentication strategy. This allows you to use [`useWixModules()`](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk-react/use-wix-modules) to call JavaScript SDK APIs.
    
    The dashboard authentication strategy considers the Wix user in context, providing an app access token with combined app and user permissions.

1. Make an API request. Behind the scenes, the client makes a request to obtain an access token and incorporates it into the `Authorization` request header. For example:

    ```javascript
    import { withDashboard } from '@wix/dashboard-react';
    import { useWixModules } from '@wix/sdk-react';
    import { products } from '@wix/stores';
    import { useEffect } from 'react';
    
    export default withDashboard(() => {
      const [siteProducts, setSiteProducts] = useState<products.Product[]>([]);
      const { queryProducts } = useWixModules(products);
    
      useEffect(() => {
        queryProducts().find().then(products => setSiteProducts(products))
      }, []);
    
      return (
        <div>
          You have {siteProducts.length} products!
        </div>
      );
    });
    ```

    <blockquote class="tip">
    
    __Tip:__ If a REST API isn't available in the SDK, you can still access it using the [`useWixFetchWithAuth()`](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk-react/use-wix-fetch-with-auth) hook.
    
    </blockquote>

## See also

* [About Authentication for Wix Apps](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/access/authentication/about-authentication)
* [About Identities](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/access/about-identities)