Autentificarea ne permite să ne securizăm aplicațiile sau să limităm accesul pentru membrii care nu sunt utilizatori. Autentificarea poate fi de asemenea utilizată, de exemplu, pentru a limita accesul la un serviciu plătit sau la un serviciu specific.

Acesta este doar un exemplu al modului în care autentificarea poate fi în aplicația dvs. Astăzi vom adăuga autentificarea la o aplicație React Native folosind Firebase.

1 Instalarea react-native-firebase

Primul lucru pe care îl facem este să instalăm și să inițializăm Firebase în aplicația noastră. În React Native trebuie să folosim un container Firebase pentru React Native. Vom folosi react-native-firebase.

Dacă sunteți pe punctul de a începe o nouă aplicație React Native de la zero și doriți să utilizați Firebase, aveți noroc – puteți instala react-native-firebase pre-integrat utilizând CLI React Native.

ad-banner
//
npx @react-native-community/cli init --template=@react-native-firebase/template authenticationFirebase
//** source: https://invertase.io/oss/react-native-firebase/quick-start/new-project

Apoi, instalați podul pentru iOS executând următoarea comandă în directorul rădăcină al aplicației dvs.

cd ios && pod install

Dacă aveți probleme cu instalarea unui nou proiect cu Firebase, vă rugăm să consultați documente react-native-firebase

Adăugarea react-native-firebase la un proiect existent

Instalați fișierul react-native-firebase pachet folosind fire sau npm

 yarn add @react-native-firebase/app

sau:

 npm install @react-native-firebase/app

Apoi instalați pod-uri pentru iOS.

shell cd ios && pod install

Rularea aplicației

Pentru iOS, există două moduri de a face acest lucru: folosesc personal Xcode, deoarece îmi oferă o idee clară dacă ceva nu a funcționat bine și dacă construcția a eșuat.
Xcode

Asigurați-vă întotdeauna că pachetul rulează – apăsați yarn start pentru a porni aplicația.

A doua modalitate de a rula aplicația pe iOS este executarea comenzii react-native run-ios – și atât.

Adăugarea acreditărilor Firebase

Acest pas necesită crearea unui nou proiect în consola Firebase .

După ce ați creat un proiect nou în pagina tabloului de bord, selectați adăugați Firebase la aplicația iOS. Aceasta vă va arăta pașii pentru a adăuga acreditări la iOS, cum ar fi mai jos.

Se compune din câțiva pași:

  • Descărcați fișierul GoogleService-info.plist fișierul și puneți-l în folderul iOS din cadrul proiectului dvs.
    add-firebase-ios

  • Inițializați Firebase

initialize-firebase

Pentru Android

Android are o configurare diferită pentru Firebase. În setările de proiect din consola Firebase selectați adăugați Firebase la Android.
firebase-to-android

Puteți introduce orice nume doriți în introducerea numelui aplicației – asigurați-vă că respectă cerințele Firebase. Apoi apasa Inregistreaza-te.

După aceea, trebuie să descărcați fișierul google-services.json fișierul și puneți-l în folderul Android / aplicație.

Apoi, următorul pas este inițializarea SDK-ului Android.
add-android-sdk

Ultimul pas este aplicarea pluginului Firebase în interior: android/app/build.gradle .

apply plugin: 'com.google.gms.google-services'

Dacă aveți probleme la executarea pașilor de mai sus, puteți consulta întotdeauna Firebase documente sau react-native-firebase site-uri web.

Acum, după ce am terminat integrarea, următorul pas este implementarea funcțiilor Firebase pentru a crea utilizatori și a vă conecta în React Native.

Adăugare autentificare, autentificare

Această fază este simplă: doar câteva coduri React și JavaScript pentru a apela funcții Firebase. Voi crea o interfață de utilizare simplă pentru Login și SignUp (acest lucru nu este necesar pentru acest tutorial, astfel încât să puteți sări peste acest pas).

loginComponent

Voi pune codul sursă complet la sfârșitul articolului *

Vom folosi createUserWithEmailAndPassword funcție pentru a vă înscrie pentru un nou utilizator. Am implementat deja toate validările din formular – trebuie doar să apelăm această funcție pentru a crea un utilizator.

validare formular

Când utilizatorul apasă butonul Continuare, __doSignUp va fi apelat și codul arată astfel:

const __doSignUp = () => {
  if (!email) {
    setError("Email required *")
    setValid(false)
    return
  } else if (!password && password.trim() && password.length > 6) {
    setError("Weak password, minimum 5 chars")
    setValid(false)
    return
  } else if (!__isValidEmail(email)) {
    setError("Invalid Email")
    setValid(false)
    return
  }

  __doCreateUser(email, password)
}

const __doCreateUser = async (email, password) => {
  try {
    let response = await auth().createUserWithEmailAndPassword(email, password)
    if (response) {
      console.log(tag, "?", response)
    }
  } catch (e) {
    console.error(e.message)
  }
}

Asigurați-vă că ați instalat @react-native-firebase/authpentru a putea suna auth().createUserWithEmailAndPassword(email, password)

// import auth
import auth from "@react-native-firebase/auth"

