Angular SPA authentication with Azure AD

Question

Hi I am working on Angular SPA and web API core. I am trying to implement authentication and authorization. I have done as below for now.

1. Registered one application for my front end application and added required redirect uri and modified manifest file to enable implicit flow. Also assigned some of the roles to it.
2. Registered one more application for my back end. I added scope in the form api/clientid. Then added client application id which is created in step 1.
3. User is successfully able to login to application.
4. Now my JWT token has roles in claim. In my API I have added [Authorize(Roles = "Engineers,Admins")]
5. So If user has any role Engineers or Admins in the JWT token as claims then they are allowed to access my API's
6. So far my authorization works fine. But coming to authentication part, currently all users of my azure AD tenant able to do login(User can hit my front end url and add user name and password then It will ask MFA and they will be landed in application home page).
7. If user is part of any of the roles above then only they can see data in home page because in home page I am calling some of the API's and I have added [Authorize(Roles = "Engineers,Admins")].
8. If suppose user is not part of above role they are still able to login (login means they are able to add user name and password and MFA) they will be landed in home page but they cannot see any data because api will be accessed only if they are part of Engineers,Admins roles.
9. My question is If user is not part of Engineers,Admins roles why they are able to login and come to home page. They should be restricted in Login step itself.
10. I am not really sure I am asking right thing here or I only confused my self between authentication vs authorization.
11. Currently I am doing authorization based on roles. Same thing I can accomplish using Groups also. In claims I can return groups and create policies and do the authorization. If user is part of the group then I can authorize. I am trying to understand what advantage I will get using roles over the groups.
12. Currently I have dev, prod and non prod environments. But Azure AD is universal and for there is no environment for azure AD. So Is it a good idea to have separate application registered in azure ad between the environments or can I use same app registered in azure AD between the environments. If I create separate application for each environments what advantage I will get?

I am really trying to understand above concepts and can someone give me some insights on the above things? It will be really helpful to me If someone help me to understand this concepts. Any help would be greatly appreciated. Thank you