Sådan tilføjes godkendelse til at reagere indfødte i tre trin ved hjælp af Firebase

Godkendelse giver os mulighed for at sikre vores apps eller begrænse adgangen for ikke-brugermedlemmer. Godkendelse kan f.eks. Også bruges til at begrænse adgangen til en betalt tjeneste eller en bestemt tjeneste.

Det er kun et eksempel på, hvordan godkendelse kan være i din app. I dag vil vi tilføje godkendelse til en React Native-app ved hjælp af Firebase.

1 Installation af react-native-firebase

Den første ting vi gør er at installere og initialisere Firebase inde i vores app. I React Native skal vi bruge en Firebase Container til React Native. Vi skal bruge react-native-firebase.

Hvis du er ved at starte en ny React Native-app fra bunden, og du gerne vil bruge Firebase, er du heldig - du kan installere react-native-firebase præintegreret ved hjælp af React Native CLI.

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

Installer derefter bare pod'en til iOS ved at køre følgende kommando inde i rodmappen i din app.

cd ios && pod install 

Hvis du har problemer med at installere et nyt projekt med Firebase, henvises der til React-native-Firebase-dokumenter

Tilføjelse af react-native-firebase til et eksisterende projekt

Installer react-native-firebasepakken ved hjælp af garn eller npm

 yarn add @react-native-firebase/app 

eller:

 npm install @react-native-firebase/app 

Installer derefter bælg til iOS.

shell cd ios && pod install

Kører appen

For iOS er der to måder at gøre det på: Jeg bruger personligt Xcode, da det giver mig en klar idé om noget gik galt, og bygningen mislykkedes.

Sørg altid for, at pakken kører - tryk for yarn startat starte appen.

Den anden måde at køre appen på iOS på er at køre kommandoen react-native run-ios - og det er det.

Tilføjelse af firebase-legitimationsoplysninger

Dette trin kræver, at vi opretter et nyt projekt i Firebase-konsollen.

Når du har oprettet et nyt projekt på dashboard-siden, skal du vælge Føj Firebase til iOS-appen . Dette viser dig trinene til at tilføje legitimationsoplysninger til iOS som nedenfor.

Den består af et par trin:

  • Download GoogleService-info.plistfilen, og læg den i iOS-mappen i dit projekt.

    add-firebase-ios

  • Initialiser Firebase

initialisere-firebase

Til Android

Android har en anden opsætning til Firebase. Vælg Føj Firebase til Android i projektindstillinger i Firebase-konsollen .

firebase-til-android

Du kan placere ethvert navn, du kan lide, i input til appnavnet - bare sørg for, at det overholder Firebase-kravene. Klik derefter på Registrer .

Derefter skal du downloade google-services.jsonfilen og placere den i android / app-mappen.

Derefter er det næste trin at initialisere Android SDK.

tilføj-android-sdk

Det sidste trin er at anvende Firebase plugin inde: android/app/build.gradle .

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

Hvis du har problemer med at køre ovenstående trin, kan du altid henvise til Firebase-dokumenterne eller reagerer-native-firebase-webstederne.

Nu hvor vi er færdige med integrationen, er næste trin at implementere Firebase-funktioner for at oprette brugere og logge ind i React Native.

Tilføjelse af login, login

Denne fase er enkel: bare nogle React- og JavaScript-koder for at ringe til Firebase-funktioner. Jeg vil oprette et simpelt brugergrænseflade til login og signUp (dette er ikke nødvendigt for denne tutorial, så du kan springe dette trin over).

loginKomponent

Jeg sætter den fulde kildekode i slutningen af ​​artiklen *

Vi bruger createUserWithEmailAndPasswordfunktionen til at tilmelde dig en ny bruger. Jeg har allerede implementeret al validering på formularen - vi skal bare ringe til denne funktion for at oprette en bruger.

formvalidering

Når brugeren trykker på knappen Fortsæt, __doSignUpkaldes der op, og koden ser sådan ud:

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

Sørg for, at du har installeret @react-native-firebase/authfor at kunne ringeauth().createUserWithEmailAndPassword(email, password)

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

Funktionen, der opretter en ny bruger i Firebase, ser sådan ud:

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

Hvis funktionen kaster en fejl, skal du sørge for at aktivere e-mail / adgangskode-metoden i godkendelsessektionen i Firebase-konsollen.

aktiver-e-mail-godkendelse

Hvis alt gik godt, og de indtastede data (e-mail, adgangskode) er gyldige, vises en advarsel. Hvis du markerer afsnittet Godkendelse i Firebase-konsollen, bemærker du, at der er oprettet en ny bruger.

signUpSuccess

Her er kildekoden til 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 LoginComponentdet er stort set det samme, det eneste, vi har brug for at ændre, er, at vi bruger signInWithEmailAndPasswordmetoden i stedet.

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

Og godkendelsen er med succes implementeret i vores 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
  • Deltag i mail-listen