Auth0 Home Blog Docs

Authentication from VueJS client with Flask API : CORS issue


#1

Hi there,

I have an app which is divided in 2 parts:

  1. server side is a flask API
  2. client side is a vueJS app

I want that:

  • my client app request login url on the API
  • the api delegates auth to auth0
  • the api get the answer from auth0 and create a new JWT token with its own key (based on data in auth0’s jwt token)
  • send the new JWT token to the client app

First test : if I directly go with my browser to http://localhost:3000/v1/auth/oauth , my flask API correctly use auth0, I can auth and get a JWT back, everything is working.

2nd test: I know want my VueJS app to call the /v1/auth/oauth endoint if I’m not connected, so bascially I have:

router.beforeEach((to, from, next) => {
  console.log('beforeRoute');
  if (!to.matched.some(record => record.meta.withoutAuth)) {
    if (store.getters.isLoggedIn) {
     next();
      return;
    }
    store.dispatch('Login');
  } else {    
    next();
  }
});

and the store.dispath(‘Login’) trigger this action:

  API.get('/auth/oauth')
.then((resp) => {
  console.log('Login response: ' + resp.data);
  const token = resp.data.token;
  const user = resp.data.user;
  localStorage.setItem('token', token);
  API.defaults.headers.common.Authorization = token;
  context.commit('AuthSuccess', token, user);
  //    resolve(resp)
})
.catch((err) => {
  localStorage.removeItem('token');
  console.log(err);
});

So my VueJS does a xhr request (API is an axios instance), the Flask API send the correct 302 :slight_smile:

Location: https://mytenant.eu.auth0.com/authorize?response_type=code&client_id=uIJ....&redirect_uri=http://localhost5000%2Fv1%2Fauth%2Foauth%2Fvalidate&scope=email+openid
Content-Type: application/vnd.api+json
Access-Control-Allow-Origin: *

Then the browser connect to the /authorize endpoint and get a redirect to https://mytenant.eu.auth0.com/login?state=9…F&client=uIJ…&protocol=oauth2&response_type=code&redirect_uri=http%3A%2F%2F127.0.0.1%3A5000%2Fv1%2Fauth%2Foauth%2Fvalidate%3Fnext%3Dhttp%253A%252F%252Flocalhost%253A8080%252F&scope=email%20openid%20profile%20metadata

At that point, my browser fails with a CORS error :

Redirect to ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I’ve configured my auth0 app with the 3 urls :

in both “Allowed Web Origin” and “Allowed Origin (CORS)” section, but doesn’t help.

Anyone already did that ?