PHP авторизация и регистрация в модальном окне

auth.php
<?php 
include "pages/header.php"; 
// Определяем список разрешенных страниц 
$allowed_pages = array('login', 'register', 'confirm', 'reset', '2fa', 'otp' , 'edit' ,'upload' ,'delete');
$page = $_GET['page'] ?? 'login'; // По умолчанию 'login'
?>   
	<main>
        <article>
            <section>
                <div class="container">
					<?php
					// Получаем значение из URL: index.php?page=login
					// Проверьте, находится ли запрошенная страница в списке разрешенных.
					if (in_array($page, $allowed_pages)) {
						// Безопасно подключить внешний файл
						include('pages/' . $page . '.php');
					} else {
						// Обработать некорректный запрос страницы (страница не найдена).
						echo 'Page not found.';
						}
					?>
                </div>
            </section>
        </article>
    </main>
<?php include "pages/footer.php"; ?>
index.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
/* Задаем стили для всех кнопок */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
/* Дополнительные стили для кнопки отмены */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}
/* Добавляем обтекание и одинаковую ширину для кнопок отмены и регистрации */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}
/* Модальное окно (фон) */
.modal {
  display: none; /* По умолчанию скрыто */
  position: fixed; /* Оставаться на месте */
  z-index: 1; /* Поверх всего */
  left: 0;
  top: 0;
  width: 100%; /* На всю ширину */
  height: 100%; /* На всю высоту */
  overflow: auto; /* Разрешить прокрутку при необходимости */
  background-color: #474e5d;
  padding-top: 50px;
}
/* Кнопка закрытия (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}
.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}
/* Очистка обтекания */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Изменяем стили кнопок отмены и регистрации на маленьких экранах */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
}
</style>
</head>
<body>
<h2>Модальная форма регистрации</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Регистрация</button>
<h2>Пример модального окна</h2>
    <div>
	Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать 
	несколько абзацев более менее осмысленного текста рыбы на русском языке, а 
	начинающему оратору отточить навык публичных выступлений в домашних условиях. 
	При создании генератора мы использовали небезизвестный универсальный код речей. 
	Текст генерируется абзацами случайным образом от двух до десяти предложений в 
	абзаце, что позволяет сделать текст более привлекательным и живым для визуально
	-слухового восприятия.
 
	По своей сути рыбатекст является альтернативой традиционному lorem ipsum, 
	который вызывает у некторых людей недоумение при попытках прочитать рыбу текст. 
	В отличии от lorem ipsum, текст рыба на русском языке наполнит любой макет 
	непонятным смыслом и придаст неповторимый колорит советских времен.
	</div>
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Закрыть">&times;</span>
    <?php include "auth.php"; ?>
</div>
<script>
// Получим модальное окно
var modal = document.getElementById('id01');
// Когда пользователь кликнет за пределами модального окна, закроем его
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
</body>
</html>