Membuat metode autentikasi menggunakan Firebase, mari langsung saja!

Instalasi yang kami perlukan untuk aplikasi ini:

  1. Kode Visual Studio
  2. pameran init “Nama Proyek”
  3. instalasi npm (Opsional)
  4. npx expo instal react-native-web@~0.18.9 [email protected] @expo/webpack-config@⁰.17.2
  5. npm istal @react-navigation/native
  6. expo instal layar-reaksi-asli-konteks-area-aman-asli-konteks
  7. pameran instal firebase

Sebelum kita mulai, Anda perlu membuka akun dengan https://firebase.google.com/ & memulai sebuah proyek. Sebuah proyek akan memberi Anda metode otentikasi yang akan Anda pilih E-mail & Kata Sandi

Tangkapan layar ini akan membantu Anda membuat proyek dengan firebase. Firebase akan memberi Anda kode yang memiliki kunci API, simpan untuk nanti di tutorial ini. Jangan tutup tab firebase, tetap buka, Anda akan membutuhkannya nanti di tutorial ini. Mari kita mulai…

Setelah Anda menjalankan perintah "expo init Project_Name" Anda akan melihat beberapa file ditambahkan pada Visual Studio Code Anda

  1. Dimulai dengan App.js

mengimpor semua yang kami butuhkan untuk App.js kami

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import LoginScreen from "./screens/LoginScreen"; //Importing LoginScreen
import HomeScreen from "./screens/HomeScreen"; //Importing HomeScreen

Kami akan membuat Stack untuk NativeStackNavigator kami

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{ headerShown: false }}
          name="Login"
          component={LoginScreen}
        />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

//Styling

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Jika Anda bingung tentang NavigationContainer & apa yang terjadi setelah ini, Anda perlu membaca dokumentasi ini → https://reactnavigation.org/
Adapun kesalahan yang mungkin Anda dapatkan — jangan khawatir, kami masih belum membuat semua yang kami perlukan untuk Aplikasi kami.

Selanjutnya — Kami membuat HomeScreen

Sedikit petunjuk → jika Anda menggunakan (Prettier Extention) di Visual Code Studio, Saat Anda membuat halaman baru (HomeScreen.js) Anda dapat menghemat banyak waktu dengan menulis “rnfes”. Ini akan menghasilkan keajaiban.

import { StyleSheet, Text, View } from "react-native";
import React from "react";

const HomeScreen = () => {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({});

Seperti inilah tampilan pembuatan HomeScreen.js dengan "rnfes". Mari menjadi lebih maju

  1. Buat gaya
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  button: {
    backgroundColor: "#0782F9",
    width: "60%",
    padding: 15,
    borderRadius: 10,
    alignItems: "center",
    marginTop: 40,
  },
  buttonText: {
    color: "white",
    fontWeight: "700",
    fontSize: 16,
  },
});

2. Hubungkan gaya Anda ke komponen "Layar Beranda".

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Sign Out</Text>
      </TouchableOpacity>
    </View>
  )
}

Membuat LoginScreen akan menjadi proses yang sama seperti yang kita lakukan untuk HomeScreen —

  1. Buat LoginScreen.js sebagai file baru

2. Ketik “rnfes” dan semuanya akan muncul

Akan mempersingkat bagian desain, karena mendesain itu bukan hal favorit saya, terkadang saya hanya menggunakan figma.com & menerjemahkan desain saya ke dalam kode React.

Sebelum kita mulai mendesain UI, mari impor semua yang kita perlukan untuk proyek kita

