Uspešana prijava korisnika

Ono što će ova aplikacija prikazati nakon uspešne prijave jeste prazna strana sa jednom Button komponentom na kojoj će pisati "Log out" i koja će voditi na početnu stranu. Da bi ovo funkcionisalo potrebno je da znamo da li je korisnik prijavljen ili ne i na osnovu toga prikazivati šta želimo (formu ili log out dugme).
U te svrhe koristićemo još jedu firebase.auth() metodu koja se zove onAuthStateChanged() koja se poziva svaki put kada dodje do promene pri autentifikaciji, što ustvari znači da svaki put kada se korisnik prijavi ili odjavi ova metoda će se pozvati. I mi ćemo to iskoristiti na sledeći način. Prvo ćemo definisati state objekat unutar nase App komponente (app.js)

state = { loggedIn: false };

loggedIn prop koji će označavati jeste li korisnik prijavljen ili ne, i kao početnu vrednost stavićemo false.

Zatim ćemo unutar componentWillMount() napisati sledeće

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.setState({ loggedIn: true });
  } else {
    this.setState({ loggedIn: false });
  }
});

user je parametar na osnovu koga odredjujemo da li je korisnik prijavljen ili ne, jer ako jeste prijavljen on će imati odredjenu vrednost (biće objekat) a u suprotnom bice null ili undefined. I zato ukoliko user ima neku vrednost mi postavljamo loggedIn : true a u suprotnom loggedIn: false.

Na osnovu user vrednosti mi ćemo prikazivati formu ili Button komponentu za odjavljivanje

render() {
  const { loggedIn } = this.state;

  return (
    <View>
      <Header headerText='Authentication' />
      { loggedIn ?
        <CardSection>
          <Button text='Log out' />
        </CardSection> :
        <LoginForm /> }
    </View>
  );
}

Ovo sada već treba biti poznato, ako loggedIn ima vrednost true prikazaće se CardSection komponenta sa Button komponentom unutar sebe a u suprotnom prikazaće se forma.
Sada možemo i testirati aplikaciju. Kada reload-ujete prvo što ćete videti jeste forma, medjutim ako ste se prethodno u nekom trenutku uspešno prijavili, to stanje je zapamćeno u firebase-u tako da nakon par trenutaka forma će nestati i pojaviće se

I sada koliko god puta reload-ovali , prvo će biti vidljiva forma a zatim Log out dugme. To predstavlja grešku, ne sme se prikazivati forma ukoliko je korisnik prijavljen, zato ćemo prikazivati Loader komponentu dok provera da li je korisnik prijavljen ili ne se ne izvrši, i tek kada saznamo pravo stanje state.loggedId prikazaćemo odgovarajuću komponentu.

U tu svrhu prvo ćemo podesiti da prva vrednost state.loggedIn bude null

state = { loggedIn: null };

Zatim ćemo napisati jednu pomoćnu metodu koja će odlučivati šta će se prikazivati

renderContent() {
  switch (this.state.loggedIn) {
    case true:
      return <CardSection><Button text='Log out'/></CardSection>;
    case false:
      return <LoginForm />;
    default:
      return <CardSection><Loader size="large" /></CardSection>;
  }
}

Na osnovu loggedIn vrednosti, ako je true prikzuje se Log out dugme, ako je false forma i ako je neodredjeno prikazivaće se Loader. Tako da sada ako reloadujete svoju aplikaciju, više se neće prikazivati forma pa nestajati već će se vriteti Loader dok se ne odredi pravo stanje loggedIn.

I poslednji korak je dodavanje funkcionalnosti Log out dugmetu.

To ćemo postići jednostavnim koriśćenjem firebase.auth().signOut(). Samo ga napisemo kao funkciju koju prima onPress prop naše Button komponente.

renderContent() {
  switch (this.state.loggedIn) {
    case true:
      return (
        <CardSection>
          <Button text='Log out' onPress={ () => firebase.auth().signOut() } />
        </CardSection> );
    case false:
      return <LoginForm />;
    default:
      return <CardSection><Loader size="large" /></CardSection>;
  }
}

Ceo kod app.js je sada sledeći

import React, { Component } from 'react';
import firebase from 'firebase';
import { View, Text } from 'react-native';
import Header from './components/Header';
import LoginForm from './components/LoginForm';
import Button from './components/Button';
import CardSection from './components/CardSection';
import Loader from './components/Loader';

class App extends Component {
  state = { loggedIn: null };

  componentWillMount() {
    firebase.initializeApp({
      apiKey: 'AIzaSyCBgNLfb6lkoxqEBdmlVBm487tr2QU3ugo',
      authDomain: 'auth-ec3f8.firebaseapp.com',
      databaseURL: 'https://auth-ec3f8.firebaseio.com',
      storageBucket: 'auth-ec3f8.appspot.com',
      messagingSenderId: '680495307201',
    });

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ loggedIn: true });
      } else {
        this.setState({ loggedIn: false });
      }
    });
  }

  renderContent() {
    switch (this.state.loggedIn) {
      case true:
        return (
          <CardSection>
            <Button text='Log out' onPress={ () => firebase.auth().signOut() } />
          </CardSection> );
      case false:
        return <LoginForm />;
      default:
        return <CardSection><Loader size="large" /></CardSection>;
    }
  }

  render() {
    const { loggedIn } = this.state;

    return (
      <View>
        <Header headerText='Authentication' />
        { this.renderContent() }
      </View>
    );
  }
}

export default App;

Sada možete da testirate svoj app, i klikom na dugme Log out vratiće vas na početnu stranu gde se nalazi Log in forma.

Ovime smo završili aplikaciju Auth.