AngularJS with Flask authentication

Question

I'm building a web app using AngularJS and a REST-API build with the Flask framework.

The app consists of two parts:

• A part where users don't have to be logged in: They can register, login, check out the features...

• A part where users have to be logged in.

To keep things simple I was thinking to separate these two parts in two angular apps and let Flask direct you to the right app according to you being logged in or not.

I was wondering if this is a good approach? I think with this I can keep the authentication pretty simple.

Answer 1

I'm not sure two separate apps is a good idea.

It seems you would have a fair amount of duplication if you do it that way, because I don't think the two apps will be mutually exclusive. At least, I imagine the public options will also be available when a user is logged in, right? That means that a good chunk of the public application, client and server-side, will have to be part of the protected application. This sounds hard to maintain.

Also consider the user experience. A user will have to download an entire new application at login and logout time, at least the first time until it gets in the browser's cache. Depending on the size of your application that could be a few seconds of waiting.

The standard approach is to have one Angular app and one Flask app. The Angular app begins and shows all the available options, and depending on what the user does Angular sends Ajax requests to Flask.

If the user tries to do something that requires login, then Flask will respond with a code 401 error. Angular then can show a login dialog to get the login credentials and then submit the Ajax request again, now with credentials, maybe as HTTP Basic Authentication over secure HTTP. From then on Angular can attach the login credentials to all requests, so that the user can now use all the options.

If you don't want to send login info with every request, then you can have a get_auth_token endpoint in your Flask app that takes the credentials and sends a token back to Angular. Then Angular can attach the token to all subsequent requests.

The logout option in Angular then just drops the credentials and/or token to become unauthorized again.

I explain some of these ideas with more detail in this answer. Even though the context in that question was Node.js the principles apply to Flask as well.

You can also check out my tutorials on the topic. I'm using Flask on the server and Knockout.js on the client, but the concepts should translate directly if you use Angular instead of Knockout. Here is the three of them:

• Designing a RESTful API with Python and Flask
• Writing a Javascript REST client
• Designing a RESTful API using Flask-RESTful

Answer 2

Hey using Flask and Angular together is really nice full-stack. And if you're clever about your code you won't get any overlap like these other answers suggested. In fact, you'll get an extremely fast stack with modern frontend/backend separation. Check this code out: https://github.com/mattupstate/overholt

The Overholt app is a great example of an elegant combination of Flask serving up the backend for a frontend to hook into. Flask handles the API, the web-assets pipeline, and user authentication. Backbone or Angularjs handles the frontend webapp that is the product your site is delivering once users are authenticated.