Sofia Kelly

Sofia Kelly

1567838734

Build a Mobile Phone Authentication Component with React and Firebase

What you’ll learn …?

  • How to use Bit
  • .How to use Bit along with React.
  • How to use React router DOM (Document Object Model).
  • How to use Firebase phone authentication.

Requirements

Here’s a complete list of plugins, packages, and services we’re going to need to gain something from this tutorial:

  • How to use Bit
  • .How to use Bit along with React.
  • How to use React router DOM (Document Object Model).
  • How to use Firebase phone authentication.

Brief summary

Here, we have a summary of steps we are going to perform in order to implement Phone authentication component in our React project:

  • How to use Bit
  • .How to use Bit along with React.
  • How to use React router DOM (Document Object Model).
  • How to use Firebase phone authentication.

Creating React component

Firstly, we need to create a new component in src/components/PhoneAuth. Then, we need to add App.css CSS file that we got from the previous part of this tutorial series. Next, we need to create three files, an index.js for an entry point, InputPhone.jsx to handle phone number configurations and PhoneButton.jsx to display a phone button that will have the function to navigate to ***InputPhone ***component. The overall structure of directory files is shown below:

Activate Firebase Phone Authentication

Here, we need to go to the firebase console, Then, navigate to > authentication > authentication method then activate **Phone **authentication as shown in the console screenshot below:

Now, we can use Phone authentication with Firebase.

Working on component

In this step, we are going to start working on our Authentication component.

Setup react-router-dom

Here, we need to set up the react-router-dom in order to navigate to different files. We are going to use index.js file for the entry point. Then, we register a route to make navigation between ***PhoneButton ***to ***InputPhone ***components.

Firstly, we need to install react-router-dom package using the command given below:

npm install react-router-dom

Then, we need to activate react-router-dom package eat the main root index.js by importing BrowserRouter component from the react-router-dom package as shown in the code snippet below:

Here, we are importing ***BrowserRouter ***component and wrapping the ***App ***component using it.

Then, we need to copy the code below and paste to src/components/PhoneAuth/index.js.

Here, we are importing ***Switch ***and ***Route ***component from the react-router-dom package.

***Route ***component is used to define URL location and Switch component is used as a wrapper to Route component.

Then, we need to define a route for our two-components that we created before, which are ***PhoneButton ***and ***InputPhone ***components.

For the ***index ***route, we are using ***PhoneButton ***component.

For the input_phone route, we are using ***InputPhone ***component.

Now, we can navigate between these two components.

PhoneButtton.jsx

In PhoneButton.jsx file, we are going to implement a phone button. Then, we are going to use this component to display the phone button and navigate to ***InputPhone ***component.

To implement this, we need to open ***PhoneButton.jsx ***file and paste the code in the code snippet below:

Here, we are using ***Link ***component from react-router-dom in order to create a link to InputPhone Component.

Then, we import our component to App.js file and implement it to *render() *function as shown in the code snippet below:

Now, we need to start the server to see the result screen. After starting the server, we will see the following result in our screen:

InputPhone.jsx

Our main work to be done is in InputPhone component. We are going to use this component to handle sending SMS and verify OTP. For this, we need to open src/components/PhoneAuth/PhoneInput.jsx and paste the code given in the code snippet below:

Here, the code given in the code snippet above is used to construct a form and initialize firebase in our project.

Now, If we restart the server and test the screen buttons, we will get the following result:

Here, when we click on Sign in with phone button, we will get a form and verify button to verify with firebase.

Getting Form Value

In this step, we need to get the form values and set it to the internal state variables.

Here, we need to create an internal state named phone_number then attach it to Input field with this.state.value to set the value of the state.

Then, we need to create a new function named handlePhoneChange() in order to get value from the input field and when **onChange **event is fired we set a new value to the state variable.

Send SMS with Firebase

Next, we are going to implement ‘send SMS’ feature with firebase. Here, before implementing send SMS feature, we have a requirement to install Recaptcha firebase to prevent fraud and spam on their service.

For this, we need to create componentDidmount and paste the code given in the code snippet below:

Here, we need to set up CSS id named Recaptcha-container to place Recaptcha and define size, callback function with success and error. Then, we need to render on target and last assign object to window object that makes it global, and we can use the object across the function.

Then, we need to place a new divelement to the location that we want to render Recaptcha:

<div id="recaptcha-container" />

As a result, our form will appear as shown in the emulator simulation below:

For better functioning, we need to disable VERIFYbutton until **Recaptcha **is verified successfully. We can do this using the following code:

Here, we need to create a new state named isButtonDisabled and toggle the state with **Recaptcha **callback. Then, we need to place the isButtonDisabled state at the button in the disabled event as shown in the code snippet below:

As a result, the

VERIFY

button remains disabled until the Recaptcha is verified as shown in the emulator simulation below:

Now, we have the **Recaptcha **that we required for the firebase.

