Open a tab, passing data fetched from the result of firebase

Question

Open a tab, passing data fetched from the result of firebase

Navigation

#1 by (1 votes)

0

Dear, I'm testing how firebase authentication works, I can authenticate anyway (Github, FB, Twitter, Google) but I can only use result data on the home page. I would like to know how I could open another tab and be able to use the firebase return data, because the data in my result is only available on the start page. So I try to open a tab using window.location.href but I do not 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');
        });
}

New HTML tab (access.html)

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

javascript firebase

asked by anonymous 12.01.2018 / 19:11

1 answer

How to run maven dependencies? How to call a new Activity through a conditional structure that tests the connection?

score 1 · Accepted Answer

I believe you are using the callback approach to receive 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 a platform access token you want to have direct access to the authentication provider API, as 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, passing 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 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.