Kako dodati autentifikaciju za reagiranje nativnog u tri koraka pomoću Firebasea

Autentifikacija nam omogućuje da zaštitimo svoje aplikacije ili ograničimo pristup za korisnike koji nisu korisnici. Autentifikacija se također može koristiti, na primjer, za ograničavanje pristupa plaćenoj usluzi ili određenoj usluzi.

To je samo jedan primjer kako provjera autentičnosti može biti u vašoj aplikaciji. Danas ćemo dodati provjeru autentičnosti u aplikaciju React Native pomoću Firebasea.

1 Instaliranje response-native-firebase

Prvo što napravimo je instaliranje i inicijalizacija Firebasea unutar naše aplikacije. U React Nativeu moramo koristiti Firebase spremnik za React Native. Koristit ćemo reakciju-izvorni-firebase.

Ako namjeravate pokrenuti novu React Native aplikaciju od nule i želite koristiti Firebase, imate sreće - možete instalirati reagirani nativni-firebase unaprijed integriran pomoću React Native CLI.

// npx @react-native-community/cli init [email protected]/template authenticationFirebase //** source: //invertase.io/oss/react-native-firebase/quick-start/new-project 

Zatim jednostavno instalirajte pod za iOS pokretanjem sljedeće naredbe unutar korijenskog direktorija vaše aplikacije.

cd ios && pod install 

Ako imate poteškoća s instalacijom novog projekta s Firebaseom, obratite se dokumentima response-native-firebase

Dodavanje reakcije-nativni-firebase postojećem projektu

Instalirajte react-native-firebasepaket pomoću pređe ili npm

 yarn add @react-native-firebase/app 

ili:

 npm install @react-native-firebase/app 

Zatim instalirajte mahune za iOS.

shell cd ios && pod install

Pokretanje aplikacije

Za iOS postoje dva načina: osobno koristim Xcode jer mi daje jasnu predodžbu ako je nešto pošlo po zlu i gradnja nije uspjela.

Uvijek provjerite je li paket pokrenut - pritisnite yarn startza pokretanje aplikacije.

Drugi način pokretanja aplikacije na iOS-u je pokretanje naredbe response-native run-ios - i to je to.

Dodavanje vjerodajnica za firebase

Ovaj korak zahtijeva stvaranje novog projekta u Firebase konzoli.

Nakon stvaranja novog projekta na stranici nadzorne ploče odaberite dodajte Firebase u iOS aplikaciju . Ovo će vam pokazati korake za dodavanje vjerodajnica na iOS kao u nastavku.

Sastoji se od nekoliko koraka:

  • Preuzmite GoogleService-info.plistdatoteku i stavite je u mapu iOS-a unutar vašeg projekta.

    add-firebase-ios

  • Inicijalizirajte Firebase

initialize-firebase

Za Android

Android ima drugačije postavke za Firebase. U postavkama projekta na Firebase konzoli odaberite dodaj Firebase na Android .

firebase-to-android

U unos imena aplikacije možete staviti bilo koje ime koje vam se sviđa - samo provjerite je li u skladu s Firebaseovim zahtjevima. Zatim kliknite Registriraj se .

Nakon toga morate preuzeti google-services.jsondatoteku i staviti je u mapu android / app.

Tada je sljedeći korak inicijalizacija Android SDK-a.

add-android-sdk

Posljednji korak je primijeniti Firebase čep iznutra: android/app/build.gradle .

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

Ako imate bilo kakvih problema s pokretanjem gore navedenih koraka, uvijek možete pogledati Firebaseove dokumente ili web stranice s reaktivnim izvornim Firebaseom.

Sad kad smo završili s integracijom, sljedeći je korak implementacija Firebase funkcija za stvaranje korisnika i prijava u React Native.

Dodavanje prijave, prijave

Ova je faza jednostavna: samo neki React i JavaScript kôd za pozivanje Firebase funkcija. Stvorit ću jednostavno korisničko sučelje za prijavu i prijavu (ovo nije potrebno za ovaj vodič, tako da možete preskočiti ovaj korak).

loginComponent

Potpuni izvorni kod stavit ću na kraj članka *

Funkcijom ćemo createUserWithEmailAndPasswordse prijaviti za novog korisnika. Već sam implementirao sve provjere valjanosti na obrascu - samo trebamo pozvati ovu funkciju da stvorimo korisnika.

potvrda oblika

When the user presses the Continue button, __doSignUp will be called and the code looks like this:

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

Make sure you installed @react-native-firebase/authto be able to call auth().createUserWithEmailAndPassword(email, password)

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

The function that creates a new user in Firebase looks like this:

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

If the function throws an error, make sure to enable the email / password method in the authentication section in the Firebase console.

enable-email-auth

If everything went well, and the data entered (email, password) is valid, an alert will show up. If you check the Authentication section in the Firebase console you will notice that a new user has been created.

prijavaUspjeh

Here is the source code of 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 (   {!!fetching && }    Sign Up     { setError setEmail(text) }} error={isValid} />  setPassword(text)} />  {error ? (  {error}  ) : null}    Continue     ) } 

For LoginComponent it’s mostly the same the only thing we need to change is we use signInWithEmailAndPassword method instead.

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

And the authentication has been successfully implemented in our app ??

Just one last thing: if we have to verify if the user is already logged in, we need to display something else instead of the Login or SignIn screens. For example, we can display the Home screen.

We can use a Firebase module to verify a session. It can be imported from the auth module.

import auth, { firebase } from "@react-native-firebase/auth" 
 componentDidMount() { // this.register("[email protected]", "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 }); } }; 

And we can change the UI based on if the user is authenticated or not. We can display user info by just using the same method.

firebase.auth().currentUser.email // [email protected] 

And to logout, you can just call await firebase.auth().signOut();

I’m sure integrating navigation like react-navigation would be awesome, but it was not our focus in this article. So feel free to add navigation so you can just navigate based on the user status.

Feel free to check out the full source code ?on GitHub

Thanks for reading.

Originally published on saidhayani.com

Learn more about React native.

  • Twitter
  • GitHub
  • Instagram
  • Pridružite se popisu pošte