Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CORS problems with Auth0 and React

I am currently trying implement Auth0 in my NodeJS + React App. This tutorial given is really good and helpful, though I have one big problem. Every time I try to login/register via Auth0 I get

XMLHttpRequest cannot load https://XYZ.eu.auth0.com/usernamepassword/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

So I have a rough understanding what that means. But I just don't know where to set the needed options to allow this request to Auth0. On the Server side? In the Browser code?

Best regards


EDIT: as Rodrigo López Dato pointed out, I can write Origins in my app here: https://manage.auth0.com/#/applications

What should I put there when I am developing locally? My IP?

like image 315
MoeSattler Avatar asked Dec 28 '15 14:12

MoeSattler


3 Answers

If you are developing locally, you can put the URL you are going to redirect to. For instance, if you are running on your localhost at port 4000, and you want to redirect to your route called /callback, you can put:

http://localhost:4000/callback

in that field.

like image 129
Kassandra Perch Avatar answered Sep 19 '22 02:09

Kassandra Perch


Just to elaborate more on the server side since you mentioned you are building a node.js app. I assume you are also using express. To deal with CORS requests you can do the following:

In your express server file you can set the local host to something other than the client side React app which most likely is running on localhost:3000.

var port = normalizePort(process.env.PORT || '5000');
app.set('port', port);

Then install the cors npm package and initialize it in your main express file.

var app = express();
app.use(cors());

Then all you have to do is set a proxy in your client side React package.json file.

  },
  "proxy": "http://localhost:5000"
}

You can then run both your node.js/express server and React app at the same time and use your express server to make requests through the client React with the proxy.

Hopefully this helps.

like image 21
iqbal125 Avatar answered Sep 22 '22 02:09

iqbal125


Auth0 needs to know what your allowed origins and callback URLs are for your application. You can configure that in your application's settings in the dashboard: https://manage.auth0.com/#/applications

like image 30
Rodrigo López Dato Avatar answered Sep 19 '22 02:09

Rodrigo López Dato