Funcția care creează un utilizator nou în Firebase arată astfel:

const __doCreateUser = async (email, password) =>{
    try {
     let response =  await auth().createUserWithEmailAndPassword(email, password);
      if(response){
        console.log(tag,"?",response)
      }
    } catch (e) {
      console.error(e.message);
    }

Dacă funcția generează o eroare, asigurați-vă că activați metoda de e-mail / parolă în secțiunea de autentificare din consola Firebase.
enable-email-auth

Dacă totul a mers bine, iar datele introduse (e-mail, parolă) sunt valide, va apărea o alertă. Dacă bifați secțiunea Autentificare din consola Firebase, veți observa că a fost creat un nou utilizator.
signUpSuccess

Iată codul sursă al SignInComponent.

const SigInComponent = () => {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [fetching, setFetching] = useState(false)
  const [error, setError] = useState("")
  const [isValid, setValid] = useState(true)
  const __doSignUp = () => {
    if (!email) {
      setError("Email required *")
      setValid(false)
      return
    } else if (!password && password.trim() && password.length > 6) {
      setError("Weak password, minimum 5 chars")
      setValid(false)
      return
    } else if (!__isValidEmail(email)) {
      setError("Invalid Email")
      setValid(false)
      return
    }

    __doCreateUser(email, password)
  }

  const __doCreateUser = async (email, password) => {
    try {
      let response = await auth().createUserWithEmailAndPassword(
        email,
        password
      )
      if (response && response.user) {
        Alert.alert("Success ✅", "Account created successfully")
      }
    } catch (e) {
      console.error(e.message)
    }
  }

  return (
    <SafeAreaView style={styles.containerStyle}>
      <View style={{ flex: 0.2 }}>
        {!!fetching && <ActivityIndicator color={blue} />}
      </View>
      <View style={styles.headerContainerStyle}>
        <Text style={styles.headerTitleStyle}> Sign Up </Text>
      </View>
      <View style={styles.formContainerStyle}>
        <TextInput
          label={"Email"}
          autoCapitalize={false}
          keyboardType="email-address"
          style={styles.textInputStyle}
          placeholder="Mail address"
          onChangeText={text => {
            setError
            setEmail(text)
          }}
          error={isValid}
        />

        <TextInput
          label={"Password"}
          secureTextEntry
          autoCapitalize={false}
          style={styles.textInputStyle}
          selectionColor={blue}
          placeholder="Password"
          error={isValid}
          onChangeText={text => setPassword(text)}
        />
      </View>
      {error ? (
        <View style={styles.errorLabelContainerStyle}>
          <Text style={styles.errorTextStyle}>{error}</Text>
        </View>
      ) : null}
      <View style={styles.signInButtonContainerStyle}>
        <TouchableHighlight
          style={styles.signInButtonStyle}
          onPress={__doSignUp}
          underlayColor={blue}
        >
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-around",
            }}
          >
            <Text style={styles.signInButtonTextStyle}>Continue</Text>
          </View>
        </TouchableHighlight>
      </View>
    </SafeAreaView>
  )
}

Pentru LoginComponent este în mare parte același lucru, singurul lucru pe care trebuie să-l schimbăm este să îl folosim signInWithEmailAndPassword metoda în schimb.

const __doSingIn = async (email, password) => {
  try {
    let response = await auth().signInWithEmailAndPassword(email, password)
    if (response && response.user) {
      Alert.alert("Success ✅", "Authenticated successfully")
    }
  } catch (e) {
    console.error(e.message)
  }
}

![loginSuccess](loginSuccess.gif

Și autentificarea a fost implementată cu succes în aplicația noastră ??

Doar un ultim lucru: dacă trebuie să verificăm dacă utilizatorul este deja conectat, trebuie să afișăm altceva în loc de ecranele Login sau SignIn. De exemplu, putem afișa ecranul de pornire.

Putem folosi un modul Firebase pentru a verifica o sesiune. Poate fi importat din modulul auth.

import auth, { firebase } from "@react-native-firebase/auth"
 componentDidMount() {
    //  this.register("said1292@gmail.com", "123456");
    this.__isTheUserAuthenticated();
  }

  __isTheUserAuthenticated = () => {
    let user = firebase.auth().currentUser.uid;
    if (user) {
      console.log(tag,  user);
      this.setState({ authenticated: true });
    } else {
      this.setState({ authenticated: false });
    }
  };

Și putem schimba interfața de utilizare în funcție de dacă utilizatorul este autentificat sau nu. Putem afișa informații despre utilizatori doar folosind aceeași metodă.

firebase.auth().currentUser.email // said543@gmail.com

Și pentru a vă deconecta, puteți apela await firebase.auth().signOut();

Sunt sigur că integrez navigarea ca navigare reactivă ar fi minunat, dar nu ne-am concentrat în acest articol. Așadar, nu ezitați să adăugați navigare, astfel încât să puteți naviga doar pe baza stării utilizatorului.

Nu ezitați să verificați codul sursă complet? GitHub

Mulțumesc pentru lectură.

Publicat inițial la saidhayani.com

Aflați mai multe despre React native.