Angular : How to use JWT Authentication with an API call

Question

I am following this article. The author is using fake-backend.ts to intercept an api call whose url ends with /api/authenticate and check users based on their username and password from a static array.

When the user submit form with username and password then it calls authentication.service.ts login function which post call on path /api/authenticate and as the call has an url ending with /api/authenticate so now here fake-backend.ts comes into play which is validating user from static array. After successful authentication it generates a token and control goes back to authentication.service.ts to map response object

I bit change this fake-backend.ts with calling an api to validate users from db. But I am getting below error.

Http failure response for https://localhost:44348/api/authenticate: 404 OK

Also call not going back to authentication.service.ts to map response object.

if (request.url.endsWith('/api/authenticate') && request.method === 'POST') {
const UserName = request.body.username;
const Password = request.body.password;
var credentials = { UserName, Password };
//return this.employeeService.autheticateEmployeeByCredentials(credentials);
this.employeeService.autheticateEmployeeByCredentials(credentials).subscribe((res) => {
if (res == 1) 
    return of(new HttpResponse({ status: 200, body: { token: 'fake-jwt-token' } }));    
else 
      return throwError({ error: { message: 'Username or password is incorrect' } });   
  });
}

Edit :
I am using an api controller and validating from that returning 1 if its there in db else 0. Also getting response from api but control does not do back to authentication.service.ts but goes to login.component.ts subscribe and throws this error.

Have you check these blog? jasonwatmore.com/post/2016/08/16/… blog.angular-university.io/angular-jwt-authentication Another great resource to know regarding JSON Web Tokens: blog.angular-university.io/angular-jwt — Immad Hamid
– Immad Hamid, Commented Jul 20, 2018 at 5:10

Gerald Chifanzwa · Accepted Answer · 2018-07-20 13:09:54Z

1

Firstly, the 404 in your response is a NotFound response - meaning, your service cannot see that url. By default, all non-success responsed from the server (responses with status code outside the range 200-299) are treated as error responses, which means they trigger an error. From the looks of it, fake-backend does not have a try-catch mechanism, hence the 404 will not hit any subscriptions down the promise chain.

So to solve your problem, I suggest you use an application like Postman to verify that your https://localhost:44348/api is indeed working.

Then where it says return next.handle(request);, use catchError to handle non-success responses from your api, like in the example below. Then in your authentication.service.ts you can do something like authenticateUser(/*parameters*/).subscribe(response => if(response.body.error) {/*handle error */} else {/*do your normal stuff */});

 return next.handle(request).pipe(
              catchError(error => {
                return of(
                  new HttpResponse({
                    status: 200,
                    body: {
                      error: {
                        responseMessage: 'Some Error Accessing API'
                      }
                      /**some response body you can surely handle in authentication.service.ts */
                    }
                  })
                );
              })
            );

To fully address your specific issue, would you mind posting your full FakeBackendInterceptor class.

answered Jul 20, 2018 at 13:09

Gerald Chifanzwa

1,3677 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sunil Kumar Over a year ago

its same as in article @gerryc.inc, I have pasted which I have changed. And the problem is that its not waiting for the response from the service which is validating user from backend "autheticateEmployeeByCredentials"..

Gerald Chifanzwa Over a year ago

Lets see the autheticateEmployeeByCredentials method. I'm interested in seeing how it is handling the result from the HttpClient call (I assume you are using HttpClient service to do the actual call to the backend).

Sunil Kumar Over a year ago

sry for replying late bcz of weekends, yea its a simple httpclient service calling backing nothing special in it..

zcharles · Accepted Answer · 2018-07-20 07:23:28Z

0

Looks like you have two problems(or more perhaps) but let's fix the first one...

You need to return the call to employeservice in order to not break the promise chain.

Also, can you validate that your backend is listening at https://localhost:44348/api and not your frontend?

answered Jul 20, 2018 at 7:23

zcharles

1906 bronze badges

2 Comments

Sunil Kumar Over a year ago

that is the issue i don't know how to return service call without breaking the promise chain..

zcharles Over a year ago

Oops, sorry for multiple answer... I'm on my phone and didn't realise I was reposting and answer...

zcharles · Accepted Answer · 2018-07-20 07:33:21Z

0

Humm, it seems like your going against the grain here...

In his example he faked his backend with that interceptor.

if (request.url.endsWith('/api/authenticate') && request.method === 'POST') { const UserName = request.body.username; const Password = request.body.password; var credentials = { UserName, Password }; //return this.employeeService.autheticateEmployeeByCredentials(credentials); this.employeeService.autheticateEmployeeByCredentials(credentials).subscribe((res) => { if (res == 1) return of(new HttpResponse({ status: 200, body: { token: 'fake-jwt-token' } })); else return throwError({ error: { message: 'Username or password is incorrect' } }); });

So if you would use your backend for authentication for instance, you should remove this.

After that, in the authentication service you should call to the url your backend is listening on.

answered Jul 20, 2018 at 7:33

zcharles

1906 bronze badges

2 Comments

Sunil Kumar Over a year ago

I have tried this also but how generate token then "return of(new HttpResponse({ status: 200, body: { token: 'fake-jwt-token' } }));", also i need to get to know what was the response from api 0 or 1..

zcharles Over a year ago

The status code and the header should be set by your backend, not your frontend. I suggest you that if your api would return 1 it should return the response status 200 with token header instead. When it would return 0 then you should return a response with a status code 401.

Collectives™ on Stack Overflow

Angular : How to use JWT Authentication with an API call

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related