Firebase Android Authentication Process
npm install @react-native-firebase/app
npm install @react-native-firebase/auth
npm uninstall @react-native-firebase/firestore
android/app/google-services.json
ios/GoogleService-Info.plist
import { firebase } from '@react-native-firebase/app';
export default firebase;
import React, { createContext, useEffect, useState } from 'react';
import auth from '@react-native-firebase/auth';
export const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
setUser(user);
setLoading(false);
});
return unsubscribe;
}, []);
return (
<AuthContext.Provider value={{ user }}>
{!loading && children}
</AuthContext.Provider>
);
};
import auth from '@react-native-firebase/auth';
export const login = (email, password) =>
auth().signInWithEmailAndPassword(email, password);
export const signup = (email, password) =>
auth().createUserWithEmailAndPassword(email, password);
export const logout = () =>
auth().signOut();
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { login } from '../auth/authService';
export default function LoginScreen() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<View>
<TextInput placeholder="Email" onChangeText={setEmail} />
<TextInput placeholder="Password" secureTextEntry onChangeText={setPassword} />
<Button title="Login" onPress={() => login(email, password)} />
</View>
);
}
import React, { useContext } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthContext } from '../auth/AuthProvider';
import LoginScreen from '../screens/LoginScreen';
import HomeScreen from '../screens/HomeScreen';
const Stack = createStackNavigator();
export default function AppNavigator() {
const { user } = useContext(AuthContext);
return (
<NavigationContainer>
<Stack.Navigator>
{user ? (
<Stack.Screen name="Home" component={HomeScreen} />
) : (
<Stack.Screen name="Login" component={LoginScreen} />
)}
</Stack.Navigator>
</NavigationContainer>
);
}
import React from 'react';
import { AuthProvider } from './src/auth/AuthProvider';
import AppNavigator from './src/navigation/AppNavigator';
export default function App() {
return (
<AuthProvider>
<AppNavigator />
</AuthProvider>
);
}
