Sign up dan Login User Authentication Menggunakan Firebase Web
Login Authentication FirebaseWeb Sebuah komponen dari Firebase yang telah disediakan oleh App Inventor sangat berguna, terutama saat Anda membutuhkan aplikasi dengan data baru. Selain menggunakan Firebase sebagai penyimpanan data, Anda juga dapat memanfaatkan situs autentikasi di aplikasi Anda untuk memenuhi kebutuhan pengelolaan pengguna Anda. Artinya banyak fitur yang bisa kita gunakan seperti sign-up, verifikasi email, dan login. Terlebih lagi, semua informasi pengguna disimpan dan tersimpan di server Firebase, sehingga masalah pengguna yang paling sulit diselesaikan untuk Anda.
Firebase realtime database adalah Backend as a Service (BaaS) yang telah menyediakan berbagai layanan untuk membantu pengembangan aplikasi web dan mobile menjadi lebih cepat dan mudah dikelola secara realtime. Seperti halnya sebagian besar aplikasi seluler yang dibangun menggunakan React Native dan Expo memerlukan identifikasi pengguna. Hal ini memungkinkan aplikasi untuk menyimpan data pengguna dengan aman di cloud dan menyediakan fungsionalitas yang lebih dipersonalisasi.
Pada postingan kali ini, kami akan membahas cara membuat halaman login dan signup di HTML dengan JavaScript dan Firebase Realtime Database. Pada kesempatan kali ini kami akan menunjukkan cara membuat login dengan firebase - web menggunakan autentikasi firebase (database). Konsep ini sangat mudah dipelajari dan diterapkan bagi pengguna yang baru belajar firebase. Kami akan menggunakan aplikasi Firebase Authentication Javascript untuk menyimpan nilai seperti nama, email, dan kata sandi.
Baca juga : Cara Hosting di Firebase Dari Visual Studio Code
Register & Login Page (with authentication) using Firebase v9.6 | Javascript
Firebase menyediakan kode javascript yang menangani semua langkah yang diperlukan untuk menyiapkan, lalu masuk, bagi pengguna baru atau yang sudah ada. Baca selengkapnya tentang detail Otentikasi dengan Firebase menggunakan Akun Berbasis Kata Sandi menggunakan Javascript yang ada pada dokumentasi di website resminya.
Kode javascript ini dapat disertakan dalam file HTML statis, yang kemudian dapat Anda tambahkan ke aplikasi yang Anda buat dengan App Inventor, selama Anda juga menyertakan komponen WebViewer untuk memproses data untuk Anda, dan Anda juga dapat membuat beberapa modifikasi sederhana sehingga App Inventor dapat melihat javascript yang sedang berjalan.
Kami akan menjelaskan semua ini dalam posting ini dalam membuat aplikasi login. Tetapi pertama-tama Anda harus menyiapkan akun Firebase dan mengaturnya untuk memungkinkan pengguna mengautentikasi menggunakan email dan kata sandi mereka.
Di sini kami akan menunjukkan cara membuat halaman login dan pendaftaran dari awal dan sekarang kami akan melakukannya. Untuk itu, baca ulasannya dari awal hingga akhir karena di sini kami akan menunjukkan kepada Anda bagaimana melakukan semua validasi dan enkripsi kata sandi dan kami akan mengautentikasi pengguna dari firebase.
Jadi ada 3 file yang kami butuhkan dan akan kami kerjakan disini. Berikut adalah 3 file yang akan kita buat dalam proyek untuk halaman Login Firebase Authentication:
- Halaman Register
- Halaman Login
- Halaman Home
Sekarang Anda bisa membuat folder baru yang nantinya terdapat 3 file di dalamnya untuk membuat login dan register dengan firebase authentication.
Register and login page (from scratch) with authentication using javascript authentication with validation, encription and keep me logged in function firebase authentication
Documentation:
- Membaca dan Menulis Data di Web
More Firebase Javascript Tutorial:
- Firebase Realtime Database For Web Tutorial + Video Youtube
Software Used In Tutorial:
- Visual Code (64-bit) User
Project Description:
- HTML, CSS, Bootstrap 4.4, JavaScript
- Google Firebase Realtime Database
Cara Membuat Login dan Register User dengan Firebase Authentication
Firebase memiliki layanan Otentikasi yang terintegrasi dengan baik di aplikasi React Native dan Expo. Ini memiliki SDK yang siap digunakan dan mendukung beberapa penyedia otentikasi seperti email/kata sandi, nomor telepon, dan penyedia federasi (Google, Facebook, Twitter, dll.).
Dalam tutorial ini, mari kita lihat bagaimana sebagai pengembang web yang membangun aplikasi menggunakan database realtime firebase, Anda dapat mengintegrasikan dan menggunakan Firebase Authentication. Kami akan merancang sistem aplikasi sederhana dan membuat beberapa strategi sebagai berikut:
- buat beberapa contoh layar untuk menampilkan formulir (login, sign-up);
- buat layar beranda yang hanya dapat diakses oleh pengguna yang masuk;
- buat navigator yang berbeda menggunakan perpustakaan reaksi-navigasi;
- buat alur otentikasi dengan merender secara kondisional antara navigator ini saat pengguna masuk atau tidak;
- dan integrasikan Firebase Auth dengan metode email/sandi.
1. Membuat database firebase
Jadi pertama-tama kita akan membuat halaman daftar (register) akun login! tetapi untuk itu di sini yang kita butuhkan adalah database firebase. Jadi kita akan membuat database terlebih dahulu disini.
Sekarang kita pergi ke Google untuk mencari situs web dengan mengetikkan kata kunci di mesin pencari "firebase" (firebase.google.com). Jika halaman yang ditampilkan di mesin pencari Google muncul, pilih di bagian Firebase console.
Anda harus masuk ke akun Google Anda untuk membuat proyek di sana. Setelah itu, untuk membuat proyek di sana Anda dapat mengklik + Tambahkan proyek.
Selanjutnya buat nama proyek Anda disana. Seperti contoh nama proyek yang kami buat "up-login".
Sesudah itu klik tombol Continue > Nonaktifkan mode pada keterangan "aktifkan Google Analytics untuk proyek ini" > Setelah itu klik tombol Buat Proyek. Dan tunggu proses yang sedang berlangsung...Jika proyek baru Anda sudah siap klik tombol Continue lagi.
Setelah muncul halaman firebase sekarang saatnya kita membuat database realtime. Sekarang, buat basis data waktu nyata, klik menu pilihan Realtime Database > Create Database.
Pada form "Set up database" di langkah 1 Database option Anda bisa langsung mengklik tombol Next. Selanjutnya pada langkah 2 Security rules pilih Start in test mode > klik tombol Enable.
Jadi sekarang database dibuat untuk apa yang perlu kita lakukan. Berikut tampilan database yang masih kosong dan akan kita hubungkan dengan project yang kita buat.
Sekarang yang perlu kita lakukan adalah pergi ke halaman tinjauan proyek dan klik menu "Project Overview". Karena disana kita akan menambahkan aplikasi web yang akan kita sambungkan ke project yang dibuat. Sekarang kita akan menambahkan aplikasi web! jadi pilih aplikasi "web </>" seperti pada gambar di bawah ini.
1. Register App
Setelah itu buat nama apa pun tidak masalah pada form Add Firebase to your web app. Tidak perlu mencentang pada keterangan "Also set up Firebase Hosting for this app". Dan langsung saja klik tombol Register app.
2. Add Firebase SDK
Pada halaman tampilan form yang muncul sekarang Anda bisa klik "Use a <script> tag" dan salin semua kode disana dan klik tombol Continue to console.
2. Membuat Halaman Register
Pada titik ini, saatnya kita mendesain halaman register yang akan kita tautkan dengan kode script yang telah kita copy tadi. Sekarang Anda dapat membuat file baru dengan nama "register.html" dan membuat kode dasar seperti berikut:
Sekarang tempelkan skrip yang tadi disalin tadi tepat di bawah kode tag pembuka <body> atau diatas tag penutup </body>. Sehingga kode akan menjadi seperti berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
</head>
<body>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
const firebaseConfig = {
apiKey: "AIzaSyBzYBPdI4JOgAs-HWQxJR-7GN5liTWFgbU",
authDomain: "up-login-afe7d.firebaseapp.com",
databaseURL: "https://up-login-afe7d-default-rtdb.firebaseio.com",
projectId: "up-login-afe7d",
storageBucket: "up-login-afe7d.appspot.com",
messagingSenderId: "492165626841",
appId: "1:492165626841:web:82a44341d14d3e0e0ff7c8"
};
const app = initializeApp(firebaseConfig);
</script>
</body>
</html>
Pastikan Anda mengubah kode yang saya tandai dengan warna merah di atas dengan kode skrip Anda sendiri.
Sekarang kita membutuhkan beberapa fungsi lagi sehingga kita akan mengimpor beberapa fungsi yang diperlukan dari perpustakaan database firebase. Perlu diketahui bahwa dua pernyataan impor dari kode script diatas yang kita dapatkan dari firebase harus berada di dalam skrip dengan modul tipe dan yang lainnya adalah bahwa versi firebase ini harus sama untuk keduanya.
Pada kode tersebut ini bisa berupa versi apa pun tetapi harus sama untuk kedua pernyataan impor yang kita sebenarnya tidak memerlukan pembaruan ini. Setelah itu kami menambahkan kode berikut ini:
import { getDatabase, ref, set, child, get }
from "https://www.gstatic.com/firebasejs/9.6.6/firebase-database.js";
const db = getDatabase();
Kami menambahkan kode import yang ada diatas tepat di bawah kode const app = initializeApp(firebaseConfig);. Sekarang konfigurasi telah selesai dan kita dapat memulai membuat halaman daftar. Hal lain yang ingin saya tambahkan adalah saya memerlukan cdn crypto js. Jadi langsung saja kita ketikkan di mesin pencari Google dengan kata kunci "crypto js" Anda bisa mendapatkan linknya disana.
Setelah itu di dalam kepala kita perlu menambahkan tag script dengan tautan link crypto js. Sehingga kita bisa mendeklarasikan skrip dengan tautan link seperti berikut ini:
<script scr="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
Disini kita juga akan membutuhkan tautan "boostrap 4.4". Jadi kita akan membutuhkan tautan ini juga.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Baru setelah itu sekarang kita dapat memulai membuat halaman daftar. Saya akan mendeklarasikan 'div' dan ada 'heading' untuk mendaftar sehingga akan ada bidang untuk nama lengkap dan kelas kontrol formulir. Jadi ini adalah kelas bootstrap dan saya juga akan meletakkan mb3 disini jadi margin kelas berada dibawah Sign Up.
<div class="mb-5">
<h3 class="mb-3">Sign Up</h3>
<input type="text" placeholder="Fullname" id="nameInp" class="form-control mb-3">
<input type="text" placeholder="Email" id="emailInp" class="form-control mb-3">
<input type="text" placeholder="Username" id="userInp" class="form-control mb-3">
<input type="password" placeholder="Password" id="passInp" class="form-control mb-3">
<button type="text" id="sub_btn" class="btn w-100 btn-outline-primary mb-3">Sign Up</button>
<a href="login.html" class="badge badge-secondary py-1 w-100">Already Have An Account?</a>
</div>
Jadi ini semua adalah kelas bootstrap yang memudahkan untuk membuat halaman yang terlihat bagus. Saya ingin memberikan div ini class dan katakanlah (mb5) agar terlihat lebih rapi dan terlihat jauh lebih baik. Dan pada id tombol akan saya ubah menjadi sub_btn. Setelah itu saya memerlukan badge sehingga tautan akan pergi ke halaman login. Disini saya juga menambahkan padding (py-1) sehingga akan tampak menonjol jadi padding ke atas dan bawah. Saya juga menambahkan kelas tombol dan akan memberikan class bootstrap (w-100) dan itu akan terlihat menjadi lebih baik.
Setelah itu kita akan menambahkan kode style dan mengubah tampilan body menjadi "flex" sehingga dapat membawa tombol input menjadi ke tengah halaman. Ini akan membuat tampilan halaman menjadi terlihat jauh lebih baik dan ini tidak terpusat secara vertikal karena ada kotak fleksibel berakhir disini. Saya perlu flexbox untuk ditempati pada area tampilan lengkap dari browser. Jadi yang saya lakukan adalah membuat tinggi dan lebar body menjadi sama dengan viewport. Disini saya juga akan membuat margin 0 piksel (px). Jadi kita tidak memerlukan margin di atas body.
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0px;
}
</style>
Jadi kode tersebut akan membuat tampilan yang lebih akurat dan jauh lebih baik. Setelah itu yang akan kami lakukan adalah membuat tombol Sign Up menempati ruang menu pada formulir ini.
Sekarang kita dapat melihat perubahan kode yang telah kami modifikasi dan akan tampak menjadi seperti kode berikut ini:
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0px;
}
</style>
</head>
<body>
<div class="mb-5">
<h3 class="mb-3">Sign Up</h3>
<input type="text" placeholder="Fullname" id="nameInp" class="form-control mb-3">
<input type="text" placeholder="Email" id="emailInp" class="form-control mb-3">
<input type="text" placeholder="Username" id="userInp" class="form-control mb-3">
<input type="password" placeholder="Password" id="passInp" class="form-control mb-3">
<button type="text" id="sub_btn" class="btn w-100 btn-outline-primary mb-3">Sign Up</button>
<a href="login.html" class="badge badge-secondary py-1 w-100">Already Have An Account?</a>
</div>
<script type="module">
//-----------------------FIREBASE CONFIG-------------------------------------------------------------------------------------------------------//
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
const firebaseConfig = {
apiKey: "AIzaSyBzYBPdI4JOgAs-HWQxJR-7GN5liTWFgbU",
authDomain: "up-login-afe7d.firebaseapp.com",
databaseURL: "https://up-login-afe7d-default-rtdb.firebaseio.com",
projectId: "up-login-afe7d",
storageBucket: "up-login-afe7d.appspot.com",
messagingSenderId: "492165626841",
appId: "1:492165626841:web:82a44341d14d3e0e0ff7c8"
};
const app = initializeApp(firebaseConfig);
import { getDatabase, ref, set, child, get }
from "https://www.gstatic.com/firebasejs/9.6.6/firebase-database.js";
const db = getDatabase();
//------------------------------THE REFRENECES-------------------------------------------------------------------------------------------------//
const name = document.getElementById('nameInp');
const email = document.getElementById('emailInp');
const username = document.getElementById('userInp');
const pass = document.getElementById('passInp');
const submit = document.getElementById('sub_btn');
//---------------------------------VALIDATION--------------------------------------------------------------------------------------------------//
function isEmptyOrSpaces(str){
return str === null || str.match(/^ *$/) !== null;
}
function Validation(){
let nameregex = /^[a-zA-Z\s]+$/;
let emailregex = /^[a-zA-Z0-9]+@(gmail|yahoo|outlook)\.com$/;
let userregex = /^[a-zA-Z0-9]{5,}$/;
if(isEmptyOrSpaces(name.value) || isEmptyOrSpaces(email.value) || isEmptyOrSpaces(username.value) ||
isEmptyOrSpaces(pass.value)){
alert("you cannot left any field empty");
return false;
}
if(!nameregex.test(name.value)){
alert("the name should only contain alphabets!");
return false;
}
if(!emailregex.test(email.value)){
alert("enter a valid email");
return false;
}
if(!userregex.test(username.value)){
alert("-username can only be alphanumeric\n-username must be aleast 5 characters\n-username cannot contain spaces");
return false;
}
return true;
}
//---------------------------------REGISTER USER TO FIREBASE-----------------------------------------------------------------------------------//
function RegisterUser(){
if(!Validation()){
return;
};
const dbRef = ref(db);
get(child(dbRef, "UsersList/"+ username.value)).then((snapshot)=>{
if(snapshot.exists()){
alert("Account Already Exist!");
}
else{
set(ref(db, "UsersList/"+ username.value),
{
fullname: name.value,
email: email.value,
username: username.value,
password: encPass()
})
.then(()=>{
alert("user added successfully");
})
.catch((error)=>{
alert("error"+ error);
})
}
});
}
//---------------------------------ENCRIPTION-------------------------------------------------------------------------------------------------//
function encPass(){
var pass12 = CryptoJS.AES.encrypt(pass.value, pass.value);
return pass12.toString();
}
//---------------------------------ASSIGN THE EVENTS------------------------------------------------------------------------------------------//
submit.addEventListener('click', RegisterUser);
</script>
</body>
</html>
3. Membuat Halaman Login
Setelah kita membuat halaman register sekarang saatnya kita akan merancang halaman Login. Pada tahap ini kita juga akan membuat file baru dengan nama "login.html". Untuk tahap ini Anda bisa menyalin seluruh kode pada file register.html dan tempelkan kode tersebut pada file "login.html". Sekarang kita akan memodifikasi kode tersebut untuk membuat halaman login.
Berikut adalah file login yang telah kami buat untuk membuat halaman login. Sekarang Anda dapat membuat file baru dengan nama "login.html". Untuk itu salin semua kode di bawah ini dan tempel di file login yang Anda buat.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0px;
}
</style>
</head>
<body>
<div class="mb-5">
<h3 class="mb-3">Login</h3>
<input type="text" placeholder="Username" id="userInp" class="form-control mb-3">
<input type="password" placeholder="Password" id="passInp" class="form-control mb-3">
<div class="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Keep me Logged In</label>
</div>
<button type="text" id="sub_btn" class="btn w-100 btn-outline-primary mb-3">Login</button>
<a href="register.html" class="badge badge-secondary py-1 w-100">Want to Create A New Account?</a>
</div>
<script type="module">
//-----------------------FIREBASE CONFIG-------------------------------------------------------------------//
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
apiKey: "AIzaSyBzYBPdI4JOgAs-HWQxJR-7GN5liTWFgbU",
authDomain: "up-login-afe7d.firebaseapp.com",
databaseURL: "https://up-login-afe7d-default-rtdb.firebaseio.com",
projectId: "up-login-afe7d",
storageBucket: "up-login-afe7d.appspot.com",
messagingSenderId: "492165626841",
appId: "1:492165626841:web:82a44341d14d3e0e0ff7c8"
const app = initializeApp(firebaseConfig);
import { getDatabase, ref, set, child, get }
from "https://www.gstatic.com/firebasejs/9.6.6/firebase-database.js";
const db = getDatabase();
//------------------------------THE REFRENECES---------------------------------------------------------------------//
const username = document.getElementById('userInp');
const pass = document.getElementById('passInp');
const submit = document.getElementById('sub_btn');
//------------------------------AUTHENTICATION PROCESS-------------------------------------------------------------//
function AuthenticateUser(){
const dbref = ref(db);
get(child(dbref, "UsersList/"+ username.value)).then((snapshot)=>{
if(snapshot.exists()){
alert()
let dbpass = decPass(snapshot.val().password);
if(dbpass == pass.value){
login(snapshot.val());
}
else{
alert("username or password is invalid");
}
}
else{
alert("username or password is invalid");
}
});
}
//------------------------------DECRIPTION-------------------------------------------------------------------------//
function decPass(dbpass){
var pass12 = CryptoJS.AES.decrypt(dbpass, pass.value);
return pass12.toString(CryptoJS.enc.utf8);
}
//------------------------------LOGIN------------------------------------------------------------------------------//
function login(user){
let keepLoggedIn = document.getElementById('customSwitch1').checked;
if(!keepLoggedIn){
sessionStorage.setItem('user', JSON.stringify(user));
window.location="home.html";
}
else{
localStorage.setItem('keepLoggedIn', 'yes');
localStorage.setItem('user', JSON.stringify(user));
window.location="home.html";
}
}
//---------------------------------ASSIGN THE EVENTS---------------------------------------------------------------//
submit.addEventListener('click', AuthenticateUser);
</script>
</body>
</html>
4. Membuat Halaman Home
Di halaman beranda kami menambahkan navbar. Di sini kami juga menggunakan boostrap untuk membuat proyek lebih cepat. Jadi saya menyalin kode untuk membuat navbar dan meletakkannya di bagian <body>...</body>. Mode ini berfungsi untuk mengubah terang menjadi gelap.
Setelah kita membuat halaman register sekarang saatnya kita akan merancang halaman Home. Pada tahap ini kita juga akan membuat file baru dengan nama "home.html". Sekarang kita akan memodifikasi kode tersebut untuk membuat halaman login.
Berikut adalah file home yang telah kami buat untuk membuat halaman Home. Sekarang Anda dapat membuat file baru dengan nama "home.html". Untuk itu salin semua kode di bawah ini dan tempel di file home yang Anda buat.
home.html
Setelah semuanya selesai sekarang kita bisa melihat tampilan hasil dengan membuka file pertama yaitu : home.html. Berikut ini hasil tampilan yang telah selesai kita buat dan sudah terkoneksi dengan firebase database.
Hasil Tampilan Sign up dan Login User Authentication
Berikut ini adalah hasil tampilan sign up dan login user authentication dengan firebase:
Jadi semua data yang kita input ke form register akan masuk ke database firebase. Data yang dikirimkan dari pengguna yang mendaftar ke form login akan masuk dengan sangat cepat (realtime) seperti terlihat pada gambar berikut.
Setelah semuanya selesai sekarang kita bisa melihat tampilan hasil dengan membuka file pertama yaitu : home.html. Berikut ini keterangan untuk Sign up dan Login User Authentication Menggunakan Firebase Web:
- Pertama Anda bisa membuka halaman homepage (home.html).
- Pada halaman home Anda bisa mengklik tombol "Create New Account" untuk registrasi kepemilikan akun jika belum mendaftar. Kalau sudah pernah mendaftar Anda tinggi klik saja tombol "Login" untuk masuk ke halaman beranda.
- Sekarang Anda bisa membuat akun baru yang menakjubkan dengan mengisi form formulir pendaftaran (register).
- Setelah selesai mengisi formulir Anda klik tombol "Sign Up".
- Jika berhasil mendaftar maka akan muncul notif keterangan "user added successfully".
Sekarang kita bisa melihat data yang kita inputkan pada form register tersebut akan masuk ke database firebase seperti pada gambar diatas.
Baca juga : Aplikasi Jadwal Aktivitas Menggunakan Firebase
Kesimpulan
Oke sob, jadi kita sudah belajar cara mendaftarkan data pengguna (email dan kata sandi) Masuk dengan data terdaftar dan menampilkan informasi pengguna dari data terdaftar berkat Firebase. Terima kasih kepada Google karena telah mempermudah segalanya.
Demikian postingan kali ini tentang Sign up dan Login User Authentication Menggunakan Firebase Web. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk bagikan artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
