I have been trying to implement Auth0 in my Nuxt Application and the error I keep on getting is this:
Access to fetch at ‘https://march-to-the-polls.us.auth0.com/authorize?response_type=id_token&response_mode=form_post&client_id=DxkcUTlJbv9MKRGG7I7SEliHMl8ufN5a&scope=openid%20email&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fcallback&nonce=6BmE_BYeJeEesjyriawUL’ (redirected from ‘http://localhost:3000/’) from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
This is the code for the auth0.ts that I have so far:
import {nanoid} from "nanoid"
import { CorsOrigin } from "vite";
const state = {};
const genState = () => { const s = nanoid(); state[s] = 1; return s}
const runtime = useRuntimeConfig()
export const loginRedirectUrl = () => `${runtime.AUTH0_ISSUER_BASE_URL}/authorize?response_type=id_token&response_mode=form_post&client_id=${runtime.AUTH0_CLIENT_ID}&scope=openid%20email&redirect_uri=${encodeURIComponent(runtime.AUTH0_BASE_URL!+"/api/callback")}&nonce=${genState()}`
export const logoutRedirectUrl = (id_token: string) => `${runtime.AUTH0_ISSUER_BASE_URL}/oidc/logout?id_token_hint=${id_token}&post_logout_redirect_uri=${encodeURIComponent(runtime.AUTH0_BASE_URL!+"/api/logout-complete")}&nonce=${genState()}`
export const verifyNonce = (nonce: string) => {
if (state[nonce]) {
delete state[nonce]
return true
}
return false
}