Comment détecter si un utilisateur est déjà connecté à Firebase?

J'utilise l'api du nœud Firebase dans mes fichiers javascript pour la connexion à Google.

firebase.initializeApp(config);
let provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider);

Cela fonctionne bien et l'utilisateur peut se connecter avec ses informations d'identification Google. Lorsque l'utilisateur visite à nouveau la page, la fenêtre contextuelle s'ouvre à nouveau mais comme il s'est déjà connecté, la fenêtre contextuelle se ferme sans nécessiter d'interaction de la part de l'utilisateur. Existe-t-il un moyen de vérifier s'il y a déjà un utilisateur connecté avant d'afficher le popup?

https://firebase.google.com/docs/auth/web/manage-users

Vous devez ajouter un observateur de changement d'état d'authentification.

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

Vous pouvez également vérifier s'il existe un utilisateur actuel

var user = firebase.auth().currentUser;

if (user) {
  // User is signed in.
} else {
  // No user is signed in.
}

Il n'est pas possible de dire si un utilisateur sera signé lorsqu'une page commence à se charger, il y a cependant un contournement.

Vous pouvez mémoriser le dernier état d'authentification dans localStorage pour le conserver entre les sessions et entre les onglets.

Ensuite, lorsque la page commence à se charger, vous pouvez supposer avec optimisme que l'utilisateur se reconnectera automatiquement et reporter la boîte de dialogue jusqu'à ce que vous soyez sûr (c'est-à-dire après les onAuthStateChangedincendies). Sinon, si la localStorageclé est vide, vous pouvez afficher la boîte de dialogue immédiatement.

L' onAuthStateChangedévénement Firebase se déclenchera environ 2 secondes après le chargement d'une page.

// User signed out in previous session, show dialog immediately because there will be no auto-login
if (!localStorage.getItem('myPage.expectSignIn')) showDialog() // or redirect to sign-in page

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // User just signed in, we should not display dialog next time because of firebase auto-login
    localStorage.setItem('myPage.expectSignIn', '1')
  } else {
    // User just signed-out or auto-login failed, we will show sign-in form immediately the next time he loads the page
    localStorage.removeItem('myPage.expectSignIn')

    // Here implement logic to trigger the login dialog or redirect to sign-in page, if necessary. Don't redirect if dialog is already visible.
    // e.g. showDialog()
  }
})

<Router>
  <Switch>
    <PrivateRoute
      exact path={routes.DASHBOARD}
      component={pages.Dashboard}
    />
...

Et voici comment ma PrivateRoute est implémentée:

export default function PrivateRoute(props) {
  return firebase.auth().currentUser != null
    ? <Route {...props}/>
    : localStorage.getItem('myPage.expectSignIn')
      // if user is expected to sign in automatically, display Spinner, otherwise redirect to login page.
      ? <Spinner centered size={400}/>
      : (
        <>
          Redirecting to sign in page.
          { location.replace(`/login?from=${props.path}`) }
        </>
      )
}

    // Using router Redirect instead of location.replace
    // <Redirect
    //   from={props.path}
    //   to={{pathname: routes.SIGN_IN, state: {from: props.path}}}
    // />

Il n'est pas nécessaire d'utiliser la fonction onAuthStateChanged () dans ce scénario.

Vous pouvez facilement détecter si l'utilisateur est connecté ou non en exécutant:

var user = firebase.auth().currentUser;

Pour ceux qui sont confrontés au problème du "retour de null", c'est simplement parce que vous n'attendez pas que l'appel Firebase se termine.

Supposons que vous exécutiez l'action de connexion sur la page A, puis que vous invoquiez la page B, sur la page B, vous pouvez appeler le code JS suivant pour tester le comportement attendu:

  var config = {
    apiKey: "....",
    authDomain: "...",
    databaseURL: "...",
    projectId: "..",
    storageBucket: "..",
    messagingSenderId: ".."
  };
  firebase.initializeApp(config);

    $( document ).ready(function() {
        console.log( "testing.." );
        var user = firebase.auth().currentUser;
        console.log(user);
    });

Si l'utilisateur est connecté, alors "var user" contiendra la charge utile JSON attendue, sinon, alors ce sera simplement "null"

Et c'est tout ce dont vous avez besoin.

Cordialement

Une autre manière est d'utiliser la même chose que celle utilisée par Firebase.

Par exemple, lorsque l'utilisateur se connecte, Firebase stocke les détails ci-dessous dans le stockage local. Lorsque l'utilisateur revient sur la page, Firebase utilise la même méthode pour identifier si l'utilisateur doit être connecté automatiquement.

ATTN: car cela n'est ni répertorié ni recommandé par Firebase. Vous pouvez appeler cette méthode une manière non officielle de faire cela. Ce qui signifie que plus tard, si Firebase modifie son fonctionnement interne, cette méthode peut ne pas fonctionner. Ou en bref. À utiliser à vos risques et périls! :)

Cela marche:

async function IsLoggedIn(): Promise<boolean> {
  try {
    await new Promise((resolve, reject) =>
      app.auth().onAuthStateChanged(
        user => {
          if (user) {
            // User is signed in.
            resolve(user)
          } else {
            // No user is signed in.
            reject('no user logged in')
          }
        },
        // Prevent console error
        error => reject(error)
      )
    )
    return true
  } catch (error) {
    return false
  }
}

Si vous autorisez les utilisateurs anonymes ainsi que ceux connectés par e-mail, vous pouvez utiliser firebase.auth().currentUser.isAnonymous, qui renverra soit trueou false.

utiliser Firebase.getAuth(). Il renvoie l'état actuel du client Firebase. Sinon, la valeur de retour est nullVoici la documentation: https://www.firebase.com/docs/web/api/firebase/getauth.html

Importez d'abord les éléments suivants

import Firebase
import FirebaseAuth

ensuite

    // Check if logged in
    if (Auth.auth().currentUser != null) {
      // User is logged in   
    }else{
      // User is not logged in
    }