I want my dapp to allow a new user when submitting a sign up to create an ethereum address with his provided password of his choice and next time when he logs into dapp, he must be able to login with his password with which he must be able to do transactions. I am aware that the user needs to have the private key to sign transactions. I am confused how his password can help him get his private key only when he needs it. I am building an html/js based dapp which communicates with ethers.js to ethereum rinkeby testnet.
You are addressing exactly one of the main pain points for (web) dApp development.
So basically to achieve what you want to do you need to store the private key in some secure place and secure it with the password (as you mentioned youself) - a typical web application would just be using a server to perform such actions. So one way to achieve this would be to add some server side code to store and fetch the keys, but who wants to have a server in a decentralized world, right?
So one approach to this would be to store the private key in the localstorage of the browser and encrypt it with the passphrase to come across the insecurity of that - issue here unfortunately is that there is no real guarantee for persistence since localstorage can be wiped and also this only works in the browser you set it up.
Another way would be to have the user insert his private key each time he is accessing your application which is rather invonvenient.
To conclude imo the only real safe way to do such stuff is using a native application that stores the data locally and that doesn't expose the private key at all.