Cant get authorization in header when calling this.myWixClient.fetchWithAuth

Ask the community
, , , ,
1

  1. i created an app in wix and what i want on wix editor i want to grab the instance id of wix app installation so i can call my server with that instanceid to get data. but i am not able to get the instanceid

  2. i also followed their documented to do this but that does work i dont know what wrong thing i am doing

  3. this was artical to get instance id https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/site-widgets-and-plugins/identify-the-app-instance-in-a-self-hosted-site-widget#backend-extract-instanceid

  4. they said when i hit api with wix client i will get authorization token in header on server side and from using that token i can generate InstanceID, but always authorization header is undefined. here is my code for both app script and server side

  5. import { createClient } from "@wix/sdk";
import { site } from "@wix/site";

class QuizEmbed extends HTMLElement {
    constructor() {
        super();

        this.myWixClient = createClient({
            auth: site.auth(),
            host: site.host({ applicationId: "e15c6c02-8625-4698-a78a-2a62093c7ffa" }),
        });

        this.accessTokenListener = this.myWixClient.auth.getAccessTokenInjector();
    }

    connectedCallback() {

        this.style.display = "block";
        this.style.width = "100%";

        this.innerHTML =
            '<div style="padding:20px;text-align:center;">Loading quiz...</div>';

        this.fetchAndDisplayQuiz();
    }

    async fetchAndDisplayQuiz() {

        try {

            const url = `http://localhost:5000/get-instance`;

            if (!this.myWixClient) {
                throw new Error("Wix client is not initialized");
            }

            const res = await this.myWixClient.fetchWithAuth(url);

            if (!res.ok) {
                throw new Error(`HTTP error ${res.status}`);
            }

            const html = await res.text();

            this.innerHTML = html;

            console.log("[QuizEmbed] Quiz rendered successfully");
        } catch (err) {
            console.error("[QuizEmbed] Quiz embed failed:", err);

            this.innerHTML =
                '<div style="padding:20px;color:red;">Failed to load quiz.</div>';
        }
    }
}

// Avoid double-define errors if script included twice
if (!customElements.get("quiz-embed")) {
    console.log("[QuizEmbed] Defining <quiz-embed> custom element");
    customElements.define("quiz-embed", QuizEmbed);
} else {
    console.warn("[QuizEmbed] <quiz-embed> already defined");
}


import express from "express";
import cors from "cors";


const app = express();
const port = 5000;

app.use(cors());


// Define a backend API
app.get("/get-instance", async (req, res) => {
    try {
        // Get the Wix access token from the `authorization` header
        const accessToken = req.headers["authorization"];
        console.log("accessToken: " + accessToken);
        res.send("accessToken: " + accessToken);
    } catch (error) {
        res.send("error: " + error.message);
    }
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});