Full lesson:  https://angularfirebase.com/lessons/custom-usernames-with-firebase-authentication-and-angular/

Learn how to add custom usernames to Firebase users, then asynchronously validate them with Angular 4.
2024-02-04T08:31:14.752Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
430e23f8-0e24-4b9e-bb53-a1e08f28a483
9e39e100fc198e5097f3d055d6faa21ffad52cd85f149f5c80889b4bf28d88d4
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to create custom usernames for Firebase users, then validate the usernames asynchronously using Angular 4.
Users will first authenticate with OAuth, then they'll be directed to a username form.
And after each key press, the username will be updated based on whether or not it's available in the database.
The first step is to model the data.
First, we have a users collection that Saves just basic information about the user that we wanna display throughout the app.
And we have a separate collection of just usernames where the Username itself is the key and the value is the associated user ID.
This allows us to make checks for username availability much more quickly than we could If we query the entire list of users.
Now we can start building the auth service.
We're going to import the AngularFire 2 package, both the database and the auth module.
We also import the RxJS switch map operator which we'll use to avoid nested subscriptions when we get the user data.
I'm also creating a dedicated user class to hold the user data.
In this case, it's just going to take a username and a user ID.
And as the constructor, it'll take the Firebase auth object.
In, uh, service constructor, we first wait for the auth object to emit from buyer base, And then we use that data to query the database for the actual username.
The first function's going to allow the user to authenticate With their Google account.
This codes directly from the AngularFire 2 package.
To manage the username process, we start by creating a getter to see if the username is defined or not.
Then we create a check username function, which will check the username Collection to see if that particular username is defined.
Lastly, we create a function for the user to select their username.
This updates both the usernames document, as well as the user specific user document under their user ID.
Now we can start building the component.
We start by injecting the auth service.
Then we set one variable for the username text, which is what the user enters into the form.
And we set a separate variable for username available, which is a Boolean, true or false, whether or not the username is available.
First, the user will sign in with Google, which will populate their user ID and then will display the form to fill out the username.
The check username function will send the actual request to the database to see if the username is available.
The return value was converted to a boolean, then we set that to our username available variable.
Then we'll create an event handler to update the database when the user selects a valid username.
In the template, we start with the sign in with Google button.
Then once we have a current user and if their username is Find, then we display the username form.
The input itself uses ng model to set the username text variable in the component typescript.
Then we bind the key up event to the check username function.
Now we can display a couple messages conditionally based on whether or not that username is available.
We can also use the username available Boolean to disable the button if that username is already taken.
So now we have a working username system and we can See that it updates the database at both locations when the user clicks the button.
Our final step is to enforce this validation on the back end with Firebase database rules.
We do this by setting a validation rule, then traversing the database, calling root child usernames, and then seeing if the new data the user's trying to enter already exists in the database.
If it does, the rule will evaluate to false and prevent the operation from taking place.
That's it for this episode.
If you found the video helpful, please like and subscribe.
And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com.
For just a few bucks a month, you'll get access to exclusive content as well as Free one on one project consulting.
Thanks for watching, and I'll see you next time.

Speaker 0: In this episode, we're going to create custom usernames for Firebase users, then validate the usernames asynchronously using Angular 4. Users will first authenticate with OAuth, then they'll be directed to a username form. And after each key press, the username will be updated based on whether or not it's available in the database. The first step is to model the data. First, we have a users collection that Saves just basic information about the user that we wanna display throughout the app.

And we have a separate collection of just usernames where the Username itself is the key and the value is the associated user ID. This allows us to make checks for username availability much more quickly than we could If we query the entire list of users. Now we can start building the auth service. We're going to import the AngularFire 2 package, both the database and the auth module. We also import the RxJS switch map operator which we'll use to avoid nested subscriptions when we get the user data.

I'm also creating a dedicated user class to hold the user data. In this case, it's just going to take a username and a user ID. And as the constructor, it'll take the Firebase auth object. In, uh, service constructor, we first wait for the auth object to emit from buyer base, And then we use that data to query the database for the actual username. The first function's going to allow the user to authenticate With their Google account.

This codes directly from the AngularFire 2 package. To manage the username process, we start by creating a getter to see if the username is defined or not. Then we create a check username function, which will check the username Collection to see if that particular username is defined. Lastly, we create a function for the user to select their username. This updates both the usernames document, as well as the user specific user document under their user ID.

