apache2とxamppで利用しているポートが同じであるため、Basic認証とWebページの表示が一度にできない。

前提・実現したいこと

ubuntuでログイン機能を持つWebページを作成しており、そこにBasic認証を実装しようとしています。
【実現させたい動作】
ubuntuのfirefoxでURLを入力し実行すると、Basic認証によりIDとパスワードを求められ、それを入力するとログインページが表示されるようにしたい。

発生している問題・エラーメッセージ

apache2を動かすために利用しているポートと、xamppを動かすために利用しているポートが同じであるため、ポート競合が起き、両方を同時に動かすことができません。
●apache2を動かしてxamppを止めていると、Basic認証はできるが入力後にログインページが表示されずエラーコード【The requested URL was not found on this server.　Apache/2.4.29 (Ubuntu) Server at localhost Port 80】が表示される。
●xamppを動かしてapache2を止めていると、ログインページは表示されるが、Basic認証が機能していない

該当のソースコード

Basic認証を実装する際に記述したコード
/var/www/htmlに以下の2つを記述
【.htaccess】
AuthType basic
AuthName "Auth"
AuthUserFile /var/www/html/.htpasswd
Require valid-user
【.htpasswd】
root:$2y$10$lG7cw.h2XYWVH8PFKfJ9ze0P9UbO7weUG0/gueM35sSm7wIzcg42a
userA:$2y$10$yymGm6QJBadBm9r7lABtNeAHHxQUCmaLOj1r/9deLvIldzxvHagc6
userB:$2y$10$Yag8EhNfjk0l.Uach/2VGOnAYo2fG5e0yjnHtBAqBAGyptpe81L8q

.htpasswdのパスワード部分は、すでにハッシュ化させたものを記述しています。

試したこと

ポートの競合を防ごうと、xamppを動かすために利用するポートを以下の手順で変更しようとしたのですが、改善できませんでした。
【行ったこと】
●/opt/lampp/etc/httpd.confのListen 80をListen 8080に変更
●/opt/lampp/etc/extra/httpd-ssl.confのListen 443をListen 8081に変更
●/opt/lampp/lamppのListen 80を8080に、Listen 443をListen 8081に変更
●/opt/lampp/lampp restartによりxamppを再起動