Integrate Firebase Phone Number Authentication with Angular 12 Using an Auto Focus Input Field

In this video, you will learn how to integrate phone number authentication sign up with Angular 12(A TypeScript frontend framework) Application using Firebase.

The process involves an SMS being sent to the user on their phone and which contains a six-digit code they need to enter into the form to get authenticated and then routed into the dashboard.

Also, we created a form that has an autofocus input field functionality similar to that of a mobile application.

We integrate firebase into our Angular application, which helps trigger the function that generates the SMS digit used to log into our application.

The tutorial is also easy and simple to follow along as you learn more about Angular and Firebase.

Chapters
------------------------
0:00 - Introduction and Project Overview
02:43 - Generate, set up of new Angular project as well as package installation
05:26 - Create and set up new Firebase Project
10:05 - Configured Routing
12:35 - Design and Integrate Functionality for Phone Number Page
24:15 - Design and Integrate Functionality for the Code Page
39:08 - Integrated Dashboard Page for Logged in User
44:46 - Outro

Join my telegram community:

Source Code:

For more resources on Web Development:

Follow Me on Twitter:

Leave a like and subscribe for more videos.

Thanks a lot for watching ❤

[Drugoja]

Thank you for explaining these steps in simple and easy to understand way.

[albertwilliams]

Thank you for all the efforts you have made for this video!
I am facing a problem here,
my console shows this below error when I try click on "Get OTP",
"TypeError: Cannot use 'in' operator to search for 'session' in undefined"
Not sure what could be the problem..any idea?

[zabishah]

Good work! What if user try to directly hit dashboard?

[JaroNavales]

Thanks for this video! It was so helpful til now :) Just want to know how to check first the number if exist in the authentication before we send the otp code?

[brianzablon]

This is very helpful. It worked fine in my localhost but refused when I uploaded it to my https domain, even after adding the domain under authorized domains in firebase. Kindly assist

[tanyachauhan]

Can you make video on calendar view please

[balu]

hi
why we are not getting otp to our mobile as a sms

[rahulshaw]

ERROR FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).

getting this error after clicking on handle click function