how to add a jwt token to the url?

Question

I want to allow users to reset their password. In order to do so, I first check if their email exists in the database, if so, I send them an email with a link to a reset-password page. In order to make sure the link is secure, the latter is made with a jwt token that is only valid for 15mn.

However, the url cannot be reached because there are "." in the jwt:

http://www.myapp.com/reset-password/eyJhbGciOInR5cC.ICJlywY2svp6eL98LHd.RpYylmPI

If I remove the dots, the url is understood (I use React router by the way). How to fix this? Is there another way to achieve this reset formula with a temporary url?

Answer 1

Instead of sending JWT token as GET param, send your JWT token through Authorization: Bearer which I would recommend to do (For more details see https://www.rfc-editor.org/rfc/rfc6750)

If you use Axios for your requests, then you can check out answer right over there

As an example of headers you can find here

Answer 2

I suggest

Buffer.from(token).toString('base64url')

then decode by

Buffer.from(urlParam, 'base64url').toString()

or on frontend by

const base64 = urlParam.replaceAll('_', '/').replaceAll('-', '+');
jwtToken = window.atob(base64),

you can read more about base64url there https://stackoverflow.com/a/55389212/6398044