My Auth0 setup was working fine but then I found out it wasn’t suitable for production. The problem was that the front end and back end are on the same domain so when Auth0 redirected the user to the callback, the front end picked it up instead of the back end. Apparently the front end handles all browser requests while the back end handles fetch requests… I think. The front end uses React Router, the back end is a Node API with Passport.js.
So I decided to change the flow a bit and to make it work like this:
- User is authenticated by Auth0 and is redirected to /callback
- /callback takes its get parameters and makes a request to /api/users/callback with the same get parameters
- /api/users/callback handles the request and returns a user profile to the front end
The problem is that at /api/users/callback, passport.authenticate throws an error:
{name: "TokenError", message: "Invalid authorization code", code: "invalid_grant"}
I know my overall setup isn’t the problem because back when the redirect URI was /api/users/callback, everything was working fine.
Is there something that I’m not forwarding or some config change I didn’t make? Or better yet, can anyone think of a better way to fix the original issue of not being able to reach the API callback directly?
EDIT: Just to clarify, I’m using Lock to authenticate the user on the back end. I know this works becuase it worked before, I just need a way to do it without needing to redirect to the API