import { useNavigation } from "@react-navigation/core";
import React, { useEffect, useState } from "react";
import {
  KeyboardAvoidingView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";
import { auth } from "./firebase";

Mari kita mulai dengan gaya

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  inputContainer: {
    width: "80%",
  },
  input: {
    backgroundColor: "white",
    paddingHorizontal: 15,
    paddingVertical: 10,
    borderRadius: 10,
    marginTop: 5,
  },
  buttonContainer: {
    width: "60%",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 40,
  },
  button: {
    backgroundColor: "#0782F9",
    width: "100%",
    padding: 15,
    borderRadius: 10,
    alignItems: "center",
  },
  buttonOutline: {
    backgroundColor: "white",
    marginTop: 5,
    borderColor: "#0782F9",
    borderWidth: 2,
  },
  buttonText: {
    color: "white",
    fontWeight: "700",
    fontSize: 16,
  },
  buttonOutlineText: {
    color: "#0782F9",
    fontWeight: "700",
    fontSize: 16,
  },
});

Pada komponen LoginScreen Anda, Anda akan mengembalikan beberapa elemen UI sehingga pengguna dapat memasukkan emailnya.

<KeyboardAvoidingView style={styles.container} behavior="padding">
      <View style={styles.inputContainer}>
        <TextInput
          placeholder="Email"
          value={email}
//          onChangeText={(text) => setEmail(text)}
          style={styles.input}
        />
        <TextInput
          placeholder="Password"
          value={password}
//          onChangeText={(text) => setPassword(text)}
          style={styles.input}
          secureTextEntry
        />
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={handleSignIn} style={styles.button}>
          <Text style={styles.buttonText}>Login</Text>
        </TouchableOpacity>
        <TouchableOpacity
//          onPress={handleSignUp}
          style={[styles.button, styles.buttonOutline]}
        >
          <Text style={styles.buttonOutlineText}>Register</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>

Tanda “//” pada kode adalah hal-hal yang belum kita nyatakan, jadi lebih baik biarkan saja dikomentari sampai kita memasangnya.

Untuk LoginScreen ini kita akan menggunakan hook useEffect dari React.

Mari kita mulai dengan mendeklarasikan hal-hal yang kita perlukan untuk Login kita.
Email & Kata Sandi

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

Gaya navigasi kita adalah, seperti yang kami nyatakan di atas, useNavigation

const navigation = useNavigation();

Kami akan menggunakan "useEffect" untuk memastikan bahwa setelah pengguna kami login, dia harus diarahkan ke HomeScreen kami

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (user) {
        navigation.replace("Home");
      }
    });
    return unsubscribe;
  }, []);

Bagaimana kabar kita sampai disini? Jika Anda merasa pusing, tidak apa-apa, pemrograman itu sulit, tidak ada yang pandai memprogram.

Buat folder baru di file root Anda bernama “firebase.js”. Folder ini menghubungkan Anda ke akun Firebase Anda.

import { initializeApp } from "firebase/app";
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";

const firebaseConfig = {
  apiKey: XXXX,

  authDomain: XXXX,

  projectId: XXXX,

  storageBucket: XXXX,

  messagingSenderId: XXXX

  appId: XXXX,
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);

export { auth };

Kode “XXXX” adalah kode pribadi Anda dari Firebase. Hati-hati, jangan membaginya dengan siapa pun. Masyarakat bisa memanfaatkannya untuk kepentingannya.

Saatnya menghubungkan firebase dengan LoginScreen kami

Di dalam komponen LoginScreen Anda, buat fungsi baru bernama handleSignUp

  const handleSignUp = () => {
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log(user.email);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
      });
  };

Buat fungsi lain yang disebut handleSignIn

  const handleSignIn = () => {
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log("Signed in with: ", user.email);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
      });
  };

Sekarang cepat pergi & batalkan komentar pada 3 komentar Anda di bagian kembalinya komponen LoginScreen Anda.

//          onChangeText={(text) => setEmail(text)}

//          onChangeText={(text) => setPassword(text)}

//          onPress={handleSignUp}

Setelah Anda menghapus komentar pada 3 baris ini, cobalah aplikasi Anda

Jalankan dari ponsel atau web Anda.

Jika ada kesalahan, coba selesaikan & bangun pengetahuan yang sangat baik tentang cara men-debug aplikasi.

Saya rasa Anda siap membuat aplikasi!