I struggled with this for a while and tried different solutions.
Usually wound up with 404 errors whenever trying to navigate to the files in the “protected” directory.
The best one (and easiest I found) was to simply add 2 lines to the wordpress .htaccess file.
ErrorDocument 401 ./error.html
ErrorDocument 403 ./error.html
This stops WordPress from causing 404 errors when apache sends a 403 code to the browser to indicate that a login is required.
You should then be able to use the .htaccess basic authentication on the directory.