"Unable to issue redirect for OAuth 2.0 transaction" login Error

SDK: SPA SDK
SDK Version (from package.json): 1.19.2
Platform: Vuejs 3

Hi I am building a website and i want to use auth0 for it. It uses Vuejs 3 and Firebase cloud functions. I have made a sample of a redirect login using the vue-auth0-plugin npm package to help me as auth0 doesn’t have a quick start for vue3. Whenever i go to login it always says there is an error. Here is the error:

server_error : Unable to issue redirect for OAuth 2.0 transaction

here is the code i am using with the plugin:

    app.use(VueAuth0Plugin, {
        domain, client_id: clientId, redirectUri: "https://localhost:8081" /* It is localhost because it is still in development */
    })

To use it i just have to inject it into the App.vue file. The variables domain and clientId are coming from a json file which i import in the same file. I was able to get the code for the plugin. Here it is:

/*!
  * vue-auth0-plugin v0.0.0-semantically-released
  */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var createAuth0Client = require('@auth0/auth0-spa-js');
var vue = require('vue');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }

var createAuth0Client__default = /*#__PURE__*/_interopDefaultLegacy(createAuth0Client);

const state = vue.reactive({
    loading: true,
    authenticated: false,
    user: undefined,
    popupOpen: false,
    error: undefined,
});
const properties = vue.reactive({
    authenticated: false,
    loading: true,
    user: undefined,
    client: undefined,
    getIdTokenClaims,
    getTokenSilently,
    getTokenWithPopup,
    handleRedirectCallback,
    loginWithRedirect,
    loginWithPopup,
    logout,
});
Object.defineProperties(properties, {
    authenticated: {
        get() {
            return state.authenticated;
        },
        enumerable: false,
    },
    loading: {
        get() {
            return state.loading;
        },
        enumerable: false,
    },
    user: {
        get() {
            return state.user;
        },
        enumerable: false,
    },
});
let client;
async function initialize(app, authClient) {
    client = authClient;
    // set client property to created Auth0Client instance
    properties.client = client;
    try {
        // If the user is returning to the app after authentication
        if (window.location.search.includes('code=') && window.location.search.includes('state=')) {
            // handle the redirect and retrieve tokens
            const { appState } = await client.handleRedirectCallback();
            window.history.replaceState({ ...window.history.state, code: undefined, state: undefined }, document.title, window.location.pathname);
            // Notify subscribers that the redirect callback has happened, passing the appState
            // (useful for retrieving any pre-authentication state)
            app.config.globalProperties.$router.push(appState && appState.targetUrl ? appState.targetUrl : '/');
        }
    }
    catch (e) {
        state.error = 'Error: ' + e;
    }
    finally {
        // Initialize our internal authentication state
        state.authenticated = await client.isAuthenticated();
        state.user = await client.getUser();
        state.loading = false;
    }
}
var Plugin = {
    state,
    properties,
    initialize,
};
async function loginWithPopup(options, config) {
    state.popupOpen = true;
    try {
        await client.loginWithPopup(options, config);
    }
    catch (e) {
        console.error(e);
    }
    finally {
        state.popupOpen = false;
    }
    state.user = await client.getUser();
    state.authenticated = await client.isAuthenticated();
}
async function handleRedirectCallback(url) {
    state.loading = true;
    try {
        await client.handleRedirectCallback(url);
        state.user = await client.getUser();
        state.authenticated = await client.isAuthenticated();
    }
    catch (e) {
        state.error = 'Error: ' + e;
    }
    finally {
        state.loading = false;
    }
}
function loginWithRedirect(options) {
    return client.loginWithRedirect(options);
}
function getIdTokenClaims(options) {
    return client.getIdTokenClaims(options);
}
// Type any defined by auth0-spa-js
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getTokenSilently(options) {
    return client.getTokenSilently(options);
}
function getTokenWithPopup(options, config) {
    return client.getTokenWithPopup(options, config);
}
function logout(options) {
    return client.logout(options);
}

var AuthenticationGuard = async (to, from) => {
    // define verify method for later use
    const verify = async () => {
        if (Plugin.state.authenticated) {
            return true;
        }
        await Plugin.properties.loginWithRedirect({ appState: { targetUrl: to.fullPath } });
        return false;
    };
    // if not loading, verify request
    if (!Plugin.state.loading) {
        return verify();
    }
    // if loading, watch for loading property to change and then verify
    return new Promise((resolve) => {
        const unwatch = vue.watch(() => Plugin.state.loading, async () => {
            if (!Plugin.state.loading) {
                unwatch();
                resolve(verify());
            }
        });
    });
};

var index = {
    install(app, options) {
        // global $auth property is deprecated
        app.config.globalProperties.$auth = Plugin.properties;
        app.provide('auth', Plugin.properties);
        createAuth0Client__default(options).then((client) => Plugin.initialize(app, client));
    },
};
const AuthenticationState = Plugin.state;
const AuthenticationProperties = Plugin.properties;

exports.AuthenticationGuard = AuthenticationGuard;
exports.AuthenticationProperties = AuthenticationProperties;
exports.AuthenticationState = AuthenticationState;
exports["default"] = index;

Cam you please tell me why is this error happening? Thank you for helping :grinning: !