Як додати автентифікацію до React Native за три кроки за допомогою Firebase

Аутентифікація дозволяє нам захистити наші програми або обмежити доступ для користувачів, які не є користувачами. Аутентифікацію також можна використовувати, наприклад, для обмеження доступу до платної послуги чи конкретної послуги.

Це лише один приклад того, як аутентифікація може бути у вашому додатку. Сьогодні ми додамо автентифікацію до програми React Native за допомогою Firebase.

1 Встановлення response-native-firebase

Перше, що ми робимо, це встановлюємо та ініціалізуємо Firebase всередині нашого додатка. У React Native нам потрібно використовувати контейнер Firebase для React Native. Ми збираємось використовувати response-native-firebase.

Якщо ви збираєтеся запустити нову програму React Native з нуля, і ви хочете використовувати Firebase, вам пощастило - ви можете встановити вбудовану реакцію native-firebase, попередньо інтегровану, за допомогою React Native CLI.

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

Потім просто встановіть pod для iOS, виконавши наступну команду всередині кореневого каталогу програми.

cd ios && pod install 

Якщо у вас виникають проблеми з встановленням нового проекту з Firebase, зверніться до документації response-native-firebase

Додавання response-native-firebase до існуючого проекту

Встановіть react-native-firebaseпакет, використовуючи пряжу або npm

 yarn add @react-native-firebase/app 

або:

 npm install @react-native-firebase/app 

Потім встановіть стручки для iOS.

shell cd ios && pod install

Запуск програми

Для iOS є два способи зробити це: я особисто використовую Xcode, оскільки це дає мені чітке уявлення про те, що щось пішло не так і збірка не вдалася.

Завжди переконайтесь, що пакет запущений - натисніть, yarn startщоб запустити програму.

Другий спосіб запустити програму на iOS - це запустити команду response-native run-ios - і все.

Додавання облікових даних Firebase

Цей крок вимагає від нас створення нового проекту на консолі Firebase.

Після створення нового проекту на сторінці інформаційної панелі виберіть додавання Firebase до програми iOS . Це покаже вам кроки для додавання облікових даних до iOS, як показано нижче.

Він складається з декількох кроків:

  • Завантажте GoogleService-info.plistфайл і помістіть його в папку iOS у вашому проекті.

    add-firebase-ios

  • Ініціалізуйте Firebase

initialize-firebase

Для Android

Android має інше налаштування для Firebase. У налаштуваннях проекту на консолі Firebase виберіть Додати Firebase для Android .

firebase-to-android

Ви можете додати будь-яке вподобане ім’я до введення імені програми - лише переконайтесь, що воно відповідає вимогам Firebase. Потім натисніть Реєстрація .

Після цього вам потрібно завантажити google-services.jsonфайл і помістити його в папку android / app.

Потім наступним кроком є ​​ініціалізація Android SDK.

add-android-sdk

Останній крок , щоб застосувати плагін всередині Firebase: android/app/build.gradle .

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

Якщо у вас виникли будь-які проблеми із наведеними вище кроками, ви завжди можете звернутися до документів Firebase або веб-сайтів, що реагують на рідний Firebase.

Тепер, коли ми закінчили інтеграцію, наступним кроком є ​​реалізація функцій Firebase для створення користувачів та входу в систему React Native.

Додавання входу, входу

Цей етап простий: просто деякий код React та JavaScript для виклику функцій Firebase. Я збираюся створити простий інтерфейс для входу та реєстрації (це не потрібно для цього підручника, щоб ви могли пропустити цей крок).

loginComponent

Повний вихідний код я розміщу в кінці статті *

Ми використаємо createUserWithEmailAndPasswordфункцію для реєстрації нового користувача. Я вже здійснив усі перевірки у формі - нам просто потрібно викликати цю функцію, щоб створити користувача.

перевірка форми

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
  • Приєднуйтесь до списку розсилки