Authentication from VueJS client with Flask API : CORS issue

Help
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 ?

2

Hey there!

Sorry for such delay in response! We’re doing our best in providing the best developer support experience out there, but sometimes the number of incoming questions is just too big for our bandwidth. Sorry for such inconvenience!

Do you still require further assistance from us?