1

I've made a forgot-password functionality sending userId and a token by email.

http://www.example.com/update-password/d2ff3788-aa12-47b6-8759-8b52cca02a3b/Q2ZESjhQL1dOb0l3bGYxSW1XZktVbTN3ckx3SnAyNFB2Z2dhNXRBWVBlMWJyd3Jaa1ZEejV5WDA5TExtNi93djBPWUMwN1NyK1NrMG1VVnM5V1E2RmdsbXBkVXlUMFlXS0o1ZzlJVWxUQU9kSlJLWC9sUC9RRXdldEtRLzFZTnNOa216dXN5eEhub29MRi84Z1Q1SVVoc1c0MWFrWHkwVUN2YnAxa0VGWU1PenU4emFNc3hwNWN0K3BudDlmYktic2RPcVlpOSsraGo2RFc4d2EzOFdJUm1XMHc0L0dpeWNISG4vWUU4aU9FdGtmRlZh

I'm solving the problem when deleting some characters from the param 2 which is /:tokenId

The problem that I'm getting

Bad Request - Invalid URL
HTTP Error 400. The request URL is invalid.

This is my index.html file for React:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap-grid.min.css" /> -->
</head>

<body>
  <div id="root"></div>
  <script type="module" src="./src/main.jsx"></script>
</body>

</html>

And here's the link. I've made a Route in my React js as show below:

import {
  BrowserRouter as Router, // <-- import Router component
  Route,
  Routes
} from 'react-router-dom'

My route here:

<Route path='/update-password' element={<UpdatePassword />}>
    <Route path="/update-password/:userId/:tokenId" element={<UpdatePassword />} />
</Route>

Token before encoding

CfDJ8EHnmcjBPm9MoR2xSCwmz5BloVGwo3ncXBxlFX7ygpB2ukH2K3huzfxvWxY4mgBb7LtKRoUzggOICsZpfFOCqXHN02zYQiIYSZwG8AVZkEnFt4lZo102aojOHgyMR1R/QfqlYzn5F5to8ydt/8GgtQpVGqVzz5fa853R/AH18EtOK5zow1akfZ4LIx6ZO39Z+iSmFbhUWfL27vx6vmJ5U9BxUn3bUgHpnJPJY6CzNlcboSCGist9knfxNWjgR8T2Cg==

Token when I used encoding

Q2ZESjhFSG5tY2pCUG05TW9SMnhTQ3dtejVCbG9WR3dvM25jWEJ4bEZYN3lncEIydWtIMkszaHV6Znh2V3hZNG1nQmI3THRLUm9VemdnT0lDc1pwZkZPQ3FYSE4wMnpZUWlJWVNad0c4QVZaa0VuRnQ0bFpvMTAyYW9qT0hneU1SMVIvUWZxbFl6bjVGNXRvOHlkdC84R2d0UXBWR3FWeno1ZmE4NTNSL0FIMThFdE9LNXpvdzFha2ZaNExJeDZaTzM5WitpU21GYmhVV2ZMMjd2eDZ2bUo1VTlCeFVuM2JVZ0hwbkpQSlk2Q3pObGNib1NDR2lzdDlrbmZ4TldqZ1I4VDJDZz09

C# Backend:

