Hoe kan ik detecteren of een gebruiker al is aangemeld bij Firebase?

Ik gebruik de firebase node-api in mijn javascript-bestanden voor aanmelding bij Google.

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

Dit werkt prima en de gebruiker kan inloggen met zijn Google-inloggegevens. Wanneer de gebruiker de pagina opnieuw bezoekt, wordt de pop-up weer geopend, maar aangezien hij al is ingelogd, wordt de pop-up gesloten zonder dat er enige tussenkomst van de gebruiker nodig is. Is er een manier om te controleren of er al een ingelogde gebruiker is voordat de pop-up wordt weergegeven?

Antwoord 1, autoriteit 100%

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

U moet een waarnemer voor het wijzigen van de auth-status toevoegen.

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

Antwoord 2, autoriteit 60%

U kunt ook controleren of er een currentUser

. is

var user = firebase.auth().currentUser;
if (user) {
  // User is signed in.
} else {
  // No user is signed in.
}

Antwoord 3, autoriteit 25%

Het is niet mogelijkom te zeggen of een gebruiker zalwordt ondertekend wanneer een pagina begint te laden, er is echter een oplossing om dit te omzeilen.

U kunt de laatste verificatiestatus onthoudenin localStorage om deze tussen sessies en tussen tabbladen te bewaren.

Als de pagina begint te laden, kunt u er optimistisch van uitgaan dat de gebruiker automatisch opnieuw wordt aangemeld en het dialoogvenster uitstellen totdat u het zeker weet (dwz nadat onAuthStateChangedis geactiveerd). Anders, als de localStorage-sleutel leeg is, kunt u het dialoogvenster meteen weergeven.

De gebeurtenis firebase onAuthStateChangedwordt ongeveer 2 secondenna het laden van een pagina geactiveerd.

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

Ik gebruik dit met Reacten react-router. Ik heb de bovenstaande code in componentDidMountvan mijn App-rootcomponent geplaatst. Daar, in de render, heb ik een aantal PrivateRoutes

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

En zo is mijn PrivateRoute geïmplementeerd:

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

Antwoord 4, autoriteit 15%

In dit scenario is het niet nodig om de functie onAuthStateChanged() te gebruiken.

U kunt eenvoudig detecteren of de gebruiker is aangemeld of niet door het volgende uit te voeren:

var user = firebase.auth().currentUser;

Voor degenen die met het “returning null”-probleem worden geconfronteerd, is dit gewoon omdat u niet wacht tot de firebase-aanroep is voltooid.

Stel dat u de inlogactie uitvoert op pagina A en vervolgens pagina B aanroept, op pagina B kunt u de volgende JS-code aanroepen om het verwachte gedrag te testen:

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

Als de gebruiker is ingelogd, bevat “var user” de verwachte JSON-payload, zo niet, dan is het gewoon “null”

En dat is alles wat je nodig hebt.

Met vriendelijke groeten

Antwoord 5, autoriteit 5%

Dit werkt:

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

Antwoord 6, autoriteit 4%

Een andere manier is om hetzelfde te gebruiken als wat Firebase gebruikt.

Als een gebruiker zich bijvoorbeeld aanmeldt, slaat Firebase onderstaande gegevens op in lokale opslag.
Wanneer de gebruiker terugkeert naar de pagina, gebruikt firebase dezelfde methode om te bepalen of de gebruiker automatisch moet worden ingelogd.

ATTN: aangezien dit niet wordt vermeld of aanbevolen door firebase. Je kunt deze methode een onofficiële manier noemen om dit te doen. Wat betekent dat als firebase later hun innerlijke werking verandert, deze methode mogelijk niet werkt. Of in het kort. Gebruik op eigen risico! 🙂

Antwoord 7, autoriteit 2%

Als u zowel anonieme gebruikers als gebruikers die met e-mail zijn ingelogd toestaat, kunt u firebase.auth().currentUser.isAnonymousgebruiken, dat ofwel trueof false.

Antwoord 8

Er zijn technisch 3 mogelijkheden met beloften:

// 1) best option, as it waits on user...
const isLoggedIn: any = await new Promise((resolve: any, reject: any) =>
this.afa.onAuthStateChanged((user: any) =>
  resolve(user), (e: any) => reject(e)));
console.log(isLoggedIn);
// 2) may experience logging out state problems...
const isLoggedIn2 = await this.afa.authState.pipe(first()).toPromise();
console.log(isLoggedIn2);
// 3) technically has a 3rd option 'unknown' before user is loaded...
const isLoggedIn3 = await this.afa.currentUser;
console.log(isLoggedIn3);
// then do something like (depending on your needs) with 1, 2, or 3:
if (!!isLoggedIn) {
  // logged in
}

Houd er rekening mee dat het voorbeeld hoekig is, maar u kunt this.afavervangen door firebase.auth()

Antwoord 9

gebruik Firebase.getAuth(). Het retourneert de huidige status van de Firebase-client. Anders is de retourwaarde nullHier zijn de documenten: https://www.firebase.com/docs/web/api/firebase/getauth.html

Antwoord 10

Importeer eerst het volgende

import Firebase
import FirebaseAuth

Dan

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