Hinzufügen einer Authentifizierung, um Native in drei Schritten mithilfe von Firebase zu reagieren

Durch die Authentifizierung können wir unsere Apps sichern oder den Zugriff für Nichtbenutzer beschränken. Die Authentifizierung kann beispielsweise auch verwendet werden, um den Zugriff auf einen kostenpflichtigen Dienst oder einen bestimmten Dienst zu beschränken.

Dies ist nur ein Beispiel dafür, wie die Authentifizierung in Ihrer App erfolgen kann. Heute werden wir einer React Native-App mit Firebase eine Authentifizierung hinzufügen.

1 React-Native-Firebase installieren

Als erstes installieren und initialisieren wir Firebase in unserer App. In React Native müssen wir einen Firebase-Container für React Native verwenden. Wir werden React-Native-Firebase verwenden.

Wenn Sie eine neue React Native-App von Grund auf neu starten und Firebase verwenden möchten, haben Sie Glück - Sie können React-Native-Firebase mithilfe der React Native-CLI vorintegriert installieren.

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

Installieren Sie dann einfach den Pod für iOS, indem Sie den folgenden Befehl im Stammverzeichnis Ihrer App ausführen.

cd ios && pod install 

Wenn Sie Probleme bei der Installation eines neuen Projekts mit Firebase haben, lesen Sie bitte die React-Native-Firebase-Dokumente

Hinzufügen einer reaktionsnativen Feuerbasis zu einem vorhandenen Projekt

Installieren Sie das react-native-firebasePaket mit Garn oder npm

 yarn add @react-native-firebase/app 

oder:

 npm install @react-native-firebase/app 

Installieren Sie dann Pods für iOS.

shell cd ios && pod install

App ausführen

Für iOS gibt es zwei Möglichkeiten: Ich persönlich verwende Xcode, da ich eine klare Vorstellung davon habe, ob etwas schief gelaufen ist und der Build fehlgeschlagen ist.

Stellen Sie immer sicher, dass das Paket ausgeführt wird - klicken Sie yarn start, um die App zu starten.

Die zweite Möglichkeit, die App unter iOS auszuführen, besteht darin, den Befehl react-native run-ios auszuführen - und das war's.

Hinzufügen von Firebase-Anmeldeinformationen

Für diesen Schritt müssen wir ein neues Projekt in der Firebase-Konsole erstellen.

Nachdem Sie auf der Dashboard-Seite ein neues Projekt erstellt haben, wählen Sie Firebase zur iOS-App hinzufügen . Dies zeigt Ihnen die Schritte zum Hinzufügen von Anmeldeinformationen zu iOS wie unten.

Es besteht aus ein paar Schritten:

  • Laden Sie die GoogleService-info.plistDatei herunter und legen Sie sie im iOS-Ordner Ihres Projekts ab.

    add-firebase-ios

  • Firebase initialisieren

initialize-firebase

Für Android

Android hat ein anderes Setup für Firebase. Wählen Sie in den Projekteinstellungen in der Firebase-Konsole Firebase zu Android hinzufügen .

Firebase-zu-Android

Sie können einen beliebigen Namen in die Eingabe des App-Namens einfügen - stellen Sie einfach sicher, dass er den Firebase-Anforderungen entspricht. Klicken Sie dann auf Registrieren .

Danach müssen Sie die google-services.jsonDatei herunterladen und in den Android / App-Ordner legen.

Der nächste Schritt ist die Initialisierung des Android SDK.

add-android-sdk

Der letzte Schritt besteht darin, das Firebase-Plugin im Inneren anzuwenden : android/app/build.gradle .

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

Wenn Sie Probleme beim Ausführen der obigen Schritte haben, können Sie jederzeit auf die Firebase-Dokumente oder die React-Native-Firebase-Websites verweisen.

Nachdem wir mit der Integration fertig sind, besteht der nächste Schritt darin, Firebase-Funktionen zu implementieren, um Benutzer zu erstellen und sich bei React Native anzumelden.

Hinzufügen von Anmelden, Anmelden

Diese Phase ist einfach: Nur einige React- und JavaScript-Codes zum Aufrufen von Firebase-Funktionen. Ich werde eine einfache Benutzeroberfläche für Login und SignUp erstellen (dies ist für dieses Tutorial nicht erforderlich, damit Sie diesen Schritt überspringen können).

loginComponent

Ich werde den vollständigen Quellcode am Ende des Artikels einfügen *

Wir werden die createUserWithEmailAndPasswordFunktion verwenden, um uns für einen neuen Benutzer anzumelden. Ich habe bereits die gesamte Validierung im Formular implementiert. Wir müssen diese Funktion nur aufrufen, um einen Benutzer zu erstellen.

Formularvalidierung

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.

signUpSuccess

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
  • Treten Sie der Mail-Liste bei