Our Situation:
we are in the process of developing a concept for a login screen, for a palette of different online apps.
all online apps should be available via the same login, depending on the associated user group.
available online apps should be listed after login.
except for the security service, all apps are independent of each other, they can be hosted on separate servers, etc.
- the online applications are React apps (based on TypeScript).
- the backend runs with Django (based on Python).
(the backend framework is fixed for specific technical reasons and will be django, we need no suggestions for a different backend framework)
now we are looking for the best prectise and sefest method to prevent insights and attacks as much as possible.
Our Conecpt:
our idear for this is, to build the login application with react and render the frontend on server site (with express and babel). so, the maximum visible communication transfair with the server, will be the user credentials to the server.
Login Form (React App / Server Side Rendering):
- Login screen as standalone app for all restricted apps
- Server site website rendering
- Server site authentication (no API call)
- Login credentials: "username" and "password"
- List available apps after sucessfull authentication
- Redirect with given token to selected app
Backend Services (Node.js, Express, Babel & React):
- Render login form
- Check inputs from login form
- Send given user credentials to server
- Check user groups for available apps
- Render list of available apps
Backend Services (Django):
- Check username and password input
- Create JSON Web Token (JWT)
- Check JWT and app access
Restricted Single App:
- Check if client came from Login-Page
- Check JSON Web Token (JWT)
- Redirect to login page if JWT is incorrect
unfortunately we are mainly developers and not security specialists. so, maybe someone here has a better idea, something to add that we have overlooked or can say why is this a bad solution?
many thanks in advance for your suggestions!