How to allow users to login protected flask-rest-api in Angularjs using HTTP Authentication?

The way you make basic authentication from client side is by supplying Authorization: Basic <encoded username:password> header in HTTP request.

encoded username:password is done in specific manner described below:

1. Username and password are combined into a string "username:password"
2. The resulting string is then encoded using the RFC2045-MIME variant of Base64, except not limited to 76 char/line[9]

So modify your rest calls to include above header in your Angularjs code or find a library to do that.

as @Boris mentioned in comments above, see this link http://jasonwatmore.com/post/2014/05/26/AngularJS-Basic-HTTP-Authentication-Example.aspx it has nice Angular service written to do just what you want

You could try the simplest, least secure way of doing this, which is to pass the login information like this:

username:password@yoursite.com

If you try it with any website it attempts to log in using whatever you provided. It might work in your environment.

• Relevant
• Also relevant
• article flask + angular authentication

As mentioned in the above article, you should really set up a Auth Service, which requires you to log in on the front end. It looks like you are not using routing, or angular-ui-router. With routing you can redirect people to the login route, before allowing them to access any of the other routes. This question has the answer I used to set up this behavior. And here's the example which shows certain routes are only accessible when authenticated.