AngularJS and MVC authentication based navigation

We are working on a solution with hybrid routing between angularjs and mvc where we have mini SPA's.

MVC handles the server side routing of navigating between the SPA's and angularjs handles the routing between each SPA.

I have the server and client side routing working.

I then want to be able to protect views/html from rendering based on authentication. I have the resolve property of the routeProvider working and firing the routeChangeError when the conditions are not met.

The authentication on the app is based on JWT with Web API and the token is saved in local storage.

The problem I have is since the different SPA is handled by the server and the authentication is not forms authentication, the page requested renders the layout view and the main view for that SPA before redirecting to the login page if user is not authenticated.

How do I secure the layout view from rendering before angular routeProvider kicks in?

Can I use forms authentication to secure the mvc application with its views and angularjs for the mini SPA?

How can I have Web API ignore forms authentication cookie and only check out for authorization header with the bearer token as it's done now?

How can i have my JWT Authorization Server issue a Forms Authentication cookie?
Akin OdeyaleAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
I don't think I can answer all of your questions, but generally speaking, you may want to consider using "resolve" objects in the route provider. This way, the views will not be rendered until certain calls are resolved. Based on the response, you can then direct to the login view, or whatever..
Akin OdeyaleAuthor Commented:
Hi, I have resolve implemented and it actually redirects to login view or whatever page specified. The only problem I have with that is on page refresh and because the layout view is served from the server.

It flickers and shows the layout with the home view of the SPA I am in before redirecting.

It doesn't create a smooth user experience
Kyle HamiltonData ScientistCommented:
One solution would be to have some kind of loading indicator in the layout view that doesn't go away until the route is resolved. This is not ideal, but at least the flicker you get is somewhat acceptable.

Of course a server solution that takes you directly to the correct template would be better, though I don't think I can help you with it, as I don't have experience in mvc

Please feel free to request attention, so other experts can chime in.
Akin OdeyaleAuthor Commented:
I have managed to solve the problem but still have another issue.

What I did was add forms authentication to my web.config and deny access to all users except they are authorized.

That way the server handles routing and authentication.

I send a login request to /token endpoint with jwt. I then set authorization cookie with FormsAuthentication.

My only problem is I am struggling to get config.SuppressDefaultHostAuthentication(); ignore the cookies for web api resources.

I want my web api to use json web token passed in with the Authorization header.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kevin RobinsonPrivate VB.NET ContractorCommented:
Ok I would start by getting the Webforms working first.  If you are using Angular 1.4+ you could use the $stateProvider to handle your routing.  It also make the authentication control easier.  The $stateProvider will also allow you to use child routes.

Another option is one I am using on one of my sites.  Is to use a third party provider.  I am using Auth0   It can handle authentication across multiple platforms.  (they cover ALL platforms client, server and mobile)

Even if you decide not to use Auth0 i would suggest having a look at the their site.   You can download example projects with your account details already baked in to the config files  ( I find this awesome !).   So you could download say the MVC and Angular samples  and use them as a reference ;-)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.