Updated OTP Authentication in React Native Expo Using Firebase | Firebase Phone Authentication
Get OTP from Firebase
2 min readFeb 22, 2024
Hello everyone, My name is Rohit. In this article, I will guide you through how to build a Phone Authentication using Firebase and React Native & Expo. If you face any issues then feel free to comment or DM me on my social media handles. X && Instagram
App Features:
- Login with phone number and OTP verification
- New user details form (optional)
- Dashboard with logout functionality
Steps:
- Project Setup:
- Initialize Expo project with black template.
- Install React Navigation dependencies.
- Install React Native Firebase packages (App, Auth, Firestore).
- Set up Firebase account and create project.
- Build and test the app using QR codes.
2. Firebase & App Config:
- Enable OTP Auth and Firestore database in Firebase.
- Add Google service file path to app.json.
- Build the app again after app.json changes.
3. Component Creation:
- Create Login, Detail, and Dashboard components.
- Implement basic UI and functionality in each.
4. App.js Code:
- Set up navigation with StackNavigator for the three screens.
- Define Login component with phone number, code input, and confirmation logic.
- Check user existence in Firestore and navigate accordingly.
5. Login.js Code:
- Use Firebase Auth for phone number sign-in and code verification.
- Navigate to Detail or Dashboard based on user existence.
6. Detail.js Code:
- Capture user details and save to Firestore with user ID.
- Navigate to Dashboard on success.
7. Dashboard.js Code:
- Display welcome message and logout button.
- Implement logout functionality and navigation reset.
8. Testing & Conclusion:
- Test OTP verification, registration, data saving, and logout.
- Emphasize faster login for existing users.
9. Remember:
Build the app again after app.json changes.
Bonus:
Consider video link for detailed explanation and visual reference.