Is it possible to secure both web page and web API access with a JWT?

Question

I am trying to wrap my head around having a secure WEB API and at the same time securing the client that accesses the WEB API. I am hoping someone can point me in the right direction.

Here is my scenario. I have developed a WEB API that has an authentication method that takes a username/password and upon success authentication issues back a JWT. I can pass this back as a custom header or as a cookie.

I have a client MVC application that uses AngularJS. I use AngularJS's $http to make calls to the WEB API to get data. I also use $http to call the authentication method on the WEB API and get the token. What I am having trouble understanding is locking down specific views/pages in the MVC application. I want to restrict these pages to authorized users and eventually based on what role they have.

Here are the solutions that I have thought of, but they all seem problematic to me.

• Not using MVC and just doing everything view/page related in AngularJS. This would run client-side and would not be secure. Users would be able to view pages, just with limited/no data.
• Using MVC to control the view/pages the user can see based on the roles defined in the JWT. I don't know how to pass the JWT that was issued by the WEB API to the server. Since the WEB API is on a different domain, the cookie won't be sent when making a request to the MVC application. Even if it did get sent, I would need some mechanism of deserializing the JWT on the server running the MVC application, which I would not have. The only alternative I saw for that would be add a method to the WEB API that could return the user's roles based on the JWT.
• Having a separate authentication method for the MVC application. This just seems stupid.
• Having both the WEB API and MVC Application in the same project/server. This tightly couples the two together. I want to avoid that.

I am at a loss on how to move forward with this. Is what I want to do normal or is this a stupid solution and I should be looking at doing something different? If so, what? Is there some framework out there I should be using?

Answer 1

You can use angularjs interceptor to handle every http call and add JWT token as a header (X-AUTH-TOKEN) which will be checked on server side. For that purpose you can use https://github.com/auth0/angular-jwt
If you want to use cookie to store JWT token your services and web page should be in same domain. You can achieve this using reverse proxy (ex NGINX) and expose both server and web page under same domain.