React&Redux Firebase Authetication işlemleri React

Firebase oturumu oluşturun. Ardından Authentication seçeneğini seçin Oturum açma yöntemi olarak eposta ve şifre işlemlerini aktifleştirin.

İşlemleri 
https://github.com/abdullahsuhaisk/ReactReduxFirebaseBlogApp
Reposundan da görebilirsiniz.

Sırada İndex.js den. FireStore ve FirebaseRedux kütüphanelerini aktifleştirip firebase 'e auth u set etmemiz gerekiyor.

İndex.js deki işlemlerim.

Sırada Reducerimi oluştrurmak var..

RootReducerım firebase 'e artık bağlandı. Firebase den gelen durumlara state den ulaşabileceğim.Firebase' den neler geliyormuş. Log olarak bir bakalım... Benim Main componentim bu projede dashboard oradan bakacağım.

State leri props a gönderip props'u ekranda gösterdik. Consolumuzda gelenler ;

Görüldüğü üzere firebase 'in içinde auth olarak geldi. isLoaded:false ve isEmpty:true herhangibi bir oturum açmadığını bize söylüyor. Şimdi firebase consoluma gidip bir tane test user 'i oluşturacağım. Ardından sitemiz üzerinde giriş yapmaya çalışacağız. Authentication new userden 
test@test.com şifreside 123456 olmak üzere yeni bir kullanıcı oluşturduk. Bu kullancı kendi local hostumuzdan giriş yaptıracağız.

Login componentim bu daha şimdi bunu dolduracağım



State 'ye aldığım değerleri Firebase göndermem gerekiyor.

kullanacağım method 
firebase.auth().signInWithEmailAndPassword


Belki best practise olmadı ama işe yarar bir yöntem oldu. Şimdi dashboarda gidip consola baktığınız zaman 


firebasenin içindeki auth un dolu olduğu göreceksiniz. Şimdi sırada doğru düzgün reducer ve actions larını yazma kaldı.

Reducer klasörümü authReducer oluşturuyorum. Bunu rootReducerde combine reducer' e dahil ediyorum. Ardından login işlemi için action yazacağım. En sonunda componentimi actions kullanacak şekilde modified edeceğim.

1 ve ya 2 tane de mantık kurmak gerekecek kullanıcı login olduktan sonra redirect ile main componente aktarılsın ve login olmuş kullanıcıları log off menüsünü görürken login olmamışlar Sign in menusunu görsünler.

Actions larıma göre authReducer ımı tekrar düzenleyeceğim. Reducer state yönetimi yaptığım yerdir :)

Actions 

Actions ve reducer lerim şu şekil şimdi actionsumu componentime bağlayıp methodlarımı çekeceğim. Daha önce yaptğımız SignIn Componentini düzenleyeceğim.

Bunları yaparken hata aldım hatamın sebebi config dosyamda 
import 'firebase/auth';

Kütüphanesini unutmamdı.
Config de şu şekilde oluyor. Actionsuz ilk kullandığımda hata almadım. Ama actions da kullanmak istterdiğim zaman böyle olması gerekiyor.



Şimdi Sign In olan kullanıcıyı redirect yapalım. Bunun için state mizden bir auth objesi alacağız bu auth objesi dolu ise redirect ile anasyafaya yönlendirme yapacağız.Auth u alacağımız yer firebase.auth



Hata alırsak hatamızıda ternary operator ile gösteriyoruz. Sırada log off olma kaldı.

Navbar componentime link olarak log of secenegini koyacağım tıklandığı zaman onClick methodu çalışacak. Componentimde giriş yapmış kullanıcıya bakacağım eğer giriş var ise log of yok ise sigin menu de gösterilecek.
Eğer giriş yapmış kullanıcı var ise  Menüde log off kullanılacak.
Eğer sisteminizde üyelik zorunlu ise comment linı kullanabilirsiniz. Auth objesinin uid si dolu olmadan dashboarda girişe izin vermez. Mesela daha güvenlikli alan yaparsa uid=== herhangibi bir şeye eşit olmayanlarıda sokmama mantığı kurulabilir.

Şimdi authReady yapalım dikkatli bakınca componentin render ilk renderinde auth.uid boş geliyor menu Auth beklemeden dönüyor daha sonra ise auth objesi dolunca navbar tekrar render ediliyor bunu için authReady var.
index.js de yapmam gerekenler
Artık menum firebase.auth un cevabını bekliyor..

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

React JS Yazalım 1

Resim
Parent componentini Child1 ve Child2 componenti ile güncelleyelim. Reactda state güncelleme işlemi yapacağız. Parent componentim name ve password alanlarımdan oluşuyor. Name inputum child1 componentimde. Password inputum ise  child2 componentimde. Yavru komponentlerimin state tutmadan direk ata komponentimi güncellemelerini istiyorum bunun içinde iki tane yöntem ile yapabilirim 1. yöntem parent komponentimde child komponentimi çağırırken props olarak parent komponentimin methodunu child komponentime göndermem. 2. yöntem ise üst scope da method tanımlayıp bunu child komponentimde ulaşmak. import React , { Component } from " react " ; class Child1 extends Component { render () { this . state = { name : "" } return ( < div > < label > Name: </ label > < br /> < input type = " text " placeholder = " Name " onChange = { e => this . prop...
Devamı

Heroku deploy

Resim
   Heroku da github, bitbucked gibi kodlarınızı depolayabileceğiniz external git servisi, herokunun bir diğer güzelliği ise kodlarını derleyebilirsiniz.   Kodlarınızı derleyebilmeniz için bir kaç işlem yapmanız gerekli, benim derleme yapacağım kodlarım. NodeJs kullanarak yazılmış arka taraf ile ReactJs kullanılarak yazılmış öntaraftan oluşan fakat her iki sisteminde aynı yerde kullanılmasından dolayı tek taraflı bir derleme işlemi diyebiliriz.   Kısaca sistemi anlatmak gerekir ise NodeJs ve React kullanarak Blog sitesi kuruyorum. Amacım daha önce öğrendiklerii pekiştirmek öğrendiklerime yenilerini katmak ve güzel bir boilerplate hazırlamak. Sistemimin dizin yapısı Blog/Server/Client Server main klasörüm içinde NodeJs yani back-end tarafım var. Serverın içinde ise Client var. Yani token tutmama gerek kalmıyor. İlk olarak Server ın içinde ki packpage.json na aşağıdaki kodları ekliyorum "engines" : { "node" : "8.1.1" , "npm" ...
Devamı

Laravel & React 4

Resim
Bu bölümde axios ile api ya ulaşıp http istekleri yapacağız. Yeni bir component oluşturup. Constructarda bir initial state tanımlayıp componentwillMount yaşam döngüsü ile state mizi dolduracağız. D:\WorkSpace\Tutorals\Laravel\react-lara> npm install axios --save Komutu ile öncelikle projemize axios kütüphanesini dahil ediyoruz. Ardından yeni bir component oluşturuyoruz. Constructor methodumda initState yi tanımlıyorum. constructor (){ super (); this .state = { blog :[] } console . log ( super ()); } ardından Componentwillmount ile apimıza istek atacağız. Bu method hem server hemde client oluşturulmadan önce çalıştırılır. ComponentDidMount ise ilk çalışmanın ardından sunucu tarafından çalıştırılır. componentWillMount () { axios . get ( '/api/blog' ). then ( response => { this . setState ({ blog : response .data }) }). catch ( err => { ...
Devamı