Herkese tekrardan merhaba bu yazımda sizlere server tarafı için Firebase ,Form Handling için React Hook Form ve Navigation için ise React Navigation kullanarak React Native ile Authentication Flow işlemlerini anlatmaya çalışacağım.
Bu konuyu anlamak için birkaç türkçe blog yazısı buldum fakat daha iyi kavramak adına dokumanları okuyarak kendim bir ornek geliştirmeye çalıştım.
Yazdığım kodlarıda github üzerinden paylaşacağım.
Şimdi ilk olarak Navigation yapısını kurarak projeye başladım.Navigation yapısını olusturup ,Componentleri yaratarak işe girişmek bana daha rahat geldiği için böyle bir yolu tercih ettim.
react-native init ile başlangıç projesini olusturduğunuzu varsayarak ilk olarak App.js içerisini temizlememiz gerekli.Burada sadece oluşturacağımız AppContainer componentini döndüreceğiz. App.js içeriğinin tamamını silerek aşağıdaki kodu ister snippet ile ister el ile yazarak componentimizi hazırlayalım.
/* App.js */
import React from 'react';
import AppContainer from './src/navigation/';
export default function App() {
return <AppContainer />;
}
Ardından kök dizininde src adlı klasörümüzü oluşturalım ve içerisine üç adet klasör ekleyeceğiz.Bunlar config,navigation ve screens klasörü olacaktır.
İlk olarak navigatipn flow’dan bahsedeyim.Bir tane Login formu,bir tane Sign Up formu ve Giriş yapılması halinde Tabbar’dan oluşan bir sayfaya yönlendirme işlemi yapacağız.Yani iki tane ana yapımız olacak biri login işleminden öncekiler biride login işleminden sonraki kısımlar.
İlk olarak Login öncesi kısımı oluşturalım.Bunun için navigation klasörü içerisinde AuthNavigation.js dosyasını oluşturalım.
/* AuthNavigation.js */
import {createStackNavigator} from 'react-navigation-stack';
import Login from '../screens/Login';
import SignUp from '../screens/SignUp';
const AuthNavigation = createStackNavigator(
{
Login: {screen: Login},
SignUp: {screen: SignUp},
},
{
initialRouteName: 'SignUp',
headerMode: 'none',
},
);
export default AuthNavigation;
Yukarıdaki kod parçasında Login ve Signup screenlerini import edip createStackNavigator ile stack navigation olşturuyoruz.
Ardından Login’den sonraki kısım için Tabbar.js adlı dosyamızı oluşturalım ve içine aşağıdaki kodları ekleyelim.
/* Tabbar.js */
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import Followers from '../screens/TabScreens/Followers';
import Profile from '../screens/TabScreens/Profile';
import SignOut from '../screens//TabScreens/SignOut';
const style = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default createBottomTabNavigator(
{
Followers: {
screen: Followers,
navigationOptions: {
tabBarLabel: 'Followers',
tabBarIcon: ({tintColor}) => (
<Icon name="ios-people" color={tintColor} size={25} />
),
},
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({tintColor}) => (
<Icon name="ios-contact" color={tintColor} size={25} />
),
},
},
Signout: {
screen: SignOut,
navigationOptions: {
tabBarLabel: 'Signout',
tabBarIcon: ({tintColor}) => (
<Icon name="ios-log-out" color={tintColor} size={20} />
),
},
},
},
{
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
showIcon: true,
},
},
);
Yukarıdaki kod parçasında ise Login olduktan sonra göreceğimiz Tab yapısını içeren component var.Tabbar.js içerisinde göstereceğimiz üç adet Tab için Followers, Profile ve SignOut Screenlerini ekliyoruz ve bunlardan bottom tab navigator oluşturuyoruz.
Login öncesi ve sonrası için screenlerimizi olusturduk.Şimdi sıra geldi bu iki yapıyı birleştirmeye.Bu iki yapıyı birleştirmek için React Navigation paketinin createSwitchNavigator fonksiyonunu kullanacağız ve bu işlemleri index.js adlı dosya içerisinde yapacağız.Son olarak bu iki yapının birleşmiş halini AppContainer adı ile export edeeğiz ve App.js içerisinde return edeeğiz.
/* index.js */
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import TabBar from '../navigation/TabBar';
import AuthNavigation from './AuthNavigation';
const AppStack = createStackNavigator({TabBar}, {headerMode: 'none'});
const AuthStack = createStackNavigator(
{AuthNavigation: AuthNavigation},
{headerMode: 'none'},
);
const SwitchNavigator = createSwitchNavigator(
{
Auth: AuthStack,
App: AppStack,
},
{
initialRouteName: 'Auth',
},
);
const AppContainer = createAppContainer(SwitchNavigator);
export default AppContainer;
Ve navigation yapısını temel olarak kurmuş olduk.
Şimdi sıra geldi React Hook Form ile Form validation işlemlerini yapmaya.Login ve Signup sayfaları için hemen hemen aynı inputları kullanacağım için bu yapıyı login üzerinden anlatacağım.Screens klasörü altındaki Login.js adlı dosyamız içerisinde
import {useForm} from 'react-hook-form';
ile paketimizi dahil ediyoruz.Ardından aşağıdaki gibi Functional componentimizi oluşturuyoruz.
export default function Login({navigation}) {
const {register, setValue, handleSubmit, errors} = useForm();
const onSubmit = async data => {
const {email, password} = data;
try {
const response = await Firebase.auth().signInWithEmailAndPassword(
email,
password,
);
console.log(response);
if (response) {
Alert.alert('Giriş Başarılı');
navigation.navigate('App');
}
} catch (error) {
const {message} = error;
Alert.alert(message);
}
};
return (
<View style={styles.container}>
<Text style={styles.loginText}>Login Form</Text>
<TextInput
ref={register({name: 'email'}, {required: true})}
onChangeText={text => setValue('email', text, true)}
style={styles.userName}
placeholder="Email"
/>
{errors.email && <Text>This is required.</Text>}
<TextInput
ref={register({name: 'password'}, {required: true})}
onChangeText={text => setValue('password', text)}
secureTextEntry={true}
style={styles.password}
placeholder="Password"
/>
{errors.password && <Text>Password is required.</Text>}
<TouchableOpacity style={styles.login} onPress={handleSubmit(onSubmit)}>
<Text style=>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.signup}
onPress={() => navigation.navigate('SignUp')}>
<Text style=>Sign Up</Text>
</TouchableOpacity>
</View>
);
Yukarıdaki kod içerisinde iki tane inputumuz var.Biri email diğeri şifreyi alıyor ve React Hook Form paketinin setValue() fonksiyonu ile bu değerleri inputtan alıp state içerisinde tutuyor.
Ardından bu email ve sifre datasını react hook form’un handleSubmit fonksiyonu içerisine onSubmit fonksiyonunu yazıp parametre olarak geçiyoruz.
Custom olarak yazdığımız onSubmit fonksiyonu içerisine gelen data parametresinden object destructuring ile email ve sifreyi alıyoruz.
Ardından firebase’i componentimize import ediyoruz. Ve onSubmit fonksiyon içerisinde async/await yapısı ile firebase’in signInWithEmailAndPassword() fonksiyonuna gelen email ve sifre değerlerini parametre olarak girip dönen sonuca göre navigation altındaki navigate fonksiyonu ile ilgili ekrana yönlendiriyoruz.
Aynı şekilde Signup işlemi içinde Signup componentinin yazıp kayıt başarılı ise Login sayfasına navigate edeceğiz. Bunu githubdaki kodlar üzerinden inceleyebilirsiniz.
Bunlara dahil olarak Firebase konfigürasyonundan bahsedeyim config klasörü altında Firebase.js adlı dosyayı oluşturup firebase’ten oluşturduğunuz uygulama bilgilerini config dosyasına girip Firebase bir değişkene initialize edip o değişkeni export ediyoruz.Kodlar aşağıdaki gibidir.
/* Firebase.js */
import firebase from 'firebase';
import {
API_KEY,
AUTH_DOMAIN,
DB_URL,
PROJECT_ID,
STORAGE_BUCKET,
MESSAGING_SENDER_ID,
APP_ID,
} from 'react-native-dotenv';
const firebaseConfig = {
apiKey: API_KEY,
authDomain: AUTH_DOMAIN,
databaseURL: DB_URL,
projectId: PROJECT_ID,
storageBucket: STORAGE_BUCKET,
messagingSenderId: MESSAGING_SENDER_ID,
appId: APP_ID,
};
let Firebase;
if (!firebase.apps.length) {
Firebase = firebase.initializeApp(firebaseConfig);
}
export default Firebase;
Ben config bilgilerini react-native-dotenv paketi ile bir .env dosyasında tuttum.Size ilgili boşluklara kendi uygulama bilgilerinizi yerleştirebilirsiniz.
Evet arkadaşlar bu yazımında sonuna geldim.Daha detaylı incelemek isterseniz github reposunu Buraya bırakıyorum.
Bir sonraki yazıda görüşmek üzere hoşçakalın.
