Role based Authentication

I am developing a user authentication screen.
I am using config.yml based approach to implementing the logic.
reference link : Streamlit-Authenticator, Part 1: Adding an authentication component to your app

What i am looking for is that in the login screen in addition to Username and Password. A dropdown with Label “Role” to be shown(Principal or Teacher).
Based on the details provided (Username, Password, and Role). The role-based page should be shown. i.e., the view of each page is different
Is this approach possible via the config.yml approach? or some other approach is required to achieve this functionality.
PFA image.

An interesting need, a principal accessing the teachers’ page is normal, but teachers accessing the principal’s page is something.