Laravel/Angular "Password Expired" auth flow

Question

I am using Laravel 7.* for my API and Angular 9 for my frontend. I am having trouble figuring out how to handle Password Expiration responses from my api.

My current auth workflow is this:

Angular POST /login request to API with an expired password
API receives POST request, authenticates the credentials.
If authenticated, API checks to see if the password has expired.
If password is expired, create a password reset token for the user.
API responds back with the reset token.

So, I dont know how to properly handle the response on my Angular app. My ultimate goal would be to send the user to a /reset-password page and pass along the reset token.

I have tried 301 redirecting to the /reset-password url from my server, but I am getting a CORS error. I could send back a 4** response, but how do I tell my app that it needs to redirect to the reset password page, and pass along the token? Has anyone had any success with this, and be willing to share their approach?

you know you can use angular router to navigate programmatically in an angular app. an if else can do the trick. if response is good navigate somewhere else navigate elsewhere. I think this can help you angular.io/guide/router — Elmehdi
@Elmehdi the authentication is being done on the server. I first have to inform Angular that it needs to redirect to /reset-password... that is the problem I am facing. I need to know how to inform angular(from my Laravel API) that the password is expired... and give angular the reset token to use to allow the user to change the password. — amcardwell
can you share code you use for authentication, the angular part — Elmehdi
@Elmehdi the angular code is just a simple POST request using the http client. There is no authentication going on in angular at all. — amcardwell

Elmehdi Elmehdi · Accepted Answer · 2020-10-02T18:58:50

You can use your http post normally, and error handling, of course your backend is responsible for sending back either data if everything is ok or an error if something is not ok, so inside your ts file:

this.http.post('https://your-end-point-url')
    .pipe(
      tap(
        data => {
          // do something with data you receive
        },
        error => {
          this.router.navigate(['/reset-password', { token: token }])
        }
      )
    );

make sure your reset-password route can handle a token parameter

Laravel/Angular "Password Expired" auth flow

1 Answers