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 
!
