Существуют различные способы аутентификации пользователя с помощью Facebook, Google, Twitter, LinkedIn, электронной почты и т. Д. Но аутентификация по электронной почте по-прежнему остается самым популярным методом аутентификации. В этом руководстве мы расскажем, как создать аутентификацию электронной почты с помощью React native и Firebase.

оригинал статьи опубликовать в моем блоге

Использование React Native с firebase упрощает реализацию. Итак, не теряя времени, давайте начнем

Прежде всего, c создайте новый проект React Native с выставкой.

Аутентификация электронной почты с помощью React native и Firebase с использованием Expo:

В этом посте мы используем expo, не касаясь Xcode или Android studio. Откройте свой терминал или командную строку и введите:

expo init fb-react-native-firebase

После нажатия клавиши ВВОД вы увидите экран, показанный ниже, где вы можете ввести имя приложения и ярлык. После этого снова нажмите Enter

По завершении процесса установки вы увидите экран, показанный ниже.

Затем перейдите в папку проекта, как показано выше, используя cd app-name. После этого вы можете напрямую запустить приложение, просто используя простую команду.

yarn start

Мы собираемся развивать этот проект с помощью VS Code. Так что откройте это в коде Visual Studio и в их открытом терминале run yarn start.

Выставка откроет новое окно в браузере, как показано ниже. Там вы можете увидеть варианты запуска приложения с помощью эмулятора Android или устройства, симулятора iOS и с помощью сканера QR-кода. Мы используем эмулятор Android, чтобы продемонстрировать это приложение.

После этого откройте свой эмулятор и используйте его, чтобы открыть приложение expo.

Эмуляторы используют очень много места в памяти вашей системы в зависимости от вашего устройства или ОС. Я пытаюсь использовать Android на Mac, но он занимает так много места.

Итак, теперь мы готовы писать код.

Быстрая форма Bootstrap с нативной базой

Чтобы разрабатывать наш интерфейс быстрее и плавнее, мы используем Native base для разработки этого приложения. Вы можете проверить собственную базу для получения дополнительной информации. Итак, перейдем к следующему шагу

Откройте новый терминал, запустите npm i native-base

Следующий шаг для импорта необходимого базового компонента Native в App.js

import { Container, Item, Form, Input, Button, Label } from "native-base";

И построить интерфейс формы

render() {
    return (
      <Container>
        <Form>
          <Item floatingLabel>
            <Label>Email</Label>
            <Input autoCapitalize="none" autoCorrect={false} />
          </Item>
          <Item floatingLabel>
            <Label>Password</Label>
            <Input
              secureTextEntry={true}
              autoCapitalize="none"
              autoCorrect={false}
            />
          </Item>
          <Button full rounded success>
            <Text>Login</Text>
          </Button>
        </Form>
      </Container>
    );
  }

Когда вы сохраняете результат, вы можете сразу увидеть его на экране. Эта функция называется горячей перезагрузкой.

Форма появится вверху.

Теперь дизайн формы готов. Перейдем к основной программной части.

Добавить firebase в собственный проект React

Давайте добавим firebase with npm i firebase и импортируем firebase в App.js, а затем импортируем это в наш проект.

import * as firebase from "firebase";

На следующем этапе вам нужно создать проект firebase. Перейдите в консоль firebase и сделайте ее, как показано ниже:

Теперь возьмите конфигурационный apikey, который очень важен для доступа к данным из базы данных.

И вставьте в App.js, как показано ниже в структуре кода.

import * as firebase from "firebase";
import { Container, Item, Form, Input, Button, Label } from "native-base";
var config = {
    apiKey: "AIzaSyDFdsjQWG8IFLXmviNqSiVZMw_ADFl5tpo",
    authDomain: "react-native-firebase-3bde9.firebaseapp.com",
    databaseURL: "https://react-native-firebase-3bde9.firebaseio.com",
    projectId: "react-native-firebase-3bde9",
    storageBucket: "react-native-firebase-3bde9.appspot.com",
     messagingSenderId: "269398778466"
};
firebase.initializeApp(config);

Теперь мы успешно добавили firebase в наш проект.

Зарегистрироваться

Для аутентификации по электронной почте нам необходимо активировать аутентификацию по электронной почте в консоли Firebase.

Вернемся к VS Code и добавим к нему кнопку регистрации.

<Button full rounded success style={{ marginTop: 20 }}> <Text>Signup</Text>
</Button>

Просмотр результатов должен быть

Теперь нам нужно добавить код регистрации.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }
  SignUp = (email, password) => {
    try {
      firebase
          .auth()
          .createUserWithEmailAndPassword(email, password)
          .then(user => { 
                 console.log(user);
           });
} catch (error) {
      console.log(error.toString(error));
    }
  };

Мы создаем состояние для обработки электронной почты и пароля от. Мы создали форму и функцию SignUp для обработки кода firebase.

Затем добавьте значение формы в состояние с помощью onChangeText.

<Item floatingLabel>
            <Label>Email</Label>
            <Input
              autoCapitalize="none"
              autoCorrect={false}
              onChangeText={email => this.setState({ email })}
            />
          </Item>
          <Item floatingLabel>
            <Label>Password</Label>
            <Input
              secureTextEntry={true}
              autoCapitalize="none"
              autoCorrect={false}
              onChangeText={password => this.setState({ password })}
            />

И мы запускаем функцию SignUp с событием onPress из кнопки регистрации.

onPress={() => this.SignUp(this.state.email, this.state.password)}

Сохраните и попробуйте отправить форму.

После отправки данных перейдите в консоль firebase и убедитесь, что введенные вами данные поступают туда или нет.

Теперь мы успешно добавили данные в Firebase в качестве нового пользователя.

Авторизоваться

Для входа мы используем код из метода регистрации и меняем функцию firebase.

Login = (email, password) => {
    try {
      firebase
         .auth()
         .signInWithEmailAndPassword(email, password)
         .then(res => {
             console.log(res.user.email);
      });
} catch (error) {
      console.log(error.toString(error));
    }
  };

После вам нужно использовать метод onAuthStateChanged для получения пользовательских данных. Затем добавьте метод onPress в кнопку входа.

onPress={() => this.LogIn(this.state.email, this.state.password)}

Попробуем войти.

Привет, наконец-то мы сделали это. Мы получили данные из пользовательской базы данных firebase.

Вывод

В этом руководстве вы узнали о том, как настроить собственный проект React с expo и firebase. Вы также узнали, как начать создание пользовательского интерфейса с помощью NativeBase? Затем после этого мы создали базовую аутентификацию электронной почты с использованием React Native, Firebase и expo.

Надеемся, вы что-то поняли. Если да, то пожалуйста, с друзьями и с теми, кто нужен. Не стесняйтесь спрашивать любой вопрос.