asymmetric – Need some clarification regards end-to-end encryption process

Let’s say I want to make a messaging(just an example, take it as any data) web(react + node) application(more like an email rather than chat) with end-to-end encryption. So at some point, I will want to send an encrypted(with public key) message and the recipient will need to decrypt it(with private key). Now, say I want to make an encryption process happen on the client(isn’t always should be on the client?), so:

  1. user_1 want to send a message to user_2
  2. user_1 requests public key of user_2
  3. user_1 encrypt his message with public key from step 2 and sends it
  4. user_2 receive the message and decrypt it with his private key

Now, all sounds great, but…:

  1. For good UX, a user should know/care only about his own password and all the encryption should magically happen(right?), so generating and storing private key should be done behind the scenes. But how exactly? Storing private key encrypted with user’s password, and on the Auth process, send it to the client and then decrypt the private key and store locally for the session. Is that really supposed to be like that?
  2. Where to store the private key then exactly? Storing in local host isn’t really nice due to XSS, storing inside a cookie(secured, samesite etc) also isn’t nice due to same XSS and CSRF. Where then?
  3. Also, it isn’t really clear how to secure the connection between the client and the server. Is using SSL(https) really enough? What else can be done?

Thanks