React Native — Firebase: Email Authentication

4 min readJul 8, 2020

Merhaba arkadaşlar önceki yazımda React Native ve Firebase kullanarak güzel bir Todo App yapmıştık. Görmeyenleriniz varsa buradan ulaşabilirsiniz. Bugünkü yazımın konusu uygulamaların giriş sayfalarında hep karşımıza çıkan Giriş Yap / Kayıt Ol sayfalarının React Native ve Firebase üzerinde nasıl kullanıldığını bir uygulama hazırlayarak görmüş olacağız.

Uygulamamızın tasarımını Figma üzerinden aşağıdaki gibi düzenledim. Sizlerde kendi uygulamanız için bir taslak hazırlarsanız koda dökme aşamasında güzel bir rehber olacağını düşünüyorum.

Tasarımımız hazır olduğuna göre uygulamamızı ayağa kaldıralım. Ben uygulamalarımı expo kullanarak hazırlıyorum bunun için aşağıdaki komutlarla yeni bir proje oluşturuyor ve başlatıyorum.

expo init firebase-authenticationexpo start

Gerekli Paketleri Kuralım

React Navigation

Uygulamamızda sayfalar arasında geçiş yapılacağından dolayı öncelikle projemize react-navigation ve ilgili paketleri yüklüyorum.

npm install @react-navigation/native  */ REACT NAVIGATION EKLİYORUZnpm install @react-navigation/stack   */ STACK NAVIGATOR EKLİYORUZnpm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view                  */ VE DİĞERLERİ... :)

2. Firebase

Firebase ve firebase kullanıcı kayıt paketlerini ekliyoruz.

npm install firebasenpm i @react-native-firebase/authComponentleri Oluşturalım

Projemizin düzenli olması ve tekrar kullanılabilir bileşenlerden oluşmasını istediğimiz için ana dizin üzerinde src klasörü oluşturuyoruz ardından aşağıdaki gibi düzenliyoruz.

Firebase Projemizi Oluşturalım

Firebase web sitesinde konsol üzerinden firebase-login adlı dosyamızı aşağıdaki adımları takip ederek oluşturalım.

2. Googe Analytics i Etkinleştirerek Projeyi Oluşturuyoruz

3. Projemiz Hazır

4. Proje İçindeyken Web Kısmını Seçerek Uygulamamıza Ekliyoruz

5. Uygulama İçin İsimlendirme Yapıyoruz

6. Burada Karşımıza Çıkan Bilgiler Uygulamamıza Özeldir Bu Bilgileri Kopyalayıp App.js Dosyasına Koyuyoruz

7. Proje Sayfasından Authentication Kısmına Giriyoruz

8. Sign-in Method Kısmından E-posta Seçeneğini Etkinleştiriyoruz

Firebase üzerinde e-posta ile giriş yapma seçeneğini aktifleştirdiğimize göre artık sayfaarımızı oluşturmaya başlayalım.

Componentleri Oluşturalım

Sayfalarımızı hazırlarken birden fazla kez kullanacağımız bileşenleri bir kez oluşturup istediğimiz her sayfada import ederek kullanabiliriz. Bu bizi tekrar tekrar kod yazmaktan ve sayfalar arasında tasarım farklılıkları oluşmasından koruyor. Projemizde birden fazla kez kullanacağımız 3 element var. Bunlar kullanıcı bilgilerini alacağımız Input, Sayfa isimlendirmek için kullanacağımız PrimaryTitle ve Button lardır. Şimdi bu bileşenleri daha önceden hazırlamış olduğumuz tasarıma göre oluşturabiliriz.

Button.js

2. Input.js

Kullanıcı bilgilerini alacağımız TextInput’ları burada tasarıma göre düzenliyoruz. Ve parametreler veriyoruz.

3. PrimaryTitle.js

Sayfa Başlıklarını kendimize özel olmasını istediğimiz için burada bir title oluşturuyoruz. Sayfalarımızda import ederek kullanacağız.

Login ve SignUp Sayfalarını Oluşturalım

SignUp Screen

Bu sayfada yeni kullanıcı kaydı yapıyoruz ve bilgileri firebase e gönderme işlemlerini yapıyoruz. Daha önceden hazırladığımız componentleri yine bu sayfada kullanıyoruz.Eğer mail adresi / parola yanlış,eksik ya da doğru olmayan bir formatta olursa hata mesajlarını ekrana göstermek için de aşağıda bir yapı oluşturduk.

2. Login Screen

Bu sayfada kullanıcının daha önce kayıt ekranında girdiği bilgiler ile giriş yapılması sağlanıyor.Hazırladığımız componentleri kullanıyoruz.

3. App.js

Projemiz Başarıyla Tamamlandı 👌

Kullanıcının girdiği bilgiler firebase veritabanımızda kayıtlandı. Sizler uygulama içinde kullanıcı giriş yaptığında eğer kayıtlıysa anasayfaya geçiş yapılmasını, özel pop-up kullanarak uyarılar oluşturma gibi özelleştirmeler yaparak geliştirebilirsiniz.

Projenin bitmiş halini Github hesabıma da yükledim firebase-reactnative-login adresinden ulaşıp inceleyebilirsiniz. Haftaya yeni bir React Native yazısı ile burada olacağım. Sizleri de beklerim.