Next, we need to implement Phone authentication.

For this, first, we need to create a new function named handleLogin() as shown in the code snippet below:

Here, we need to grab the Recaptcha object and call signInWithPhoneNumber then pass two required parameter phone_number and ReCaptcha object i.e. appVerifier. On success, we need to print result i.e. conformationResult.

Submit form

Next, we need to implement the functionality to submit the form. But the problem is that the page reloads after we hit the submit button and submit the form. To prevent the form reload, we add function name handleSubmit()and add the function to <form> element wrapping the button we implemented before. The code for this is given in the code snippet below:

Next, in order to trigger handleLogin function, we need to add onClick event to verify the button. Now, we need to test its functionality. We can see the result of testing the button below in the simulation:

Here, we received a successful result.

Next, we need to implement the verifying process.

Verify OTP

Here, we need to verify the authentication using OTP. First, we need to store a result object to window object which makes it global and we can use the object across the function. Then, we need to set a state variable as sendOTP as shown in the code snippet below:

Here, to verify OTP, we need to create another form in the same component and toggle hide and show using sendOTP state.

For the verification process, we need to do the same on sending SMS process. First, we need to create two new state variables. For this, we can copy the code given in the code snippet below and paste to src/components/PhoneAuth/PhoneInput.jsx.

Here, sendOTP state is used for toggle between “input phone number” form and“ *verify SMS” *form. The default value of sendOTP state is false.

otp state is used to handle OTP data that we are getting from the form.

handleOTPChange() function is used in order to get form value.

handleOTPCheck function is used to check OTP object that comes from the result of handleLogin function that we mentioned before. Then, we pass OTP value from state and display the result in the console.

Next, we use sendOTP state to toggle display between **PhoneInput **form and OTP verify form. Then, we need to add the function that we created before to form and button which is same as we did in **PhoneInput **form.

Now, we have configured everything. Next, we need to check if everything is working properly.

As we can see, we can the expected result in the browser console. Next, we need to check the result in the Firebase console as well.

As we can see in the above screenshot, we get the result as expected in firebase console as well.

Finally, we have successfully implemented the Firebase phone authentication component in React.Next, we need to push our Authentication component to Bit.

Make it Reusable and Sharable with Bit

To make our code reusable and shareable, we’ll do some restructuring and move all our code to ‘components’ (this is not mandatory but a better practice, when using Bit). Then, we’ll export it (with all its dependencies), to a component collection on Bit’s cloud, to be shared with others and easily reused.

In this step, we are going to push the new component i.e. Phone Authentication component to Bit. We already have our Bit package installed and connected to our Bit account. So, we need to create a collection and start by tracking the component.

Note: The first and second step features an installation of Bit account. These steps can be skipped if you already have a Bit account.

1. Create a collection and initialize Bit on a project

Here, we need to create a new collection on Bit to which we are going to push all our component code. We use the Bit “create collection” configuration page to create a new collection named “firebase-auth-collection”.First, we need to install Bit CLI

Using NPM,

*npm install bit-bin --global*

Then, we need to go to the project directory in our Bit CLI and perform the commands bit init and run bit login on Bit CLI

2. Configure a React compiler for our component

When we configure a compiler we tell Bit to capsule the component with it. Capsule components together with their compilers give us the freedom to use, build and test them anywhere. This includes being able to run the code in any of the applications we’d like to use the component in, as well as running it in the cloud to enable features such as the live component playground.

bit import bit.envs/compilers/react --compiler

3. Track components

We need to track our component by using the following command in your command prompt or Bit console:

bit add src/components/PhoneAuth

4. Tag and export to our collection on Bit’s cloud

Here, we are going to s

et a version

to all tracked components, and export to this collection using following bit command:

bit tag --all 0.0.1

Finally, we need to perform following bit command to push our component code to bit collection that we created before:

bit export krissnawat.firebase-auth-collection

Now, our package is live on Bit.

Using Bit Component

To use Bit component, we need to import Bit component using the Bit import command which is given in the code snippet below:

Here, we need to open another project and use the command:

bit import krissnawat.firebase-auth-collection/phone-auth --path src/components/PhoneAuth

Now, all the files imported should be placed in the component directory as shown below:

Now, we can use the component successfully imported from the Bit.

Update component and push back to Bit

In this section, we learn how to update component code and create a new bit component with the feature of resending OTP after 20 seconds.

First, we need to install react countdown package using the command:

yarn add react-countdown-now

Then, we need to create a conditional renderer function with a countdown.

Then, we need to include <Countdown/> component to verify form footer.

As a result, we will see the following simulation on the screen:

Now, everything is done. Next, we need to push the new component back to Bit using the command:

bit export krissnawat.test-collection

Now, as we can see, our component is live on Bit as shown below:

Recap

