2024-02-04T08:21:21.884Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
5a36a20c-dc3a-4b43-ae92-1d1d5e0136ee
6df531af2896f5c2a4d9832db4a1ff2e6d95b6e28416ca9b90f79e816138c2cc
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Firebase recently rolled out a new phone authentication system.
It's not currently supported in AngularFire 2, but we're gonna use the SDK directly to implement PhoneAuth into our Angular 4 app.
It works by having the user verify a CAPTCHA then sends a text message with a verification code to their number.
The user then enters this verification code and their auth state will be updated in the app.
It's important to point out that phone auth is less secure than other methods, primarily because phone numbers can be transferred between different people.
It does, however, work very well with 2 factor authentication where you use an additional sign in method and link the 2 accounts.
Before getting started, make sure you have phone authentication enabled in Firebase.
In order to use the CAPTCHA, we'll need to interact with the window object in the browser.
It's considered a bad practice to work with global browser objects such as window directly in the component.
So we'll extract it out into its own injectable service.
It's just a simple typescript getter that returns the window object.
Now we can start building the phone login component.
First, we'll import the Windows service as well as the Firebase SDK.
To make phone number validation a little easier, I'm going to extract it into its own class and break it into 4 different parts.
When we send the number to Firebase, it needs to be an e164 format, which is just a string that starts with a plus sign followed by the country code and then the full phone number with no spaces or dashes.
From there we'll set a variable to hold the window reference and another variable to hold the phone number, another one for the verification code after the user receives the text and another for the authenticated user.
During n g on init, we reference the window and then we initialize the CAPTCHA on the window itself.
The reCAPTCHA container should just be an empty div with that ID in the template.
Calling render will replace that div with the recaptcha content.
After the user passes the captcha and enters their phone number, or we need to send that number to Firebase to send the user a text message.
We do this by calling the sign in with phone number function and pass it the CAPTCHA verifier as well as the phone number in e164 format.
This function will return a promise which has the confirmation that the verification code was sent to the user.
We set this value on the cation code was sent to the user.
We set this value on the window reference and then catch any errors at this point as well.
If we get a successful confirmation, we wanna show the user another form where they can enter the verification code.
And the final step is to confirm this verification code is correct and that will update the auth state in Firebase.
And we also catch errors at this point which would usually be due to an incorrect code being entered.
In the HTML, we add an empty div for the recaptcha.
And if the user is not authenticated, we show a form to enter the phone number.
The form has 4 different inputs, each corresponding to the attributes in our phone number class.
This makes phone number validation a lot easier.
For now, we'll just validate the max length of the input, and we can bind each attribute to the NG model directive.
From there, we add a button that will allow the user to trigger the process of Firebase sending a text message to their number.
And below that, we'll show a div conditionally only if that verification code has been sent.
This div will have another form field for the user to enter that verification code and also another button to submit it.
After the user submits a valid code, it will update the auth state in Firebase and this entire div will be hidden and then we'll conditionally show this other one saying you've successfully logged in with your phone number.
If we go back to the app, we should see everything working as expected.
Firebase also has an invisible CAPTCHA, which you can use if you don't want your user to have to go through this tedious recaptcha process.
That's it for PhoneAuth.
If this video helped you, please like and subscribe.
And if you wanna support the channel, consider becoming a pro member at angularfirebase.com.
You'll get access to exclusive content as well as free 1 on 1 project consulting.
Thanks for watching, and I'll see you next time.

Speaker 0: Firebase recently rolled out a new phone authentication system. It's not currently supported in AngularFire 2, but we're gonna use the SDK directly to implement PhoneAuth into our Angular 4 app. It works by having the user verify a CAPTCHA then sends a text message with a verification code to their number. The user then enters this verification code and their auth state will be updated in the app. It's important to point out that phone auth is less secure than other methods, primarily because phone numbers can be transferred between different people.

It does, however, work very well with 2 factor authentication where you use an additional sign in method and link the 2 accounts. Before getting started, make sure you have phone authentication enabled in Firebase. In order to use the CAPTCHA, we'll need to interact with the window object in the browser. It's considered a bad practice to work with global browser objects such as window directly in the component. So we'll extract it out into its own injectable service.

It's just a simple typescript getter that returns the window object. Now we can start building the phone login component. First, we'll import the Windows service as well as the Firebase SDK. To make phone number validation a little easier, I'm going to extract it into its own class and break it into 4 different parts. When we send the number to Firebase, it needs to be an e164 format, which is just a string that starts with a plus sign followed by the country code and then the full phone number with no spaces or dashes.

