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

Get OTP from Firebase

Rohit Kumar Thakur
2 min readFeb 22, 2024
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

--

--

Rohit Kumar Thakur
Rohit Kumar Thakur

Written by Rohit Kumar Thakur

I write about AI, Tech, Startup and Code

No responses yet