Login with OTP in React Native & Expo apps Using Firebase

Phone Authentication For Andriod and iOS devices

OTP authentication using react native, expo, and firebase

Hey! My name is Rohit. I’m not a professional content writer, but I will do my best to make sure that by the end of this article, you will be able to add the OTP login/authentication feature to your React Native and Expo applications. I will be using the Firebase service to send the OTP code.

I recommend that you watch the step-by-step tutorial here:

Project setup, Package Requirements, and Code

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

• Start your expo project
• Set up your Firebase Application for the web. We will use the config keys of the firebase web application in our project.
• Make a JavaScript file inside the root directory of the project. I named it “config.js”. Inside this file, we will add the Firebase config keys.
• The code of the OTP login is really simple. It goes something like this:
• Define the state of the application using the useState hook

const [phoneNumber, setPhoneNumber] = useState('');
    const [code, setCode] = useState('');
    const [verificationId, setVerificationId] = useState(null);
    const recaptchaVerifier = useRef(null);

• Send the verification code.

const sendVerification = () => {
        const phoneProvider = new firebase.auth.PhoneAuthProvider();
        phoneProvider
          .verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
          .then(setVerificationId);
          setPhoneNumber('');
    };

• Confirm the verification code

const confirmCode = () => {
        const credential = firebase.auth.PhoneAuthProvider.credential(
          verificationId,
          code
        );
        firebase
          .auth()
          .signInWithCredential(credential)
          .then(() => {
            setCode('');
        })
        .catch((error) => {
          // show an alert in case of error
          alert(error);
        })
        Alert.alert(
          'Login Successful. Welcome to Dashboard.',
        );
        
    };

• That’s it. The rest is the UI part. You can see the demo of this project here.
• If you are confused or lost, I would recommend watching a step-by-step video tutorial. Few minutes of setup and code, you will be ready to test the application.

Why do I suggest watching more videos?

I am from India and I love writing code and sharing it with the community. We all know that money is the ultimate motivation for work, and the Medium payment system uses Stripe, which has been in preview mode in India for the past 4–5 years. I waited a year on the Medium platform, but in the end, nothing worked out.

So, I started making YouTube videos to make a living. I have posted the important code in the code snippet, but for a step-by-step guide, please follow the video. And if you go there, don’t forget to subscribe to my channel for React Native, Django, Python, and Data Science-related videos.

Thank you.