Now we can start building the component. We start by injecting the auth service. Then we set one variable for the username text, which is what the user enters into the form. And we set a separate variable for username available, which is a Boolean, true or false, whether or not the username is available. First, the user will sign in with Google, which will populate their user ID and then will display the form to fill out the username.

The check username function will send the actual request to the database to see if the username is available. The return value was converted to a boolean, then we set that to our username available variable. Then we'll create an event handler to update the database when the user selects a valid username. In the template, we start with the sign in with Google button. Then once we have a current user and if their username is Find, then we display the username form.

The input itself uses ng model to set the username text variable in the component typescript. Then we bind the key up event to the check username function. Now we can display a couple messages conditionally based on whether or not that username is available. We can also use the username available Boolean to disable the button if that username is already taken. So now we have a working username system and we can See that it updates the database at both locations when the user clicks the button.

Our final step is to enforce this validation on the back end with Firebase database rules. We do this by setting a validation rule, then traversing the database, calling root child usernames, and then seeing if the new data the user's trying to enter already exists in the database. If it does, the rule will evaluate to false and prevent the operation from taking place. That's it for this episode. If you found the video helpful, please like and subscribe.

And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as Free one on one project consulting. Thanks for watching, and I'll see you next time.
In this episode, we're going to create custom usernames for Firebase users, then validate the usernames asynchronously using Angular 4. Users will first authenticate with OAuth, then they'll be directed to a username form.
And after each key press, the username will be updated based on whether or not it's available in the database. The first step is to model the data. First, we have a users collection that Saves just basic information about the user that we wanna display throughout the app. And we have a separate collection of just usernames where the Username itself is the key and the value is the associated user ID.
databases
data management
data
This allows us to make checks for username availability much more quickly than we could If we query the entire list of users. Now we can start building the auth service. We're going to import the AngularFire 2 package, both the database and the auth module. We also import the RxJS switch map operator which we'll use to avoid nested subscriptions when we get the user data. I'm also creating a dedicated user class to hold the user data. In this case, it's just going to take a username and a user ID. And as the constructor, it'll take the Firebase auth object. In, uh, service constructor, we first wait for the auth object to emit from buyer base, And then we use that data to query the database for the actual username. The first function's going to allow the user to authenticate With their Google account. This codes directly from the AngularFire 2 package. To manage the username process, we start by creating a getter to see if the username is defined or not. Then we create a check username function, which will check the username Collection to see if that particular username is defined. Lastly, we create a function for the user to select their username. This updates both the usernames document, as well as the user specific user document under their user ID. Now we can start building the component. We start by injecting the auth service. Then we set one variable for the username text, which is what the user enters into the form. And we set a separate variable for username available, which is a Boolean, true or false, whether or not the username is available. First, the user will sign in with Google, which will populate their user ID and then will display the form to fill out the username. The check username function will send the actual request to the database to see if the username is available. The return value was converted to a boolean, then we set that to our username available variable. Then we'll create an event handler to update the database when the user selects a valid username. In the template, we start with the sign in with Google button. Then once we have a current user and if their username is Find, then we display the username form. The input itself uses ng model to set the username text variable in the component typescript. Then we bind the key up event to the check username function. Now we can display a couple messages conditionally based on whether or not that username is available. We can also use the username available Boolean to disable the button if that username is already taken. So now we have a working username system and we can See that it updates the database at both locations when the user clicks the button. Our final step is to enforce this validation on the back end with Firebase database rules. We do this by setting a validation rule, then traversing the database, calling root child usernames, and then seeing if the new data the user's trying to enter already exists in the database.
If it does, the rule will evaluate to false and prevent the operation from taking place. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as Free one on one project consulting. Thanks for watching, and I'll see you next time.
youtube
podcasts
streaming
In this episode, we're going to create custom usernames for Firebase users, then validate the usernames asynchronously using Angular 4. Users will first authenticate with OAuth, then they'll be directed to a username form. And after each key press, the username will be updated based on whether or not it's available in the database. The first step is to model the data. First, we have a users collection that Saves just basic information about the user that we wanna display throughout the app. And we have a separate collection of just usernames where the Username itself is the key and the value is the associated user ID. This allows us to make checks for username availability much more quickly than we could If we query the entire list of users. Now we can start building the auth service. We're going to import the AngularFire 2 package, both the database and the auth module. We also import the RxJS switch map operator which we'll use to avoid nested subscriptions when we get the user data. I'm also creating a dedicated user class to hold the user data. In this case, it's just going to take a username and a user ID. And as the constructor, it'll take the Firebase auth object. In, uh, service constructor, we first wait for the auth object to emit from buyer base, And then we use that data to query the database for the actual username. The first function's going to allow the user to authenticate With their Google account. This codes directly from the AngularFire 2 package. To manage the username process, we start by creating a getter to see if the username is defined or not. Then we create a check username function, which will check the username Collection to see if that particular username is defined. Lastly, we create a function for the user to select their username. This updates both the usernames document, as well as the user specific user document under their user ID. Now we can start building the component. We start by injecting the auth service. Then we set one variable for the username text, which is what the user enters into the form. And we set a separate variable for username available, which is a Boolean, true or false, whether or not the username is available. First, the user will sign in with Google, which will populate their user ID and then will display the form to fill out the username. The check username function will send the actual request to the database to see if the username is available. The return value was converted to a boolean, then we set that to our username available variable. Then we'll create an event handler to update the database when the user selects a valid username. In the template, we start with the sign in with Google button. Then once we have a current user and if their username is Find, then we display the username form. The input itself uses ng model to set the username text variable in the component typescript. Then we bind the key up event to the check username function. Now we can display a couple messages conditionally based on whether or not that username is available. We can also use the username available Boolean to disable the button if that username is already taken. So now we have a working username system and we can See that it updates the database at both locations when the user clicks the button. Our final step is to enforce this validation on the back end with Firebase database rules. We do this by setting a validation rule, then traversing the database, calling root child usernames, and then seeing if the new data the user's trying to enter already exists in the database. If it does, the rule will evaluate to false and prevent the operation from taking place. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as Free one on one project consulting. Thanks for watching, and I'll see you next time.
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
create
create
custom
custom
usernames
usernames
for
for
Firebase
firebase
users,
users
then
then
validate
validate
the
the
usernames
usernames
asynchronously
asynchronously
using
using
Angular
angular
4.
4
Users
users
will
will
first
first
authenticate
authenticate
with
with
OAuth,
oauth
then
then
they'll
they'll
be
be
directed
directed
to
to
a
a
username
username
form.
form
And
and
after
after
each
each
key
key
press,
press
the
the
username
username
will
will
be
be
updated
updated
based
based
on
on
whether
whether
or
or
not
not
it's
it's
available
available
in
in
the
the
database.
database
The
the
first
first
step
step
is
is
to
to
model
model
the
the
data.
data
First,
first
we
we
have
have
a
a
users
users
collection
collection
that
that
Saves
saves
just
just
basic
basic
information
information
about
about
the
the
user
user
that
that
we
we
wanna
wanna
display
display
throughout
throughout
the
the
app.
app
And
and
we
we
have
have
a
a
separate
separate
collection
collection
of
of
just
just
usernames
usernames
where
where
the
the
Username
username
itself
itself
is
is
the
the
key
key
and
and
the
the
value
value
is
is
the
the
associated
associated
user
user
ID.
id
This
this
allows
allows
us
us
to
to
make
make
checks
checks
for
for
username
username
availability
availability
much
much
more
more
quickly
quickly
than
than
we
we
could
could
If
if
we
we
query
query
the
the
entire
entire
list
list
of
of
users.
users
Now
now
we
we
can
can
start
start
building
building
the
the
auth
auth
service.
service
We're
we're
going
going
to
to
import
import
the
the
AngularFire
angularfire
2
2
package,
package
both
both
the
the
database
database
and
and
the
the
auth
auth
module.
module
We
we
also
also
import
import
the
the
RxJS
rxjs
switch
switch
map
map
operator
operator
which
which
we'll
we'll
use
use
to
to
avoid
avoid
nested
nested
subscriptions
subscriptions
when
when
we
we
get
get
the
the
user
user
data.
data
I'm
i'm
also
also
creating
creating
a
a
dedicated
dedicated
user
user
class
class
to
to
hold
hold
the
the
user
user
data.
data
In
in
this
this
case,
case
it's
it's
just
just
going
going
to
to
take
take
a
a
username
username
and
and
a
a
user
user
ID.
id
And
and
as
as
the
the
constructor,
constructor
it'll
it'll
take
take
the
the
Firebase
firebase
auth
auth
object.
object
In,
in
uh,
uh
service
service
constructor,
constructor
we
we
first
first
wait
wait
for
for
the
the
auth
auth
object
object
to
to
emit
emit
from
from
buyer
buyer
base,
base
And
and
then
then
we
we
use
use
that
that
data
data
to
to
query
query
the
the
database
database
for
for
the
the
actual
actual
username.
username
The
the
first
first
function's
function's
going
going
to
to
allow
allow
the
the
user
user
to
to
authenticate
authenticate
With
with
their
their
Google
google
account.
account
This
this
codes
codes
directly
directly
from
from
the
the
AngularFire
angularfire
2
2
package.
package
To
to
manage
manage
the
the
username
username
process,
process
we
we
start
start
by
by
creating
creating
a
a
getter
getter
to
to
see
see
if
if
the
the
username
username
is
is
defined
defined
or
or
not.
not
Then
then
we
we
create
create
a
a
check
check
username
username
function,
function
which
which
will
will
check
check
the
the
username
username
Collection
collection
to
to
see
see
if
if
that
that
particular
particular
username
username
is
is
defined.
defined
Lastly,
lastly
we
we
create
create
a
a
function
function
for
for
the
the
user
user
to
to
select
select
their
their
username.
username
This
this
updates
updates
both
both
the
the
usernames
usernames
document,
document
as
as
well
well
as
as
the
the
user
user
specific
specific
user
user
document
document
under
under
their
their
user
user
ID.
id
Now
now
we
we
can
can
start
start
building
building
the
the
component.
component
We
we
start
start
by
by
injecting
injecting
the
the
auth
auth
service.
service
Then
then
we
we
set
set
one
one
variable
variable
for
for
the
the
username
username
text,
text
which
which
is
is
what
what
the
the
user
user
enters
enters
into
into
the
the
form.
form
And
and
we
we
set
set
a
a
separate
separate
variable
variable
for
for
username
username
available,
available
which
which
is
is
a
a
Boolean,
boolean
true
true
or
or
false,
false
whether
whether
or
or
not
not
the
the
username
username
is
is
available.
available
First,
first
the
the
user
user
will
will
sign
sign
in
in
with
with
Google,
google
which
which
will
will
populate
populate
their
their
user
user
ID
id
and
and
then
then
will
will
display
display
the
the
form
form
to
to
fill
fill
out
out
the
the
username.
username
The
the
check
check
username
username
function
function
will
will
send
send
the
the
actual
actual
request
request
to
to
the
the
database
database
to
to
see
see
if
if
the
the
username
username
is
is
available.
available
The
the
return
return
value
value
was
was
converted
converted
to
to
a
a
boolean,
boolean
then
then
we
we
set
set
that
that
to
to
our
our
username
username
available
available
variable.
variable
Then
then
we'll
we'll
create
create
an
an
event
event
handler
handler
to
to
update
update
the
the
database
database
when
when
the
the
user
user
selects
selects
a
a
valid
valid
username.
username
In
in
the
the
template,
template
we
we
start
start
with
with
the
the
sign
sign
in
in
with
with
Google
google
button.
button
Then
then
once
once
we
we
have
have
a
a
current
current
user
user
and
and
if
if
their
their
username
username
is
is
Find,
find
then
then
we
we
display
display
the
the
username
username
form.
form
The
the
input
input
itself
itself
uses
uses
ng
ng
model
model
to
to
set
set
the
the
username
username
text
text
variable
variable
in
in
the
the
component
component
typescript.
typescript
Then
then
we
we
bind
bind
the
the
key
key
up
up
event
event
to
to
the
the
check
check
username
username
function.
function
Now
now
we
we
can
can
display
display
a
a
couple
couple
messages
messages
conditionally
conditionally
based
based
on
on
whether
whether
or
or
not
not
that
that
username
username
is
is
available.
available
We
we
can
can
also
also
use
use
the
the
username
username
available
available
Boolean
boolean
to
to
disable
disable
the
the
button
button
if
if
that
that
username
username
is
is
already
already
taken.
taken
So
so
now
now
we
we
have
have
a
a
working
working
username
username
system
system
and
and
we
we
can
can
See
see
that
that
it
it
updates
updates
the
the
database
database
at
at
both
both
locations
locations
when
when
the
the
user
user
clicks
clicks
the
the
button.
button
Our
our
final
final
step
step
is
is
to
to
enforce
enforce
this
this
validation
validation
on
on
the
the
back
back
end
end
with
with
Firebase
firebase
database
database
rules.
rules
We
we
do
do
this
this
by
by
setting
setting
a
a
validation
validation
rule,
rule
then
then
traversing
traversing
the
the
database,
database
calling
calling
root
root
child
child
usernames,
usernames
and
and
then
then
seeing
seeing
if
if
the
the
new
new
data
data
the
the
user's
user's
trying
trying
to
to
enter
enter
already
already
exists
exists
in
in
the
the
database.
database
If
if
it
it
does,
does
the
the
rule
rule
will
will
evaluate
evaluate
to
to
false
false
and
and
prevent
prevent
the
the
operation
operation
from
from
taking
taking
place.
place
That's
that's
it
it
for
for
this
this
episode.
episode
If
if
you
you
found
found
the
the
video
video
helpful,
helpful
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
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
For
for
just
just
a
a
few
few
bucks
bucks
a
a
month,
month
you'll
you'll
get
get
access
access
to
to
exclusive
exclusive
content
content
as
as
well
well
as
as
Free
free
one
one
on
on
one
one
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 how to use the reminded usernames feature in theiva app to update user data and access a new usernames document. They explain how to import the Angular assumption package, model the data, and use the denies and available input functions to set the username text variable and check the availability of the new usernames document. The speaker also explains how to enforce validation rules and make changes to the database and user access.
Custom Usernames with Firebase Authentication
In this episode, we're going to create custom usernames for Firebase users, then validate the usernames asynchronously using Angular 4. Users will first authenticate with OAuth, then they'll be directed to a username form. And after each key press, the username will be updated based on whether or not it's available in the database. The first step is to model the data. First, we have a users collection that Saves just basic information about the user that we wanna display throughout the app. And we have a separate collection of just usernames where the Username itself is the key and the value is the associated user ID. This allows us to make checks for username availability much more quickly than we could If we query the entire list of users. Now we can start building the auth service. We're going to import the AngularFire 2 package, both the database and the auth module. We also import the RxJS switch map operator which we'll use to avoid nested subscriptions when we get the user data. I'm also creating a dedicated user class to hold the user data. In this case, it's just going to take a username and a user ID. And as the constructor, it'll take the Firebase auth object. In, uh, service constructor, we first wait for the auth object to emit from buyer base, And then we use that data to query the database for the actual username. The first function's going to allow the user to authenticate With their Google account. This codes directly from the AngularFire 2 package. To manage the username process, we start by creating a getter to see if the username is defined or not. Then we create a check username function, which will check the username Collection to see if that particular username is defined. Lastly, we create a function for the user to select their username. This updates both the usernames document, as well as the user specific user document under their user ID. Now we can start building the component. We start by injecting the auth service. Then we set one variable for the username text, which is what the user enters into the form. And we set a separate variable for username available, which is a Boolean, true or false, whether or not the username is available. First, the user will sign in with Google, which will populate their user ID and then will display the form to fill out the username. The check username function will send the actual request to the database to see if the username is available. The return value was converted to a boolean, then we set that to our username available variable. Then we'll create an event handler to update the database when the user selects a valid username. In the template, we start with the sign in with Google button. Then once we have a current user and if their username is Find, then we display the username form. The input itself uses ng model to set the username text variable in the component typescript. Then we bind the key up event to the check username function. Now we can display a couple messages conditionally based on whether or not that username is available. We can also use the username available Boolean to disable the button if that username is already taken. So now we have a working username system and we can See that it updates the database at both locations when the user clicks the button. Our final step is to enforce this validation on the back end with Firebase database rules. We do this by setting a validation rule, then traversing the database, calling root child usernames, and then seeing if the new data the user's trying to enter already exists in the database. If it does, the rule will evaluate to false and prevent the operation from taking place. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as Free one on one project consulting. Thanks for watching, and I'll see you next time.
The speaker explains how to use the reminded usernames feature in theiva app to update user data and access a new usernames document. They explain how to import the Angular assumption package, model the data, and use the denies and available input functions to set the username text variable and check the availability of the new usernames document. The speaker also explains how to enforce validation rules and make changes to the database and user access.