Updated OTP Authentication in React Native Expo Using Firebase | Firebase Phone Authentication

Get OTP from Firebase

Phone Authentication React Native Expo & Firebase

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:

1. 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.

Source Code: https://www.patreon.com/bugninza/shop/otp-authentication-in-react-native-expo-108022?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=productshare_fan&utm_content=join_link