1wordpress-google-apple-signin-signup-firebase.php

<?php
function enqueue_firebase_scripts() {
  // Enqueue Firebase SDK compat versions for compatibility with WordPress
  wp_enqueue_script('firebase-app', 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js', [], null, true);
  wp_enqueue_script('firebase-auth', 'https://www.gstatic.com/firebasejs/9.6.10/firebase-auth-compat.js', ['firebase-app'], null, true);

  // Custom Firebase script
  wp_enqueue_script(
    'firebase-auth-script',
    get_stylesheet_directory_uri() . '/assets/js/firebase-auth.js',
    ['jquery', 'firebase-app', 'firebase-auth'], // Dependencies
    time(),
    true
  );

  // Pass Firebase configuration and WordPress AJAX URL to the script
  wp_localize_script('firebase-auth-script', 'firebaseConfig', [
      'apiKey' => 'xxxxxxxxxxxxxxxxxx',
    'authDomain' => 'xxxxxxxxxxxxxxxxxx',
    'projectId' => 'xxxxxxxxxxxxxxxxxx',
    'storageBucket' => 'xxxxxxxxxxxxxxxxxx',
    'messagingSenderId' => 'xxxxxxxxxxxxxxxxxx',
    'appId' => 'xxxxxxxxxxxxxxxxxx',
    'measurementId' => 'xxxxxxxxxxxxxxxxxx',
    'ajaxUrl' => admin_url('admin-ajax.php'),
  ]);
}
add_action('wp_enqueue_scripts', 'enqueue_firebase_scripts');

add_action('wp_ajax_nopriv_firebase_login', 'handle_firebase_login');
add_action('wp_ajax_firebase_login', 'handle_firebase_login'); // For logged-in users as well

function handle_firebase_login() {
    // Make sure we check for the required data in $_POST
    if (isset($_POST['email'], $_POST['uid'], $_POST['displayName'])) {
        $email = sanitize_email($_POST['email']);
        $uid = sanitize_text_field($_POST['uid']);
        $display_name = sanitize_text_field($_POST['displayName']);

        // Check if user exists
        $user = get_user_by('email', $email);
        if (!$user) {
            // Register user
            $user_id = wp_create_user($display_name, wp_generate_password(), $email);
            update_user_meta($user_id, 'firebase_uid', $uid);
        } else {
            $user_id = $user->ID;
        }

        // Log user in
        wp_set_current_user($user_id);
        wp_set_auth_cookie($user_id);

        // Send response back to the frontend
        wp_send_json_success(['message' => 'Login successful']);
    } else {
        wp_send_json_error(['message' => 'Invalid data received']);
    }
}

2buttons.html

<button id="googleSignIn">Sign in with Google</button>
<button id="appleSignIn">Sign in with Apple</button>

3firebase-auth.js

jQuery(document).ready(function ($) {
    // Check if firebaseConfig is available before initializing Firebase
    if (typeof firebaseConfig !== 'undefined') {
      const firebaseConfigObject = {
        apiKey: firebaseConfig.apiKey,
        authDomain: firebaseConfig.authDomain,
        projectId: firebaseConfig.projectId,
        appId: firebaseConfig.appId,
      };
  
      if (typeof firebase !== 'undefined') {
        firebase.initializeApp(firebaseConfigObject);
        const auth = firebase.auth();
  
        // Google Sign-In
        $('#googleSignIn').on('click', function () {
            const provider = new firebase.auth.GoogleAuthProvider();
            auth.signInWithPopup(provider)
                .then((result) => {
                    const user = result.user;
                    sendUserToWordPress(user);
                })
                .catch((error) => {
                    console.error('Google Sign-In Error:', error.message);
                });
        });

        // Apple Sign-In
        $('#appleSignIn').on('click', function () {
            const provider = new firebase.auth.OAuthProvider('apple.com');
            auth.signInWithPopup(provider)
                .then((result) => {
                    const user = result.user;
                    sendUserToWordPress(user);
                })
                .catch((error) => {
                    console.error('Apple Sign-In Error:', error.message);
                });
        });

        // Send user data to WordPress
        function sendUserToWordPress(user) {
            $.ajax({
                url: firebaseConfig.ajaxUrl,
                type: 'POST',
                data: {
                    action: 'firebase_login', // WordPress action
                    email: user.email,
                    uid: user.uid,
                    displayName: user.displayName,
                },
                success: function (response) {
                    if (response.success) {
                        window.location.href = '/dashboard'; // Redirect after successful login
                    } else {
                        console.error('WordPress Login Error:', response.data);
                    }
                },
                error: function (xhr, status, error) {
                    console.error('AJAX Error:', error);
                },
            });
        }
  
        console.log('Firebase initialized successfully.');
      } else {
        console.error('Firebase is not defined. Ensure the SDK is loaded correctly.');
      }
    } else {
      console.error('firebaseConfig is not available. Ensure wp_localize_script is properly set up.');
    }
  });