Install Firebase in Your React Native Project
- Ensure you have React Native CLI installed and your environment setup correctly for React Native development.
- Install the necessary Firebase libraries using npm or yarn:
npm install @react-native-firebase/app @react-native-firebase/auth
Configure Firebase for Your App
- Download the `google-services.json` file from the Firebase console and place it in your `android/app` directory.
- Edit the `android/build.gradle` file to add the Google services classpath:
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.3.3' // Add this line
}
}
- Apply the `google-services` plugin in the `android/app/build.gradle` file:
apply plugin: 'com.google.gms.google-services'
Set Up Firebase Authentication in Your App
- Import Firebase Auth in your React Native components where authentication is needed:
import auth from '@react-native-firebase/auth';
- Create functions for user actions such as signing up, signing in, and signing out.
- For example, create a sign-up function using email and password:
function signUp(email, password) {
auth()
.createUserWithEmailAndPassword(email, password)
.then(() => {
console.log('User account created & signed in!');
})
.catch(error => {
if (error.code === 'auth/email-already-in-use') {
console.error('That email address is already in use!');
}
if (error.code === 'auth/invalid-email') {
console.error('That email address is invalid!');
}
console.error(error);
});
}
- Implement a sign-in function as follows:
function signIn(email, password) {
auth()
.signInWithEmailAndPassword(email, password)
.then(() => {
console.log('User signed in!');
})
.catch(error => {
console.error(error);
});
}
Listen to Authentication State
- It's critical to handle user sign-in state changes in your app, to show them the appropriate content based on their status.
- Set up a listener to the authentication state:
useEffect(() => {
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
return subscriber; // unsubscribe on unmount
}, []);
function onAuthStateChanged(user) {
setUser(user);
}
Sign Out Users
- Finally, implement a sign-out functionality so users can log out securely:
auth()
.signOut()
.then(() => console.log('User signed out!'));
Testing and Error Handling
- Test all authentication functionalities to ensure they work as expected.
- Implement comprehensive error handling to deal with issues like network errors and incorrect credentials gracefully.
