Belajar React Native #4 : Authentication Firebase (Email & Password)


Authentication Firebase

Pada part ke 4 ini adalah part salah satu fitur pada firebase yaitu authentication dimana kita dapat melakukan authentication login pada aplikasi android kita.

1. Siapkan componen yg diperlukan

Sebelum memulai untuk membuat auth login firebase menggunakan email dan password kita membutuhkan beberapa komponen yg perlu kita install seperti gambar dibawah ini.




2. Buatlah componen untuk screen

Setelah selesai untuk menginstall komponen yg diperlukan, selanjutnya kita mulai pada bagian pencodingan yaitu menyiapkan coding untuk screen yaitu untuk Form. Pertama tama buatlah FormButton.js seperti gambar dibawah ini, lalu simpan pada folder components.


Selanjutnya buatlah FormInput.js seperti gambar dibawah ini dan simpan di folder components.



3. Buatlah Screen

Siapkan tampilan screen, seperti signup, login, home lalu simpan pada folder screens. Gambar dibawah ini merupakan contoh screen signup hingga home.

Login Screen


SignUp Screen



Home Screem

Dan kita juga perlu membuat Dimension.js yg disimpan dalam folder utils untuk menunjang tampilan screen kita.


4. Kebutuhan Authentication

Tahap keempat adalah menyiapkan kebutuhan auth seperti authstack.js, appstack.js, authprovider.js, routes.js, index.js lalu simpan di folder navigation. Contoh coding seperti gambar dibawah ini.

AuthStack.js

AppStack.js

AuthProvider.js


Lalu kita rutekan semuanya dengan Routes.js



Lalu buatlah index.js lalu simpan di folder navigation.



5. Edit App.js

Lalu ditahap terakhir ini kalian edit App.js seperti gambar dibawah ini.


Setelah semua tahap telah kalian lakukan, selanjutnya kalian run android kalian dengan npx react-native run-android pada CMD di directory project kalian. Hasilnya akan kurang lebih seperti gambar dibawah ini. 

Login Screen

SignUp Screen

Home Screen

Dan anda juga dapat mengecek authentication firebase anda apakah akun yg anda buat pada signup screen tercatat di firebase anda.



Pesan utama adalah selalu nyalakan internet anda apabila run react native karena mungkin aplikasi android anda membutuhkan suplai internet.

~ Terima Kasih sudah melihat konten ini semoga bermanfaat, maaf apabila ada kesalahan dan kekurangan. ~

Komentar

Posting Komentar