react native expo firebase authenticate ile login ve register örneği
firebase authenticate kullanarak login ve register işlemi yapacağız. Firebase panelinden authanticate kısmını seçip gerekli import linklerini oradan aldıktan sonra
expo so react native tarafı şöyle
app.js sayfasına home ve login sayfalarını ekleyin
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen options={{ headerShown: false }} name="Login" component={LoginScreen} />
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
import React, { useEffect, useState } from 'react'
import { KeyboardAvoidingView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { getAuth, createUserWithEmailAndPassword,signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
const LoginScreen = ({ navigation }) => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(user => {
if (user) {
navigation.navigate("Calender")
}
})
return unsubscribe
}, [])
const handleSignUp = () => {
createUserWithEmailAndPassword(auth,email, password)
.then(userCredentials => {
const user = userCredentials.user;
console.log('Registered with:', user.email);
})
.catch(error => alert(error.message))
}
const handleLogin = () => {
signInWithEmailAndPassword(auth,email, password)
.then(userCredentials => {
const user = userCredentials.user;
console.log('Logged in with:', user.email);
})
.catch(error => alert(error.message))
}
return (
<KeyboardAvoidingView
style={styles.container}
// behavior="padding"
>
<View style={styles.inputContainer}>
<Text style={styles.logo}>Hr Calender</Text>
<TextInput
placeholder="Email"
value={email}
onChangeText={text => setEmail(text)}
style={styles.input}
/>
<TextInput
placeholder="Password"
value={password}
onChangeText={text => setPassword(text)}
style={styles.input}
secureTextEntry
/>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={handleLogin}
style={styles.button}
>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={handleSignUp}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>Register</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
)
}
export default LoginScreen
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
inputContainer: {
width: '80%'
},
input: {
backgroundColor: 'white',
paddingHorizontal: 15,
paddingVertical: 10,
borderRadius: 10,
marginTop: 5,
},
buttonContainer: {
width: '60%',
justifyContent: 'center',
alignItems: 'center',
marginTop: 40,
},
button: {
backgroundColor: '#0782F9',
width: '100%',
padding: 15,
borderRadius: 10,
alignItems: 'center',
},
buttonOutline: {
backgroundColor: 'white',
marginTop: 5,
borderColor: '#0782F9',
borderWidth: 2,
},
buttonText: {
color: 'white',
fontWeight: '700',
fontSize: 16,
},
buttonOutlineText: {
color: '#0782F9',
fontWeight: '700',
fontSize: 16,
},
logo: {
fontSize: 30,
color: 'black',
paddingBottom: 15,
textAlign: 'center'
},
import { useNavigation } from '@react-navigation/core'
import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { getAuth, signOut } from "firebase/auth";
const auth = getAuth();
console.log("auth",auth)
const HomeScreen = () => {
const navigation = useNavigation()
const handleSignOut = () => {
signOut(auth)
.then(() => {
navigation.navigate("Login")
})
.catch(error => alert(error.message))
}
return (
<View style={styles.container}>
<Text>Email: {auth.currentUser?.email}</Text>
<TouchableOpacity
onPress={handleSignOut}
style={styles.button}
>
<Text style={styles.buttonText}>Sign out</Text>
</TouchableOpacity>
</View>
)
}
export default HomeScreen
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button: {
backgroundColor: '#0782F9',
width: '60%',
padding: 15,
borderRadius: 10,
alignItems: 'center',
marginTop: 40,
},
buttonText: {
color: 'white',
fontWeight: '700',
fontSize: 16,
},
})
daha fazlasına bu elemanın repodan bakabilirsini https://github.com/mattfrances/FirebaseExpoAuthentication
