Cómo agregar autenticación para React Native en tres pasos usando Firebase

La autenticación nos permite proteger nuestras aplicaciones o limitar el acceso a los miembros que no son usuarios. La autenticación también se puede utilizar, por ejemplo, para limitar el acceso a un servicio pago o un servicio específico.

Ese es solo un ejemplo de cómo puede ser la autenticación en su aplicación. Hoy agregaremos autenticación a una aplicación React Native usando Firebase.

1 Instalación de react-native-firebase

Lo primero que hacemos es instalar e inicializar Firebase dentro de nuestra aplicación. En React Native necesitamos usar un contenedor de Firebase para React Native. Vamos a utilizar react-native-firebase.

Si está a punto de iniciar una nueva aplicación React Native desde cero y le gustaría usar Firebase, tiene suerte: puede instalar react-native-firebase preintegrado usando React Native CLI.

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

Luego, simplemente instale el pod para iOS ejecutando el siguiente comando dentro del directorio raíz de su aplicación.

cd ios && pod install 

Si tiene problemas para instalar un nuevo proyecto con Firebase, consulte los documentos de react-native-firebase

Agregar react-native-firebase a un proyecto existente

Instale el react-native-firebasepaquete usando hilo o npm

 yarn add @react-native-firebase/app 

o:

 npm install @react-native-firebase/app 

Luego instale pods para iOS.

shell cd ios && pod install

Ejecutando la aplicación

Para iOS, hay dos formas de hacerlo: yo personalmente uso Xcode, ya que me da una idea clara si algo salió mal y la compilación falló.

Siempre asegúrese de que el paquete se esté ejecutando; presione yarn startpara iniciar la aplicación.

La segunda forma de ejecutar la aplicación en iOS es ejecutar el comando react-native run-ios, y eso es todo.

Agregar credenciales de base de fuego

Este paso requiere que creemos un nuevo proyecto en Firebase console.

Después de crear un nuevo proyecto en la página del panel, seleccione agregar Firebase a la aplicación iOS . Esto le mostrará los pasos para agregar credenciales a iOS como se muestra a continuación.

Consta de unos pocos pasos:

  • Descarga el GoogleService-info.plistarchivo y colócalo dentro de la carpeta de iOS dentro de tu proyecto.

    agregar-firebase-ios

  • Inicializar Firebase

initialize-firebase

Para Android

Android tiene una configuración diferente para Firebase. En la configuración del proyecto en la consola de Firebase, seleccione agregar Firebase a Android .

firebase-to-android

Puede poner el nombre que desee en la entrada del nombre de la aplicación, solo asegúrese de que cumpla con los requisitos de Firebase. Luego haga clic en Registrarse .

Después de eso, debe descargar el google-services.jsonarchivo y colocarlo en la carpeta android / app.

Luego, el siguiente paso es inicializar el SDK de Android.

agregar-android-sdk

El último paso es aplicar el interior complemento Firebase: android/app/build.gradle .

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

Si tiene algún problema al ejecutar los pasos anteriores, siempre puede consultar los documentos de Firebase o los sitios web react-native-firebase.

Ahora que hemos terminado con la integración, el siguiente paso es implementar las funciones de Firebase para crear usuarios e iniciar sesión en React Native.

Agregar inicio de sesión, inicio de sesión

Esta fase es simple: solo algunos códigos de React y JavaScript para llamar a funciones de Firebase. Voy a crear una interfaz de usuario simple para iniciar sesión y registrarse (esto no es necesario para este tutorial, así que puede omitir este paso).

loginComponent

Pondré el código fuente completo al final del artículo *

Usaremos la createUserWithEmailAndPasswordfunción para registrar un nuevo usuario. Ya implementé toda la validación en el formulario; solo necesitamos llamar a esta función para crear un usuario.

validación de formulario

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
  • Únase a la lista de correo