From there we'll set a variable to hold the window reference and another variable to hold the phone number, another one for the verification code after the user receives the text and another for the authenticated user. During n g on init, we reference the window and then we initialize the CAPTCHA on the window itself. The reCAPTCHA container should just be an empty div with that ID in the template. Calling render will replace that div with the recaptcha content. After the user passes the captcha and enters their phone number, or we need to send that number to Firebase to send the user a text message.

We do this by calling the sign in with phone number function and pass it the CAPTCHA verifier as well as the phone number in e164 format. This function will return a promise which has the confirmation that the verification code was sent to the user. We set this value on the cation code was sent to the user. We set this value on the window reference and then catch any errors at this point as well. If we get a successful confirmation, we wanna show the user another form where they can enter the verification code.

And the final step is to confirm this verification code is correct and that will update the auth state in Firebase. And we also catch errors at this point which would usually be due to an incorrect code being entered. In the HTML, we add an empty div for the recaptcha. And if the user is not authenticated, we show a form to enter the phone number. The form has 4 different inputs, each corresponding to the attributes in our phone number class.

This makes phone number validation a lot easier. For now, we'll just validate the max length of the input, and we can bind each attribute to the NG model directive. From there, we add a button that will allow the user to trigger the process of Firebase sending a text message to their number. And below that, we'll show a div conditionally only if that verification code has been sent. This div will have another form field for the user to enter that verification code and also another button to submit it.

After the user submits a valid code, it will update the auth state in Firebase and this entire div will be hidden and then we'll conditionally show this other one saying you've successfully logged in with your phone number. If we go back to the app, we should see everything working as expected. Firebase also has an invisible CAPTCHA, which you can use if you don't want your user to have to go through this tedious recaptcha process. That's it for PhoneAuth. If this video helped you, please like and subscribe.

