I can get the user name now and everything is working fine. However, if there is anything you think I should remove or add to my login config for authorization code flow with pkce pls feel free to comment.
It sounds like you figured out that you needed to include the ‘profile’ scope in order to receive the preferred username (and many other user profile related claims).
You should not need to change the responseType to id_token (thereby using Implicit flow instead), as Authorization Code flow with PKCE will return both the ID token and the Access token, and getUser() will still be able to get the username.
This doc outlines which claims are scope dependent and indicates which claims you can expect to be returned (if a value is present for the given user) for the profile scope: