> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Authenticate using the Wix Client in Custom Elements for Self-Hosted Site Extensions

## Article: Inject a Custom Element with an Access Token

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/site-widgets-and-plugins/authenticate-using-the-wix-client-in-custom-elements-for-self-hosted-site-extensions.md

## Article Content:

# Authenticate using the Wix Client in Custom Elements for Self-Hosted Site Extensions

<blockquote class="tip">

**Tip:** Self-hosting requires you to manage deployment, authentication, and ongoing maintenance. To reduce complexity, [build your site extensions with the Wix CLI](https://dev.wix.com/docs/wix-cli/guides/extensions/about-extensions.md).

</blockquote>

In a [custom element](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/site-widgets-and-plugins/add-self-hosted-site-widget-extensions-with-custom-elements.md) for a self-hosted [site widget](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/site-widgets-and-plugins/add-self-hosted-site-widget-extensions-with-custom-elements.md) or [site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/site-widgets-and-plugins/add-self-hosted-site-plugin-extensions-with-custom-elements.md), you need to use a [Wix Client](https://dev.wix.com/docs/sdk/articles/set-up-a-client/about-the-wix-client.md) to call Wix APIs using the [SDK](https://dev.wix.com/docs/sdk.md).

- To call frontend modules, the client must be initialized with the [Site host context](https://dev.wix.com/docs/sdk/host-modules/site/introduction.md).
- To call backend modules, the client must be authenticated using [Site authentication](https://dev.wix.com/docs/sdk/host-modules/site/introduction.md#auth).

## Create a client
You need to provide Wix with a function that injects your client with the access token:

1. Create a client using [Site host context](https://dev.wix.com/docs/sdk/host-modules/site/introduction.md) and [Site authentication](https://dev.wix.com/docs/sdk/host-modules/site/introduction.md#auth).
1. In your class component's constructor, add: 
    ```js
    this.accessTokenListener = wixClient.auth.getAccessTokenInjector();
    ```
    Wix calls this function to inject your client with an access token. 

With this setup, Wix injects your client with an access token and you can use your client to call SDK methods.

## Example

The following example shows a custom element that uses an authenticated client to call:
- `products.queryProducts` from the `@wix/stores` backend module
- `seo.title` from the `@wix/site-seo` frontend module

```js
import { site } from "@wix/site";
import { createClient } from "@wix/sdk";
import { products } from "@wix/stores";
import { seo } from "@wix/site-seo";

const myWixClient = createClient({
  auth: site.auth(),
  host: site.host({ applicationId: "<your_app_id>" }),
  modules: {
    products,
    seo
  },
});

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.accessTokenListener = myWixClient.auth.getAccessTokenInjector();
  }

  async connectedCallback() {
    try {
      const productsQueryResult = await myWixClient.products.queryProducts({});
      console.log("Products query result:", productsQueryResult);

      const title = await myWixClient.seo.title();
      console.log("Site title:", title);
    } catch (error) {
      console.error("Error:", error);
    }
  }
}
customElements.define(tagName, MyCustomElement);
```