> 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 Self-Hosted Embedded Script Extensions

## Article: Inject an Embedded Script Extension with an Access Token

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/embedded-scripts/authenticate-using-the-wix-client-in-self-hosted-embedded-script-extensions.md

## Article Content:

# Authenticate using the Wix Client in Self-Hosted Embedded Script Extensions
In a self-hosted [embedded script extension](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/embedded-scripts/about-embedded-scripts.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).

> **Note:** We recommend always creating your client using Site host context and authentication so it can be used to call frontend and backend modules.

## Script types
Before starting to code, check whether your scripts are [standard JavaScript scripts](#standard-javascript-scripts) or [JavaScript modules (ESM)](#javascript-modules-esm). 

- Standard JavaScript scripts either have no type specified or specify `type="text/javascript"` in the script tags.    
- [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) specify `type="module"` in the script tags and they use the `import` syntax. 

> **Note:** Most modern build tools like [`Vite`](https://vitejs.dev/config/build-options) and [`esBuild`](https://esbuild.github.io/getting-started/#bundling-for-the-browser) output ESM bundles, so make sure to check your app's configuration.

## JavaScript modules (ESM)
In JavaScript modules, you need to export a function that Wix uses to inject your client with an access token to call backend modules.
1. For the script in which you want to call SDK methods, add `accesstoken="true"` to your script tag.
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. Export a function exactly like this:
    ```js
    export const injectAccessTokenFunction = myWixClient.auth.getAccessTokenInjector();
    ```
    Wix calls this function to inject your client with an access token.
1. Use the client to call SDK methods.

### Example
The following example uses an authenticated client to call:
- `products.queryProducts` from the `@wix/stores` backend module
- `seo.title` from the `@wix/site-seo` frontend module

```js
<script accesstoken="true" type="module">
  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
    }
  });

  export const injectAccessTokenFunction = myWixClient.auth.getAccessTokenInjector();

  async function fetchData() {
    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 fetching data:', error);
    }
  }

  fetchData();
</script>
```

## Standard JavaScript scripts
In standard JavaScript scripts, you don't need to provide Wix with any injector functions.
1. Create a JavaScript file to host your code. This file will be your scripts `src`.
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. Use the client to call SDK methods.
1. Create your script and add your JavaScript file as the script's `src`.

### Example
The following example uses an authenticated client to call:
- `products.queryProducts` from the `@wix/stores` backend module
- `seo.title` from the `@wix/site-seo` frontend module

```js
<script type="text/javascript" src="./my-file.js">
</script>

// my-file.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
  }
});

async function fetchData() {
  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 fetching data:', error);
  }
}

fetchData();

```