AJAX login form - sage site path

I’am created custom AJAX login form

When url of site is http://example.com and I am logged, its ok

but when I try to go into the admin panel, I redirect to the login page, and the url of the site is something like this http://example.com/wp

and IF I reload page, I am logout

This my login code php

<?php

namespace App;

class auth
{
	public function __construct()
	{
		add_action('wp_ajax_am_login', [$this, 'loginAm']);
		add_action('wp_ajax_nopriv_am_login', [$this, 'loginAm']);
	}

	public function loginAm()
	{
		check_ajax_referer( 'ajax-login-nonce', 'am_auth');
		$info = array();
		$info['user_login'] = $_POST['login'];
		$info['user_password'] = $_POST['password'];
		$info['remember'] = isset($_POST['login-remember']) ? true : false;
		$user_signon = wp_signon( $info, true );
		if ( is_wp_error( $user_signon) ) {
			echo json_encode(
				array(
					'status' => false,
					'message' => pll__('Wrong username or password')
				)
			);
			die();
		}
		echo json_encode(
			array(
				'status' => true,
				'message' => pll__('Login successful, redirecting...')
			)
		);
		die();
	}
}

new auth();

HTML form

<form id="amLogin" action="#" method="post" data-url="{{ admin_url('admin-ajax.php') }}">
				<p class="status" data-message="status"></p>
				<div class="field-group clearable">
					<span class="clean-form-field-am"></span>
					<input type="text" name="login" id="loginInput" class="form-field-am" placeholder="{{ pll__('Login') }}">
					<label class="form-label-am" for="loginInput">{{ pll__('Login') }}</label>
				</div>
				<div class="field-group password-group">
					<span class="visible-pass-am"></span>
					<input type="password" name="password" id="passwordInput" class="form-field-am password-field-am"
								 placeholder="{{ pll__('Password') }}">
					<label class="form-label-am password-label" for="passwordInput">{{ pll__('Password') }}</label>
				</div>
				<div class="remember-block">
					<div id="forgotPassBtn">{{ pll__('Forgot your password?') }}</div>
					<div class="checkbox-wrap-am">
						<input type="checkbox" id="loginRemember" class="styled-checkbox-am" name="login-remember" checked>
						<label for="loginRemember">{{ pll__('Remember me') }}</label>
					</div>
				</div>
				<div class="field-group">
					<input id="loginSubmit" type="submit" class="btn-am btn-am--black form-btn-am" value="{{ pll__('Login') }}">
				</div>
				<input type="hidden" name="action" value="am_login">
				{!! wp_nonce_field( 'ajax-login-nonce', 'am_auth', false, false ) !!}
			</form>

JS file

document.addEventListener('DOMContentLoaded', function () {
	const authForm = document.getElementById('amLogin'),
		status = authForm.querySelector('[data-message="status"]');

	authForm.addEventListener('submit', e => {
		e.preventDefault();

		resetMessages();

		let data = {
			name: authForm.querySelector('[name="login"]').value,
			password: authForm.querySelector('[name="password"]').value,
			nonce: authForm.querySelector('[name="am_auth"]').value,
		};

		if (!data.name || !data.password) {
			status.style.display = 'block';
			status.innerHTML = 'Missing Fields';
			status.classList.add('error');
			return;
		}

		let url = authForm.dataset.url;
		let params = new URLSearchParams(new FormData(authForm));

		document.getElementById('loginSubmit').value = 'Logging in...';
		document.getElementById('loginSubmit').disabled = true;

		fetch(url, {
			method: 'POST',
			body: params,
		}).then(res => res.json())
			.catch(error => {
				resetMessages();
				console.log(error);
			})
			.then(response => {
				resetMessages();

				if (response === 0 || !response.status) {
					status.style.display = 'block';
					status.innerHTML = response.message;
					status.classList.add('error');
					return;
				}

				status.style.display = 'block';
				status.innerHTML = response.message;
				status.classList.add('success');

				authForm.reset();
				window.location.reload();
			})
	});

	function resetMessages() {
		status.style.display = 'none';
		status.innerHTML = '';
		status.classList.remove('success', 'error');

		document.getElementById('loginSubmit').value = 'Login';
		document.getElementById('loginSubmit').disabled = false;
	}
});

This topic was automatically closed after 42 days. New replies are no longer allowed.