Make an authenticated request to the API

[amaury1093]

I'm trying to make an authenticated request from the frontend to the backend.

The overall authentication scheme is the following:

• frontend makes a direct call to Auth0, authenticates, and gets back an authToken.
• frontend makes a request to backend, with Authorization: 'Bearer ${authToken}', and the request should be authenticated.

Repro

• frontend makes a call to Auth0 to get authToken, this works and can be done on chronoscio.now.sh, after login, go see the IndexDB storage of the web page (in the console Storage tab), and extract the idToken.
• curl -X GET localhost/api/nations/ -H 'Content-Type: application/json' -H 'Authorization: Bearer /* copy paste the id token*/'
  • note: GET shouldn't require auth on that endpoint, but is simpler to type here. The same behavior appears for POST too.

Expected
200 response

Actual
401 "Incorrect authentication credentials."

I'm pretty sure it has to do with wrong CLIENT_IDs set somewhere, or wrong permissions between apps in Auth0, but can't figure where.

Notes

• The app the frontend is connecting to is ChronoScio [DEV].
• If I use the django (test) application, and take the access_token given by this api, it works.
• I'm pretty sure the idToken given to the frontend by Auth0 is correct: I sometimes see Signature expired, and if I use another token then it just returns another error ("Invalid token").

[quorth0n]

Perhaps a closer look at https://auth0.com/blog/building-modern-applications-with-django-and-vuejs/ would be of use to us. I looked at it in brief to initially set up django with Auth0 but I'll review it again. The Vue vs React shouldn't matter, I think the flow is the same.

[quorth0n]

After a few days of reviewing I think I figured this out.

• First and foremost, API_IDENTIFIER in django.env must be set to the frontend SPA's client id. Otherwise, the aud portion of the JWT payload will fail and return a 401 as per our configuration. I'm guessing this was the source of the error, sometimes the hardest bugs to fix are the dumbest.

  @wtokumaru: if you could document the need for API_IDENTIFIER to be set to the frontend application's client id in Clarify Local Hosting Documentation #44 it would be much appreciated 🙂

• Otherise, if you check the iss and exp fields of the payload of the access token JWT issues on the frontend, you'll notice each access token expires exactly 10 hours after it is issued (on login). Sending an authenticated request to the backend with this expired JWT will return the Signature expired error you were recieving. I think ideally the frontend should log users out at this time.

Since no additional code is needed to fix this issue (past updating API_IDENTIFIER locally), I won't submit any PR. Instead, if you could verify that the new configuration fixes the issue for you as well we'll have that count as our "review" at which point you can close the issue.

[amaury1093]

Yes, works! Thanks.