Open a tab, passing data brought from the firebase result

Question

Guys, I’m testing how firebase authentication works, I can authenticate anyway(Github, FB, Twitter, Google) but I can only use the result data on the homepage. I would like to know how I could open another tab and be able to use the return data from firebase, because the data from my result is only available on the homepage. I even try to open a tab using window.location.href but I don’t know if it is possible to pass the result data.

HTML home page(index.html)

 <button  id="authGitHubButton">
       Log in with GitHub
 </button>

Javascript

// Autenticar com GitHub

var authGitHubButton = document.getElementById('authGitHubButton');

    authGitHubButton.addEventListener('click', function () {
        // Providers
        var provider = new firebase.auth.GithubAuthProvider();
        window.location.href = "/access.html";
        signIn(provider);
    });

function signIn(provider) {
    firebase.auth()
        .signInWithPopup(provider)
        .then(function (result) {
            console.log(result);
            var token = result.credential.accessToken;
            displayName.innerText = 'Ola, ' + result.user.displayName;
            photoURL.setAttribute("src", result.user.photoURL);
            photoURL.style.display = 'block';
        }).catch(function (error) {
            console.log(error);
            alert('Falha na autenticação');
        });
}

HTML new tab(access.html)

   <h3 id="displayName"></h3>
   <img class="photoURL text-center image-responsive" id="photoURL" src=""></img>

Answer 1

I believe you are using the callback approach to receive the data, but when using Firebase we sometimes use events to process this information.

When using:

firebase.auth()
    .signInWithPopup(provider)
    .then(function (result) { ...

The resulting data will only be computed at that time, but the Firebase API provides you with an access token to the desired platform to gain direct access to the authentication Provider API, as per documentation:

    firebase.auth().signInWithPopup(provider).then(function(result) {
    // Isto te dá um token de acesso ao Google. Você pode utilizar ele para accessar a Google API.
    var token = result.credential.accessToken;
    // A informação do usuário logado.
    var user = result.user;
    // ...
    }).catch(function(error) {
    // Handle Errors here.
    // ...
    });

But in the case of Firebase authentication and user data you can register a function that will be executed as soon as Firebase logs in/out, forwarding user data, this event is also triggered when the page is reloaded and login is still active (the token is still valid) and will be executed when Firebase loads and detects and validates the token, as per documentation:

    firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        // User is signed in.
        var displayName = user.displayName;
        var email = user.email;
        var emailVerified = user.emailVerified;
        var photoURL = user.photoURL;
        var isAnonymous = user.isAnonymous;
        var uid = user.uid;
        var providerData = user.providerData;
        // ...
    } else {
        // User is signed out.
        // ...
    }
    });

This method is executed no matter which authentication method is used.