Implement Angular guard on password reset route

Question

I'm having an issue trying to figure out how to validate the password-reset route when the user tries to enter manually in the URL. The correct functionality is that the users will go the forgot-password route and from there, an email will be sent to them; the email will contain the URL pointing to the password-reset route and it will contain the token. My innefficient workaround is creating a guard specific for the password-reset route and I'm validating if the token is passed in the URL as a query parameter; here is the code:

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if (Object.keys(next.queryParams).includes('token')) {
  return true;
}
this.router.navigate(['/login']);
return false;

}

As you can see this code has an inconvenience: if the users write the token in the URL it will allow them to enter the route.

Is there a way to detect if the navigation comes from an email and validate based on that? Thanks in advance.

That only tells the component can be activated, but the token validation should occur on server-side — dcg, Feb 05 '20 at 00:16
Yes, but I need to restrict the access to the route if the navigation doesn't come from the email link — juan, Feb 05 '20 at 00:20

Supun De Silva · Accepted Answer · 2020-02-05T00:57:14.307

1

One of the ways we did this in the past was - Editing My Comment

Once the forgot-password Link is Clicked, post to server.
Server generates token, Stores it, Sends as a Link (url paramed)
User clicks Link in the email.
Route Guard of password-reset asks Server if the token is valid.
If Yes -> Server Issue response with a temp cookie that you will use to validate the next action/actions
If No Route Guard sends user to a generic error page in an unauthenticated area in the app.

Would this answer your question clearly

edited Feb 05 '20 at 00:57

answered Feb 05 '20 at 00:30

Supun De Silva

1,437
9
15

And how did you guys detect the email link click event in order to create the cookie? – juan Feb 05 '20 at 00:37
Of course, Although I thought there was a client solution I think this is a really nice solution that I'm going to implement. Thank you very much for your help. – juan Feb 05 '20 at 01:06
Make sure the tokens has a life-span as well and they get expired the moment the user consumes it. – Supun De Silva Feb 05 '20 at 02:14
I'm facing the exact same situation. What do you mean with cookie? How to do it? Currently I got a link like this: http://localhost:4200/changePassword?token=e6a4f6d6-a80a-4645-8f71-946a29839fd1 and my idea would be to check send somehow the token of the link to the Route Guard and then to the server to check but don't know how – CptDayDreamer Jul 07 '20 at 20:08
In a JWT authentication scheme you need to create a token that is different from the general Auth Token and any requests that bears this token should NOT be allowed to perform anything other than a PWR. (i.e. using specific authentication filters if the backend is C#) – Supun De Silva Jul 08 '20 at 01:47

Implement Angular guard on password reset route

1 Answers1