A Simple Todo List App Using React Native Expo, Firebase Authentication & Cloud Firestore (Part 3 – Authentication & Screen Navigation Setup)
Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!
Setelah Splash Screen berhasil dibuat pada Part 2, pada bagian ini kita akan mulai mengatur sistem autentikasi dan navigasi halaman pada aplikasi My Todolist Gue.
Autentikasi merupakan proses untuk mengidentifikasi pengguna melalui akun yang dimiliki. Pada tutorial kali ini, kita akan menggunakan Firebase Authentication untuk membuat fitur Register dan Login menggunakan email dan password, sehingga pengguna dapat memiliki akun dan masuk ke aplikasi.
Selain itu, kita juga akan mengatur navigasi antarhalaman menggunakan React Navigation. Setelah pengguna berhasil login, aplikasi akan menampilkan halaman utama dengan tiga menu navigasi, yaitu Home, Todo, dan Profile. Dengan demikian, aplikasi My Todolist Gue akan memiliki alur penggunaan yang lebih terstruktur, mulai dari proses registrasi hingga pengguna masuk ke halaman utama.
A. Persiapan Tools
- Pada VSCode pastikan sudah membuka folder project yang sudah berhasil diinstall sebelumnya
- Pastikan pada Terminal VSCode sudah mengarahkan root folder project my-todolist-gue
B. Langkah-langkah Pengaturan Halaman Authentication
Persiapan Database, Assets, Components
Database
- Buatlah folder baru bernama database di dalam folder my-todolist-gue
- Kemudian buatlah file baru bernama firebaseConfig.js di dalam folder database
- Selanjutnya isi file firebaseConfig.js dengan paragraf script berikut lalu simpan
Assets
- Bukalah folder assets
- Copy seluruh paragraf script berikut dan Paste ke dalam file styles.js lalu simpan *posisi menempelkan (paste) lihat gambar
loadingIndicator: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
authContainer: {
flexGrow: 1,
justifyContent: "center",
padding: 20,
},
screen: {
flex: 1,
backgroundColor: "#F4D5DE",
paddingTop: 60,
},
card: {
backgroundColor: "#FFFFFF",
borderRadius: 15,
padding: 25,
elevation: 5,
marginBottom: 20,
},
title: {
fontSize: 24,
fontWeight: "bold",
textAlign: "center",
color: "#F92C6A",
},
subtitle: {
textAlign: "center",
color: "#666666",
marginTop: 5,
marginBottom: 25,
},
label: {
fontSize: 15,
fontWeight: "bold",
marginTop: 10,
marginBottom: 5,
color: "#333333",
},
input: {
borderWidth: 1,
borderColor: "#BDBDBD",
borderRadius: 10,
padding: 12,
marginBottom: 10,
backgroundColor: "#FAFAFA",
fontSize: 16,
},
button: {
backgroundColor: "#F92C6A",
padding: 14,
borderRadius: 10,
marginTop: 15,
},
buttonText: {
color: "#FFFFFF",
textAlign: "center",
fontWeight: "bold",
fontSize: 15,
},
secondaryButton: {
padding: 15,
marginTop: 10,
},
secondaryText: {
color: "#1565C0",
textAlign: "center",
},
modalOverlay: {
flex: 1,
backgroundColor: "rgba(0, 0, 0, 0.5)",
alignItems: "center",
justifyContent: "center",
padding: 20,
},
modalBox: {
width: "100%",
maxWidth: 400,
backgroundColor: "#FFFFFF",
borderRadius: 15,
padding: 25,
},
modalTitle: {
fontSize: 22,
fontWeight: "bold",
color: "#333333",
textAlign: "center",
marginBottom: 10,
},
modalSuccessTitle: {
color: "#2E7D32",
},
modalErrorTitle: {
color: "#D32F2F",
},
modalMessage: {
fontSize: 15,
color: "#666666",
textAlign: "center",
lineHeight: 22,
marginBottom: 25,
},
modalOkButton: {
backgroundColor: "#F92C6A",
paddingVertical: 13,
borderRadius: 10,
alignItems: "center",
justifyContent: "center",
},
modalOkText: {
color: "#FFFFFF",
fontSize: 15,
fontWeight: "bold",
},
modalButtonContainer: {
flexDirection: "row",
gap: 10,
},
modalCancelButton: {
flex: 1,
backgroundColor: "#EEEEEE",
paddingVertical: 13,
borderRadius: 10,
alignItems: "center",
justifyContent: "center",
},
modalCancelText: {
color: "#555555",
fontSize: 15,
fontWeight: "bold",
},
modalLogoutButton: {
flex: 1,
backgroundColor: "#F92C6A",
paddingVertical: 13,
borderRadius: 10,
alignItems: "center",
justifyContent: "center",
},
modalLogoutText: {
color: "#FFFFFF",
fontSize: 15,
fontWeight: "bold",
},
homeCard: {
backgroundColor: "#FFFFFF",
borderRadius: 15,
padding: 25,
margin: 20,
elevation: 5,
alignItems: "center",
},
homeEmail: {
fontSize: 16,
color: "#555555",
marginTop: 10,
},
infoBox: {
width: "100%",
backgroundColor: "#FFE0EF",
borderRadius: 10,
padding: 15,
marginTop: 25,
},
infoBoxText: {
fontWeight: "bold",
marginBottom: 10,
color: "#F92C6A",
},
infoItem: {
marginTop: 8,
color: "#333333",
},
Components
- Buatlah file baru bernama AuthScreen.js di dalam folder components
- Copy seluruh paragraf script berikut dan Paste ke dalam file AuthScreen.js lalu simpan
import React, { useState } from "react";
import {View, Text, TextInput, Pressable, KeyboardAvoidingView, Platform, ScrollView, Modal} from "react-native";
import {createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut} from "firebase/auth";
import { doc, setDoc } from "firebase/firestore";
import { auth, db } from "../database/firebaseConfig";
import { styles } from "../assets/styles";
export default function AuthScreen({onRegisterStart, onRegisterSuccess, onRegisterFinish}) {
return (
<>
<KeyboardAvoidingView style={styles.screen} behavior={Platform.OS === "ios" ? "padding" : undefined}>
<ScrollView contentContainerStyle={styles.authContainer} keyboardShouldPersistTaps="handled">
<View style={styles.card}>
<Text style={styles.title}>My Todolist Gue</Text>
<Text style={styles.subtitle}>{modeRegister ? "Buat Akun Baru" : "Silakan Login"}</Text>
<Text style={styles.label}>Email</Text>
<TextInput
style={styles.input}
placeholder="Masukkan email"
placeholderTextColor="#888"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
value={email}
onChangeText={setEmail}
/>
<Text style={styles.label}>Password</Text>
<TextInput
style={styles.input}
placeholder="Minimal 6 karakter"
placeholderTextColor="#888"
secureTextEntry={true}
value={password}
onChangeText={setPassword}
/>
<Pressable style={styles.button} onPress={modeRegister ? register : login} hitSlop={10}>
<Text style={styles.buttonText}>{modeRegister ? "REGISTER" : "LOGIN"}</Text>
</Pressable>
<Pressable style={styles.secondaryButton} onPress={() => setModeRegister(!modeRegister)} hitSlop={10}>
<Text style={styles.secondaryText}>{modeRegister ? "Sudah punya akun? Login" : "Belum punya akun? Register"}</Text>
</Pressable>
</View>
</ScrollView>
</KeyboardAvoidingView>
{/* MODAL NOTIFIKASI REGISTER & LOGIN */}
<Modal visible={showModal} transparent={true} animationType="fade" onRequestClose={tutupModal}>
<View style={styles.modalOverlay}>
<View style={styles.modalBox}>
<Text
style={[
styles.modalTitle,
modalType === "success" && styles.modalSuccessTitle,
modalType === "error" && styles.modalErrorTitle,
]}
>
{modalTitle}
</Text>
<Text style={styles.modalMessage}>{modalMessage}</Text>
<Pressable style={styles.modalOkButton} onPress={tutupModal} hitSlop={10}>
<Text style={styles.modalOkText}>OK</Text>
</Pressable>
</View>
</View>
</Modal>
</>
);
}
- Selanjutnya tambahkan paragraf script berikut di dalam file AuthScreen.js lalu simpan *posisi di mana menambahkan code lihat gambar
- Kemudian buatlah file baru bernama HomeScreen.js di dalam folder components
- Selanjutnya isi file HomeScreen.js dengan paragraf script berikut lalu simpan
C. Langkah-langkah Pengaturan Halaman Navigasi
Persiapan Navigasi, App
Navigasi
- Buatlah folder baru bernama navigation di dalam folder my-todolist-gue
- Kemudian buatlah file baru bernama MainTabs.js di dalam folder navigation
- Selanjutnya isi file MainTabs.js dengan paragraf script berikut lalu simpan
App
- Bukalah file bernama App.js di dalam folder my-todolist-gue
- Tambahkan beberapa import library berikut di dalam file App.js lalu simpan
- Selanjutnya Copy seluruh paragraf script berikut dan Paste ke dalam file App.js lalu simpan *posisi di mana menempelkan (paste) code lihat gambar
return (
<>
{!user ? (
<AuthScreen
onRegisterStart={() => {
isRegistering.current = true;
}}
onRegisterSuccess={() => {
tampilkanModal("Berhasil", "Akun berhasil dibuat. Silakan login.", "success");
}}
onRegisterFinish={() => {
isRegistering.current = false;
}}
/>
) : (
<MainTabs user={user} />
)}
{/* MODAL NOTIFIKASI AUTH GLOBAL */}
<Modal visible={showModal} transparent={true} animationType="fade" onRequestClose={tutupModal}>
<View style={styles.modalOverlay}>
<View style={styles.modalBox}>
<Text
style={[
styles.modalTitle,
modalType === "success" && styles.modalSuccessTitle,
modalType === "error" && styles.modalErrorTitle,
]}
>
{modalTitle}
</Text>
<Text style={styles.modalMessage}>{modalMessage}</Text>
<Pressable style={styles.modalOkButton} onPress={tutupModal} hitSlop={10}>
<Text style={styles.modalOkText}>OK</Text>
</Pressable>
</View>
</View>
</Modal>
</>
);
- Kemudian tambahkan paragraf script berikut di dalam file App.js lalu simpan *posisi di mana menambahkan code lihat gambar
- Selanjutnya me-running project dengan menjalankan perintah: npx expo start -c, lalu tekan Enter
2. tampilan terminal jika berhasil akan memunculkan QR Code yang siap untuk di scan
3. menampilkan web sebagai Live Preview dengan alamat url http://localhost:8081
- Kemudian buka aplikasi Expo Go di device Android/iOS, disarankan untuk login dengan akun Expo yang sama seperti login di terminal dan menggunakan sinyal internet yang sama antara komputer/laptop dengan device
- Pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge membuka url berikut: http://localhost:8081
dilihat di Dashboard Authentication
Anisa Damayanti
a founder of december skies code, a software engineering teacher, and a lifelong learner who just tries her best at whatever she does. let's work together!
You May Also Like
Laundry Management Website (Part 13-Multiple Role Based Authentication for Login)
How to Enable Firebase Authentication