public async Task MailOnaylamaAsync(string eMail)
{
AppUser user = await _UserManager. FindByEmailAsync (eMail);
if (user != null)
{
string mailToken = await _UserManager. GenerateEmailConfirmationTokenAsync(user);
byte[] tokenBytes = Encoding. UTF8. GetBytes (mailToken);
mailToken = WebEncoders. Base64UrlEncode (tokenBytes);
await _mailService.SendMailOnayAsync(eMail, user.Id, mailToken);
}
Omar Dakelbab
  • 11
  • 3
  • Make sure the backend returns the html file when it receives the request, if you want to handle on the front end. – Youssouf Oumar Apr 29 '23 at 20:09
  • I'm using asp.net at backend and running React js and Asp.net Files on IIS server. How do i return the html file – Omar Dakelbab Apr 30 '23 at 12:31
  • Please use `encodeURIComponent()` to format your token , make sure it can be transmitted. – Jason Pan May 01 '23 at 03:08
  • Some thing like `encodeURIComponent("Q2ZESjhQL1dOb0l3bGYxSW1XZktVbTN3ckx3SnAyNFB2Z2dhNXRBWVBlMWJyd3Jaa1ZEejV5WDA5TExtNi93djBPWUMwN1NyK1NrMG1VVnM5V1E2RmdsbXBkVXlUMFlXS0o1ZzlJVWxUQU9kSlJLWC9sUC9RRXdldEtRLzFZTnNOa216dXN5eEhub29MRi84Z1Q1SVVoc1c0MWFrWHkwVUN2YnAxa0VGWU1PenU4emFNc3hwNWN0K3BudDlmYktic2RPcVlpOSsraGo2RFc4d2EzOFdJUm1XMHc0L0dpeWNISG4vWUU4aU9FdGtmRlZh")` – Jason Pan May 01 '23 at 03:08
  • I'm using Base64UrlEncode using backend C# – Omar Dakelbab May 01 '23 at 08:43
  • @JasonPan Is there anything to do in React js – Omar Dakelbab May 01 '23 at 08:43
  • Okey, the url generated by backend, right ? – Jason Pan May 01 '23 at 08:45
  • Yes it is generated by backend – Omar Dakelbab May 01 '23 at 08:46
  • What is the format of the url in backend, pls set breakpoint in backend and share with us. – Jason Pan May 01 '23 at 08:47
  • "CfDJ8EHnmcjBPm9MoR2xSCwmz5BloVGwo3ncXBxlFX7ygpB2ukH2K3huzfxvWxY4mgBb7LtKRoUzggOICsZpfFOCqXHN02zYQiIYSZwG8AVZkEnFt4lZo102aojOHgyMR1R/QfqlYzn5F5to8ydt/8GgtQpVGqVzz5fa853R/AH18EtOK5zow1akfZ4LIx6ZO39Z+iSmFbhUWfL27vx6vmJ5U9BxUn3bUgHpnJPJY6CzNlcboSCGist9knfxNWjgR8T2Cg==" That's my token when settıng a break point – Omar Dakelbab May 01 '23 at 08:52
  • 1
    that's the string when doing encoding = "Q2ZESjhFSG5tY2pCUG05TW9SMnhTQ3dtejVCbG9WR3dvM25jWEJ4bEZYN3lncEIydWtIMkszaHV6Znh2V3hZNG1nQmI3THRLUm9VemdnT0lDc1pwZkZPQ3FYSE4wMnpZUWlJWVNad0c4QVZaa0VuRnQ0bFpvMTAyYW9qT0hneU1SMVIvUWZxbFl6bjVGNXRvOHlkdC84R2d0UXBWR3FWeno1ZmE4NTNSL0FIMThFdE9LNXpvdzFha2ZaNExJeDZaTzM5WitpU21GYmhVV2ZMMjd2eDZ2bUo1VTlCeFVuM2JVZ0hwbkpQSlk2Q3pObGNib1NDR2lzdDlrbmZ4TldqZ1I4VDJDZz09" – Omar Dakelbab May 01 '23 at 08:52
  • @JasonPan check my question I've added c# code and generated token and it's encoding – Omar Dakelbab May 01 '23 at 08:58
  • I have post my answer with the reason and suggestion. Pls check it, it should be work, if not, pls let me know. – Jason Pan May 01 '23 at 09:22
  • I've followed microsoft token generator i don't think that this is the problem? – Omar Dakelbab May 01 '23 at 10:29
  • @JasonPan DO i need to add any configuration in my IIS of Web.config? – Omar Dakelbab May 01 '23 at 10:30

1 Answers1

0

Thank you for so much information, I finally found the solution, we can't use Base64UrlEncode to encode the token.

You can follow the best practice to generate reset password tokens.

Because the symbol / exists in the token before you encode, it will cause an error if you use it after encoding.

CfDJ8EHnmcjBPm9MoR2xSCwmz5BloVGwo3ncXBxlFX7ygpB2ukH2K3huzfxvWxY4mgBb7LtKRoUzggOICsZpfFOCqXHN02zYQiIYSZwG8AVZkEnFt4lZo102aojOHgyMR1R/QfqlYzn5F5to8ydt/8GgtQpVGqVzz5fa853R/AH18EtOK5zow1akfZ4LIx6ZO39Z+iSmFbhUWfL27vx6vmJ5U9BxUn3bUgHpnJPJY6CzNlcboSCGist9knfxNWjgR8T2Cg==
Jason Pan
  • 15,263
  • 1
  • 14
  • 29
  • can you share what can we use beside Base64UrlEncode – Omar Dakelbab May 01 '23 at 10:33
  • @OmarDakelbab Please [check the comments under the answer](https://stackoverflow.com/a/56883504/7687666), you can find [the link](https://stackoverflow.com/a/14644367/7687666) about how to encode the token. – Jason Pan May 02 '23 at 01:31