flask-security
flask-security copied to clipboard
Flask-Middleware
Documentation: a quickstart project for spa
I'm trying build an spa, following what the doc says here, but I'm stuck.
The quickstart projects are pretty useful. It would be great to have one for an spa.
Basically when building a SPA - you really have 2 distinct applications - Python/Flask server and a JS UI. For the Flask Server you talk to it using the json api - this is documented here.
To initially try out your server - I use postman. You should be able to try out the various calls to Flask-Security you need.
Then to hook up your UI - well that depends on which JS framework you are using. The only tricky part for developement is that your UI and backend will run on different ports on your local machine - which is what SECURITY_REDIRECT_HOST is for.
As for getting stuck - if you give more info I can see if that's something FS can document or is really outside the bounds of what we can maintain.
I hadn't seen the json api, that will be a big help, thanks.
One thing that also helped was disabling SECURITY_CONFIRMABLE and SECURITY_UNIFIED_SIGNIN. They just add hurdles when you want to see the basic way things work.
Before I saw your answer I managed to log in this way, like when submitting a form
// sets cookies session and XSRF-TOKEN
await fetch("/api/accounts/login", {
"headers": { "Content-Type": "application/x-www-form-urlencoded"},
"body": "email=test%40me.com&password=password",
"method": "POST",
});
//retrieve csrf_token from document cookie, or with this request:
let loginResponse = await(await fetch("/api/accounts/login", {
data:null,
"headers": { "Content-Type": "application/json"},
})).json();
let csrf_token = loginResponse.response.csrf_token
I would also like to access the REST api with curl, but I only got it to work by getting and setting the session cookie. I'll have a look at the json api to see if I find a way to avoid that by just using a token.
So there is a better way to login, and it even returns an authorization token
let loginResponse = await( await fetch("/api/accounts/login?include_auth_token", {
"headers": { "Content-Type": "application/json"},
"body": JSON.stringify({email:"[email protected]", password:"password"}),
"method": "POST",
})).json();
let authToken = loginResponse.response.user.authentification_token
However the documentation says "Token to be used in future token-based API calls". Does that mean the token-based API calls are not implemented yet?
Ha! It is implemented.
curl 'http://127.0.0.1:5000/api/hello' -H 'Authentication-Token: WyIxIiwiJDUkcm91...'
Awesome! a couple things- as mentioned in the security patterns section of the doc - using the AuthenticationToken for your actual UI is not best practice - using the session cookie is - and of course, the web browser will do all that for you. This is why I like PostMan rather than curl - since it is easy to set it up to send the cookie.
Second - it is useful to disable CSRF while you are developing since that can be a pain - however once you get your UI going - as documented - there are easy ways to (without code) get your SPA to extract the CSRF cookie and send it as a header.
Glad you are on your way.
Basically when building a SPA - you really have 2 distinct applications - Python/Flask server and a JS UI. For the Flask Server you talk to it using the json api - this is documented here.
Is it possible to add the provided link to the openapi documentation to the official documentation? I was not able to find the link in the docs.
I think we have what we need ... additional insights, documentation PRs, etc - always welcome.