Issue with Homepage Redirection After Facebook Login
I’m currently developing a custom login page for WordPress and successfully integrated Facebook login using their SDK. The social login process is functioning correctly, and users are authenticated without problems. However, I’m facing a challenge with redirecting users to the homepage, “www.mywebsite.com”, after they log in successfully.
I’ve attempted to trigger this redirect using JavaScript, but it seems that no redirection occurs post-login. Users remain on the same page despite being logged in.
The JavaScript code I used for redirection is as follows:
jQuery.post(ajaxurl, data, function(response) {
if (response.success) {
wp_safe_redirect('/');
exit;
} else {
document.getElementById('login-form-message').innerHTML = response.message;
}
});
Here’s the complete code for Facebook login integration:
window.fbAsyncInit = function() {
FB.init({
appId: 'your-app-id',
cookie: true,
xfbml: true,
version: 'v16.0'
});
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
document.getElementById('facebook-login-button').addEventListener('click', function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', {fields: 'id,name,email'}, function(response) {
var data = {
'action': 'facebook_login',
'facebook_id': response.id,
'access_token': FB.getAuthResponse().accessToken,
'email': response.email,
'username': response.name
};
jQuery.post(ajaxurl, data, function(response) {
if (response.success) {
wp_safe_redirect('/');
exit;
} else {
document.getElementById('login-form-message').innerHTML = response.message;
}
});
});
} else {
document.getElementById('login-form-message').innerHTML = 'User cancelled or did not fully authorize Facebook login.';
}
}, {scope: 'email'});
});
}
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
And here’s the PHP code that processes the AJAX request:
function facebook_login_handler() {
$facebook_id = $_POST['facebook_id'];
$access_token = $_POST['access_token'];
$email = $_POST['email'];
$username = $_POST['username'];
$response = wp_remote_get('https://graph.facebook.com/v16.0/' . $facebook_id . '?access_token=' . $access_token);
$facebook_response = json_decode(wp_remote_retrieve_body($response), true);
if (!isset($facebook_response['id'])) {
$response = array(
'success' => false,
'message' => 'Invalid Facebook ID token'
);
echo json_encode($response);
wp_die();
}
$user = get_user_by('email', $email);
if (!$user) {
$user = get_user_by('login', $username);
}
if ($user) {
update_user_meta($user->ID, 'facebook_id', $facebook_id);
wp_set_current_user($user->ID);
wp_set_auth_cookie($user->ID);
$response = array(
'success' => true,
'message' => 'Login successful'
);
} else {
$user_data = array(
'user_login' => $username,
'user_email' => $email,
'user_pass' => wp_generate_password()
);
$user_id = wp_insert_user($user_data);
if (is_wp_error($user_id)) {
$response = array(
'success' => false,
'message' => $user_id->get_error_message()
);
echo json_encode($response);
wp_die();
} else {
update_user_meta($user_id, 'facebook_id', $facebook_id);
wp_set_current_user($user_id);
wp_set_auth_cookie($user_id);
$response = array(
'success' => true,
'message' => 'Registration and login successful'
);
}
}
echo json_encode($response);
wp_die();
}
I’d appreciate any insight on what could be causing this redirect problem.