In this tutorial, we learned how to implement firebase phone authentication in firebase using react-router-dom along with Recaptcha. We also learned how to using Bit for reusable component and finally implemented the countdown timer. In the next chapter, we are going to implement Firebase email link authentication.

Recommended Reading

How to create a signature pad in React

Creating an Audio Player in React Native

How React Storybook can simplify component testing

Making API Calls with React Hooks

MEAN vs. MERN – What’s the Difference?

Learn how to build a full-stack MERN App using JWT authentication

Using Radio Button in React

Full-Stack JavaScript Tutorial for Beginners

#reactjs #firebase

What is GEEK

Buddha Community

Build a Mobile Phone Authentication Component with React and Firebase
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Raleigh  Hayes

Raleigh Hayes

1626915420

Firebase & React Tutorial | Build a Todo App

Hey everyone! Firebase + React is probably one of the quickest ways to get started with a full-stack application, and it’s so simple! Today’s video is a tutorial on how to get started with Firebase authentication, firestore, and cloud functions. I hope you enjoy it!

Useful Links:
https://github.com/redhwannacef/youtube-tutorials/tree/master/firebase-tutorial

Timestamps:
0:00 - Intro
0:19 - What is Firebase?
0:50 - Create Project In Firebase
1:45 - App Code Intro
2:35 - Initialise Firebase
4:48: Google Authentication
6:29 - Firestore - Write, Read
8:21 - Firestore Rules
10:34 - Firestore - Edit, Delete
12:39 - Cloud Function
16:23 - Thank You For Watching :)

#todo #react #firebase #firebase & react #firebase & react tutorial

How To Set Up Two-Factor Authentication in cPanel

What is 2FA
Two-Factor Authentication (or 2FA as it often referred to) is an extra layer of security that is used to provide users an additional level of protection when securing access to an account.
Employing a 2FA mechanism is a vast improvement in security over the Singe-Factor Authentication method of simply employing a username and password. Using this method, accounts that have 2FA enabled, require the user to enter a one-time passcode that is generated by an external application. The 2FA passcode (usually a six-digit number) is required to be input into the passcode field before access is granted. The 2FA input is usually required directly after the username and password are entered by the client.

#tutorials #2fa #access #account security #authentication #authentication method #authentication token #cli #command line #cpanel #feature manager #google authenticator #one time password #otp #otp authentication #passcode #password #passwords #qr code #security #security code #security policy #security practices #single factor authentication #time-based one-time password #totp #two factor authentication #whm

React Native Mobile App Development

React Native is a framework that allows you to build mobile applications for both Android and iOS platforms using a similar codebase. This can shorten the development time and reduce the overall cost of building mobile apps.

Looking to create Mobile Applications but low in the budget? Contact Skenix Infotech now to get the most effective React Native Mobile App Development Services.

#react native development #mobile app development #react native ios app #react native ui #react native mobile app #react native

Eve  Klocko

Eve Klocko

1626319507

TIKTOK Clone React Native Tutorial 2021 👨‍💻 - Firebase Authentication React Native and Expo (#2)

In this tiktok clone video we’ll be implementing the authentication system for this amazing project with firebase authentication, firebase firestore and firebase functions. We’ll also implement a good looking UI in react native with expo that looks similar to the real TikTok app.

🔵 Series Description 🔵

TIKTOK Clone React Native Tutorial 2021 👨‍💻

I’ll show you how you can do this in the simplest way and terms possible.

By the end of this series you’ll have learned how the big companies do it and will be able to do the same, you not only will be able to do this app, but you’ll be able to put what you learn into your very own projects!

In this series, we use React Native with Expo to quickly deploy the project. We use firebase for all our microservice needs like the auth system, database, storage, amongst others.

firebase, redux, react native, javascript, expo. In this series, we’ll use all of them and you’ll learn them by doing an iconic app.

Welcome to this Simcoder project and make a TikTok Clone!

🔵 Important Links 🔵

▷ Firebase - https://firebase.google.com/docs/auth/web/start
▷ Firebase function - https://firebase.google.com/docs/functions/get-started
▷ Expo - https://docs.expo.io/
▷ React Native - https://reactnative.dev/
▷ Redux - https://redux.js.org/
▷ Android Studio - https://developer.android.com/studio
▷ Visual Studio Code - https://code.visualstudio.com/

🔵 In This Video 🔵

TIKTOK Clone React Native Tutorial 2021 👨‍💻 - Firebase Authentication React Native and Expo (#2)

  • 0:00 Introduction
  • 1:00 Chapter 1 - Firebase Firestore Database Structure
  • 2:55 Chapter 2 - Implement Redux in React Native
  • 14:10 Chapter 3 - Auth Screen React Native UI
  • 54:50 Chapter 4 - Login and Register Action with Firebase Authentication and Redux
  • 01:03:20 Chapter 5 - Firebase Functions onUserCreate trigger function
  • 01:07:55 Conclusion

#react-native #react #firebase #authentication #security