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

Question

J'utilise l'api firebase node 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 si un utilisateur s'est déjà connecté avant d'afficher la fenêtre contextuelle ?

Answer 1

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.
  }
});

Answer 2

Vous pouvez également vérifier s'il existe un currentUser

var user = firebase.auth().currentUser;

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

Answer 3

Il est pas possible pour savoir si un utilisateur sera être signé lorsqu'une page commence à se charger, il existe cependant une solution de contournement.

Vous pouvez mémoriser le dernier état d'authentification à localStorage pour le faire persister entre les sessions et entre les onglets.

Ensuite, lorsque la page commence à se charger, vous pouvez supposer de manière optimiste que l'utilisateur sera automatiquement réinscrit et reporter la boîte de dialogue jusqu'à ce que vous en soyez certain (c'est-à-dire après onAuthStateChanged feux). Sinon, si le localStorage est vide, vous pouvez afficher la boîte de dialogue immédiatement.

La base de feu onAuthStateChanged se déclenchera grossièrement 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()
  }
})

---

Je l'utilise avec React y react-router . J'ai mis le code ci-dessus dans componentDidMount de mon composant App Root. Là, dans le rendu, j'ai quelques PrivateRoutes

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

Et voici comment mon PrivateRoute est implémenté :

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}}}
    // />

Answer 4

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 rencontrent le problème du "returning null", c'est simplement parce que vous n'attendez pas que l'appel à Firebase soit terminé.

Supposons que vous exécutez l'action de connexion sur la page A et que vous invoquez ensuite 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, ce sera juste "null".

Et c'est tout ce dont vous avez besoin.

Salutations

Answer 5

Utiliser Firebase.getAuth() . Il retourne l'état actuel du client Firebase. Sinon, la valeur de retour est null Voici les documents : https://www.firebase.com/docs/web/api/firebase/getauth.html