[FIXED] Google Authentication - making it from 2 buttons work with 1 button on cakephp

Issue

I am using cakephp to do a google authentication register. I managed to make it work and managed to get all the user's info(name, surname and email from the authenticated User info) and stored them in hidden values and passed them using cakephp to the database. However, I managed to do this with 2 buttons. The first button calls the button (using javascript) that authenticates the google account and assign the values (name, surname and email) to the hidden form inputs, and the second button is the actual $this->Form->button, which adds the user, with all his info, in the database..

Now, ofcourse, this is incorrect as normally, you would just have 1 button that registers you and then logs you, (or logs you in if you already registered before). Therefore, I tried doing the form button with onclick="googleAuthentication" but it kept doing the authentication and trying to register the user without values (It did not assign values to the hidden fields).. What can I do to solve this? I want to somehow, add the form in the googleAuthentication method, if that's possible..

This is the code for the version with 2 buttons that works perfectly:

Form using cakephp:

echo $this->Form->create($user);
    echo $this->Form->hidden('first_name', ['id' => 'nameInput'], ['value' => '']);
    echo $this->Form->hidden('last_name', ['id' => 'surnameInput'], ['value' => '']);
    echo $this->Form->hidden('email', ['id' => 'emailInput'], ['value' => '']);
    echo $this->Form->hidden('role_id', ['value' => '2']);
    echo $this->Form->hidden('password', ['value' => 'N/A']);

The button that calls the method to do the google authentication:

<button type="button" class="btn btn-warning col-md-12" onclick="googleSignIn()">Google Authenticate</button>

The method that does the autentication:

function googleSignIn(){
    var provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then(function(result){
        var user = result.user;
        var fullName = user.displayName;

        var index = fullName.indexOf(" ");
        var name = fullName.substr(0, index);
        var surname = fullName.substr(index + 1);
        var email = user.email;

        document.getElementById('nameInput').value = name;
        document.getElementById('surnameInput').value = surname;
        document.getElementById('emailInput').value = email;
        console.log("Success Google Account Linked");

    }).catch(function(err){
        console.log(err);
        console.log("Failed to do");
    })

Solution

Is it possible to add a javascript command to trigger the click action of your other button (or just submit the now complete form)?

Or is there a reason the user needs to see the form before submission?

function googleSignIn(){
    var provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then(function(result){
        var user = result.user;
        var fullName = user.displayName;

        var index = fullName.indexOf(" ");
        var name = fullName.substr(0, index);
        var surname = fullName.substr(index + 1);
        var email = user.email;

        document.getElementById('nameInput').value = name;
        document.getElementById('surnameInput').value = surname;
        document.getElementById('emailInput').value = email;
        console.log("Success Google Account Linked");

        document.getElementById('userSubmitButton).click();

    }).catch(function(err){
        console.log(err);
        console.log("Failed to do");
    })

Don Drake

Answered By - Don Drake