And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
Firebase recently rolled out a new phone authentication system. It's not currently supported in AngularFire 2, but we're gonna use the SDK directly to implement PhoneAuth into our Angular 4 app.
It works by having the user verify a CAPTCHA then sends a text message with a verification code to their number. The user then enters this verification code and their auth state will be updated in the app. It's important to point out that phone auth is less secure than other methods, primarily because phone numbers can be transferred between different people. It does, however, work very well with 2 factor authentication where you use an additional sign in method and link the 2 accounts. Before getting started, make sure you have phone authentication enabled in Firebase.
security
phones
In order to use the CAPTCHA, we'll need to interact with the window object in the browser. It's considered a bad practice to work with global browser objects such as window directly in the component. So we'll extract it out into its own injectable service. It's just a simple typescript getter that returns the window object. Now we can start building the phone login component. First, we'll import the Windows service as well as the Firebase SDK. To make phone number validation a little easier, I'm going to extract it into its own class and break it into 4 different parts. When we send the number to Firebase, it needs to be an e164 format, which is just a string that starts with a plus sign followed by the country code and then the full phone number with no spaces or dashes.
From there we'll set a variable to hold the window reference and another variable to hold the phone number, another one for the verification code after the user receives the text and another for the authenticated user. During n g on init, we reference the window and then we initialize the CAPTCHA on the window itself.
programming
The reCAPTCHA container should just be an empty div with that ID in the template. Calling render will replace that div with the recaptcha content. After the user passes the captcha and enters their phone number, or we need to send that number to Firebase to send the user a text message. We do this by calling the sign in with phone number function and pass it the CAPTCHA verifier as well as the phone number in e164 format. This function will return a promise which has the confirmation that the verification code was sent to the user. We set this value on the cation code was sent to the user. We set this value on the window reference and then catch any errors at this point as well. If we get a successful confirmation, we wanna show the user another form where they can enter the verification code. And the final step is to confirm this verification code is correct and that will update the auth state in Firebase. And we also catch errors at this point which would usually be due to an incorrect code being entered. In the HTML, we add an empty div for the recaptcha. And if the user is not authenticated, we show a form to enter the phone number. The form has 4 different inputs, each corresponding to the attributes in our phone number class. This makes phone number validation a lot easier. For now, we'll just validate the max length of the input, and we can bind each attribute to the NG model directive. From there, we add a button that will allow the user to trigger the process of Firebase sending a text message to their number. And below that, we'll show a div conditionally only if that verification code has been sent. This div will have another form field for the user to enter that verification code and also another button to submit it. After the user submits a valid code, it will update the auth state in Firebase and this entire div will be hidden and then we'll conditionally show this other one saying you've successfully logged in with your phone number. If we go back to the app, we should see everything working as expected. Firebase also has an invisible CAPTCHA, which you can use if you don't want your user to have to go through this tedious recaptcha process.
That's it for PhoneAuth. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
youtube
websites
publishing
streaming
Firebase recently rolled out a new phone authentication system. It's not currently supported in AngularFire 2, but we're gonna use the SDK directly to implement PhoneAuth into our Angular 4 app. It works by having the user verify a CAPTCHA then sends a text message with a verification code to their number. The user then enters this verification code and their auth state will be updated in the app. It's important to point out that phone auth is less secure than other methods, primarily because phone numbers can be transferred between different people. It does, however, work very well with 2 factor authentication where you use an additional sign in method and link the 2 accounts. Before getting started, make sure you have phone authentication enabled in Firebase. In order to use the CAPTCHA, we'll need to interact with the window object in the browser. It's considered a bad practice to work with global browser objects such as window directly in the component. So we'll extract it out into its own injectable service. It's just a simple typescript getter that returns the window object. Now we can start building the phone login component. First, we'll import the Windows service as well as the Firebase SDK. To make phone number validation a little easier, I'm going to extract it into its own class and break it into 4 different parts. When we send the number to Firebase, it needs to be an e164 format, which is just a string that starts with a plus sign followed by the country code and then the full phone number with no spaces or dashes. From there we'll set a variable to hold the window reference and another variable to hold the phone number, another one for the verification code after the user receives the text and another for the authenticated user. During n g on init, we reference the window and then we initialize the CAPTCHA on the window itself. The reCAPTCHA container should just be an empty div with that ID in the template. Calling render will replace that div with the recaptcha content. After the user passes the captcha and enters their phone number, or we need to send that number to Firebase to send the user a text message. We do this by calling the sign in with phone number function and pass it the CAPTCHA verifier as well as the phone number in e164 format. This function will return a promise which has the confirmation that the verification code was sent to the user. We set this value on the cation code was sent to the user. We set this value on the window reference and then catch any errors at this point as well. If we get a successful confirmation, we wanna show the user another form where they can enter the verification code. And the final step is to confirm this verification code is correct and that will update the auth state in Firebase. And we also catch errors at this point which would usually be due to an incorrect code being entered. In the HTML, we add an empty div for the recaptcha. And if the user is not authenticated, we show a form to enter the phone number. The form has 4 different inputs, each corresponding to the attributes in our phone number class. This makes phone number validation a lot easier. For now, we'll just validate the max length of the input, and we can bind each attribute to the NG model directive. From there, we add a button that will allow the user to trigger the process of Firebase sending a text message to their number. And below that, we'll show a div conditionally only if that verification code has been sent. This div will have another form field for the user to enter that verification code and also another button to submit it. After the user submits a valid code, it will update the auth state in Firebase and this entire div will be hidden and then we'll conditionally show this other one saying you've successfully logged in with your phone number. If we go back to the app, we should see everything working as expected. Firebase also has an invisible CAPTCHA, which you can use if you don't want your user to have to go through this tedious recaptcha process. That's it for PhoneAuth. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
Firebase
firebase
recently
recently
rolled
rolled
out
out
a
a
new
new
phone
phone
authentication
authentication
system.
system
It's
it's
not
not
currently
currently
supported
supported
in
in
AngularFire
angularfire
2,
2
but
but
we're
we're
gonna
gonna
use
use
the
the
SDK
sdk
directly
directly
to
to
implement
implement
PhoneAuth
phoneauth
into
into
our
our
Angular
angular
4
4
app.
app
It
it
works
works
by
by
having
having
the
the
user
user
verify
verify
a
a
CAPTCHA
captcha
then
then
sends
sends
a
a
text
text
message
message
with
with
a
a
verification
verification
code
code
to
to
their
their
number.
number
The
the
user
user
then
then
enters
enters
this
this
verification
verification
code
code
and
and
their
their
auth
auth
state
state
will
will
be
be
updated
updated
in
in
the
the
app.
app
It's
it's
important
important
to
to
point
point
out
out
that
that
phone
phone
auth
auth
is
is
less
less
secure
secure
than
than
other
other
methods,
methods
primarily
primarily
because
because
phone
phone
numbers
numbers
can
can
be
be
transferred
transferred
between
between
different
different
people.
people
It
it
does,
does
however,
however
work
work
very
very
well
well
with
with
2
2
factor
factor
authentication
authentication
where
where
you
you
use
use
an
an
additional
additional
sign
sign
in
in
method
method
and
and
link
link
the
the
2
2
accounts.
accounts
Before
before
getting
getting
started,
started
make
make
sure
sure
you
you
have
have
phone
phone
authentication
authentication
enabled
enabled
in
in
Firebase.
firebase
In
in
order
order
to
to
use
use
the
the
CAPTCHA,
captcha
we'll
we'll
need
need
to
to
interact
interact
with
with
the
the
window
window
object
object
in
in
the
the
browser.
browser
It's
it's
considered
considered
a
a
bad
bad
practice
practice
to
to
work
work
with
with
global
global
browser
browser
objects
objects
such
such
as
as
window
window
directly
directly
in
in
the
the
component.
component
So
so
we'll
we'll
extract
extract
it
it
out
out
into
into
its
its
own
own
injectable
injectable
service.
service
It's
it's
just
just
a
a
simple
simple
typescript
typescript
getter
getter
that
that
returns
returns
the
the
window
window
object.
object
Now
now
we
we
can
can
start
start
building
building
the
the
phone
phone
login
login
component.
component
First,
first
we'll
we'll
import
import
the
the
Windows
windows
service
service
as
as
well
well
as
as
the
the
Firebase
firebase
SDK.
sdk
To
to
make
make
phone
phone
number
number
validation
validation
a
a
little
little
easier,
easier
I'm
i'm
going
going
to
to
extract
extract
it
it
into
into
its
its
own
own
class
class
and
and
break
break
it
it
into
into
4
4
different
different
parts.
parts
When
when
we
we
send
send
the
the
number
number
to
to
Firebase,
firebase
it
it
needs
needs
to
to
be
be
an
an
e164
e164
format,
format
which
which
is
is
just
just
a
a
string
string
that
that
starts
starts
with
with
a
a
plus
plus
sign
sign
followed
followed
by
by
the
the
country
country
code
code
and
and
then
then
the
the
full
full
phone
phone
number
number
with
with
no
no
spaces
spaces
or
or
dashes.
dashes
From
from
there
there
we'll
we'll
set
set
a
a
variable
variable
to
to
hold
hold
the
the
window
window
reference
reference
and
and
another
another
variable
variable
to
to
hold
hold
the
the
phone
phone
number,
number
another
another
one
one
for
for
the
the
verification
verification
code
code
after
after
the
the
user
user
receives
receives
the
the
text
text
and
and
another
another
for
for
the
the
authenticated
authenticated
user.
user
During
during
n
n
g
g
on
on
init,
init
we
we
reference
reference
the
the
window
window
and
and
then
then
we
we
initialize
initialize
the
the
CAPTCHA
captcha
on
on
the
the
window
window
itself.
itself
The
the
reCAPTCHA
recaptcha
container
container
should
should
just
just
be
be
an
an
empty
empty
div
div
with
with
that
that
ID
id
in
in
the
the
template.
template
Calling
calling
render
render
will
will
replace
replace
that
that
div
div
with
with
the
the
recaptcha
recaptcha
content.
content
After
after
the
the
user
user
passes
passes
the
the
captcha
captcha
and
and
enters
enters
their
their
phone
phone
number,
number
or
or
we
we
need
need
to
to
send
send
that
that
number
number
to
to
Firebase
firebase
to
to
send
send
the
the
user
user
a
a
text
text
message.
message
We
we
do
do
this
this
by
by
calling
calling
the
the
sign
sign
in
in
with
with
phone
phone
number
number
function
function
and
and
pass
pass
it
it
the
the
CAPTCHA
captcha
verifier
verifier
as
as
well
well
as
as
the
the
phone
phone
number
number
in
in
e164
e164
format.
format
This
this
function
function
will
will
return
return
a
a
promise
promise
which
which
has
has
the
the
confirmation
confirmation
that
that
the
the
verification
verification
code
code
was
was
sent
sent
to
to
the
the
user.
user
We
we
set
set
this
this
value
value
on
on
the
the
cation
cation
code
code
was
was
sent
sent
to
to
the
the
user.
user
We
we
set
set
this
this
value
value
on
on
the
the
window
window
reference
reference
and
and
then
then
catch
catch
any
any
errors
errors
at
at
this
this
point
point
as
as
well.
well
If
if
we
we
get
get
a
a
successful
successful
confirmation,
confirmation
we
we
wanna
wanna
show
show
the
the
user
user
another
another
form
form
where
where
they
they
can
can
enter
enter
the
the
verification
verification
code.
code
And
and
the
the
final
final
step
step
is
is
to
to
confirm
confirm
this
this
verification
verification
code
code
is
is
correct
correct
and
and
that
that
will
will
update
update
the
the
auth
auth
state
state
in
in
Firebase.
firebase
And
and
we
we
also
also
catch
catch
errors
errors
at
at
this
this
point
point
which
which
would
would
usually
usually
be
be
due
due
to
to
an
an
incorrect
incorrect
code
code
being
being
entered.
entered
In
in
the
the
HTML,
html
we
we
add
add
an
an
empty
empty
div
div
for
for
the
the
recaptcha.
recaptcha
And
and
if
if
the
the
user
user
is
is
not
not
authenticated,
authenticated
we
we
show
show
a
a
form
form
to
to
enter
enter
the
the
phone
phone
number.
number
The
the
form
form
has
has
4
4
different
different
inputs,
inputs
each
each
corresponding
corresponding
to
to
the
the
attributes
attributes
in
in
our
our
phone
phone
number
number
class.
class
This
this
makes
makes
phone
phone
number
number
validation
validation
a
a
lot
lot
easier.
easier
For
for
now,
now
we'll
we'll
just
just
validate
validate
the
the
max
max
length
length
of
of
the
the
input,
input
and
and
we
we
can
can
bind
bind
each
each
attribute
attribute
to
to
the
the
NG
ng
model
model
directive.
directive
From
from
there,
there
we
we
add
add
a
a
button
button
that
that
will
will
allow
allow
the
the
user
user
to
to
trigger
trigger
the
the
process
process
of
of
Firebase
firebase
sending
sending
a
a
text
text
message
message
to
to
their
their
number.
number
And
and
below
below
that,
that
we'll
we'll
show
show
a
a
div
div
conditionally
conditionally
only
only
if
if
that
that
verification
verification
code
code
has
has
been
been
sent.
sent
This
this
div
div
will
will
have
have
another
another
form
form
field
field
for
for
the
the
user
user
to
to
enter
enter
that
that
verification
verification
code
code
and
and
also
also
another
another
button
button
to
to
submit
submit
it.
it
After
after
the
the
user
user
submits
submits
a
a
valid
valid
code,
code
it
it
will
will
update
update
the
the
auth
auth
state
state
in
in
Firebase
firebase
and
and
this
this
entire
entire
div
div
will
will
be
be
hidden
hidden
and
and
then
then
we'll
we'll
conditionally
conditionally
show
show
this
this
other
other
one
one
saying
saying
you've
you've
successfully
successfully
logged
logged
in
in
with
with
your
your
phone
phone
number.
number
If
if
we
we
go
go
back
back
to
to
the
the
app,
app
we
we
should
should
see
see
everything
everything
working
working
as
as
expected.
expected
Firebase
firebase
also
also
has
has
an
an
invisible
invisible
CAPTCHA,
captcha
which
which
you
you
can
can
use
use
if
if
you
you
don't
don't
want
want
your
your
user
user
to
to
have
have
to
to
go
go
through
through
this
this
tedious
tedious
recaptcha
recaptcha
process.
process
That's
that's
it
it
for
for
PhoneAuth.
phoneauth
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
access
access
to
to
exclusive
exclusive
content
content
as
as
well
well
as
as
free
free
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker explains the use of a new phone authentication system for Angular 4 app, which uses an SDK to implement it into the app. They also discuss the use of 2-factor authentication and how it works better than other methods, especially with transferring phone numbers between multiple people. The speaker then outlines the process of validating a phone number in Angular 4 app, including a window object, a sign-in method, and a verification code. They also explain the use of a div to validate a verification code and a button to submit it. Finally, they discuss the use of an invisible CAPT At the end of the process to confirm a successful phone number verification.
Firebase Phone Authentication in Angular 4
In this episode, we use the Firebase SDK to authenticate users with their phone number. Full Lesson: https://angularfirebase.com/lessons/firebase-phone-authentication-with-angular-4-tutorial/