UPDATE: Get the latest version here https://angularfirebase.com/lessons/google-user-auth-with-firestore-custom-data/

Router Guards are used in Angular to prevent unauthorized users from navigating anywhere they want in your app. At this point our app has a working Firebase authentication system, but any visitor can access routes intended for only logged in users. 

Guards handle this problem by implementing the CanActivate interface, which tells Angular whether or not to activate a route. In this example, we will protect pages for unauthenticated users and redirect them to a signin page. 

Step 1 - Generate the Guard

We use the CLI in Angular 4 to generate a default guard. 

Guards use the injectable decorator, so they need to be registered as a provider just like any other service in the app module. 

Step 2 - Update the Auth Service

Our users are authenticating via Firebase and the AngularFire2 package. In the service we are subscribing the FirebaseAuthState, then using a getter to see if the auth object is null. Checkout the OAuth tutorial for more details on this code. 

Step 3 - Implement the Guard Logic

Router guards always return a boolean type or boolean observable. The logic here is simple, if the FirebaseAuthState is defined, we activate the route. Otherwise, we return false and navigate to to the login page. 

Now that the guard is complete, we just need to apply it to specific routes in the routing module. 

That's it for router guards, I'll see you next time.
2024-02-04T08:40:27.941Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c524a13c-706f-40e1-9b4d-7cc6d0c5f8b3
71dbf718b5905f997a1d13b60eeb627393e7d1e2037abf6a578745bc21e8c359
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Router guards are used in Angular to prevent unauthorized users from navigating anywhere they want in your app.
At this point, our app has a working Firebase authentication system, but any visitor can access routes intended only for logged in users.
Guards handle this problem by implementing the can activate interface, which tells Angular whether or not to activate a certain route.
In this example, we will protect pages from unauthenticated users and redirect them to a sign in page.
We use the CLI in Angular 4 to generate a default guard.
Guards use the injectable decorator, so they need to be registered as a provider just like any other service in the app module.
Our users are authenticating via Firebase and the AngularFire 2 package.
In the service, we are subscribing to the Firebase auth state, then using a getter to see if the auth object is null.
Check out the OAuth tutorial for more details on this code.
Router guards always return a boolean type or a boolean observable.
The logic here is simple.
If the Firebase auth state is defined.
We activate the route.
Otherwise, we return false and navigate the user to the login page.
Now that the guard is complete, we just need to apply it to specific routes in the routing module.
That's it for router guards.
I'll see you next time.

Speaker 0: Router guards are used in Angular to prevent unauthorized users from navigating anywhere they want in your app. At this point, our app has a working Firebase authentication system, but any visitor can access routes intended only for logged in users. Guards handle this problem by implementing the can activate interface, which tells Angular whether or not to activate a certain route. In this example, we will protect pages from unauthenticated users and redirect them to a sign in page. We use the CLI in Angular 4 to generate a default guard.

Guards use the injectable decorator, so they need to be registered as a provider just like any other service in the app module. Our users are authenticating via Firebase and the AngularFire 2 package. In the service, we are subscribing to the Firebase auth state, then using a getter to see if the auth object is null. Check out the OAuth tutorial for more details on this code. Router guards always return a boolean type or a boolean observable.

The logic here is simple. If the Firebase auth state is defined. We activate the route. Otherwise, we return false and navigate the user to the login page. Now that the guard is complete, we just need to apply it to specific routes in the routing module.

That's it for router guards. I'll see you next time.
Router guards are used in Angular to prevent unauthorized users from navigating anywhere they want in your app. At this point, our app has a working Firebase authentication system, but any visitor can access routes intended only for logged in users. Guards handle this problem by implementing the can activate interface, which tells Angular whether or not to activate a certain route. In this example, we will protect pages from unauthenticated users and redirect them to a sign in page. We use the CLI in Angular 4 to generate a default guard. Guards use the injectable decorator, so they need to be registered as a provider just like any other service in the app module. Our users are authenticating via Firebase and the AngularFire 2 package. In the service, we are subscribing to the Firebase auth state, then using a getter to see if the auth object is null.
security
Check out the OAuth tutorial for more details on this code. Router guards always return a boolean type or a boolean observable. The logic here is simple. If the Firebase auth state is defined. We activate the route. Otherwise, we return false and navigate the user to the login page.
security
Now that the guard is complete, we just need to apply it to specific routes in the routing module.
That's it for router guards. I'll see you next time.
Router guards are used in Angular to prevent unauthorized users from navigating anywhere they want in your app. At this point, our app has a working Firebase authentication system, but any visitor can access routes intended only for logged in users. Guards handle this problem by implementing the can activate interface, which tells Angular whether or not to activate a certain route. In this example, we will protect pages from unauthenticated users and redirect them to a sign in page. We use the CLI in Angular 4 to generate a default guard. Guards use the injectable decorator, so they need to be registered as a provider just like any other service in the app module. Our users are authenticating via Firebase and the AngularFire 2 package. In the service, we are subscribing to the Firebase auth state, then using a getter to see if the auth object is null. Check out the OAuth tutorial for more details on this code. Router guards always return a boolean type or a boolean observable. The logic here is simple. If the Firebase auth state is defined. We activate the route. Otherwise, we return false and navigate the user to the login page. Now that the guard is complete, we just need to apply it to specific routes in the routing module. That's it for router guards. I'll see you next time.
Router
router
guards
guards
are
are
used
used
in
in
Angular
angular
to
to
prevent
prevent
unauthorized
unauthorized
users
users
from
from
navigating
navigating
anywhere
anywhere
they
they
want
want
in
in
your
your
app.
app
At
at
this
this
point,
point
our
our
app
app
has
has
a
a
working
working
Firebase
firebase
authentication
authentication
system,
system
but
but
any
any
visitor
visitor
can
can
access
access
routes
routes
intended
intended
only
only
for
for
logged
logged
in
in
users.
users
Guards
guards
handle
handle
this
this
problem
problem
by
by
implementing
implementing
the
the
can
can
activate
activate
interface,
interface
which
which
tells
tells
Angular
angular
whether
whether
or
or
not
not
to
to
activate
activate
a
a
certain
certain
route.
route
In
in
this
this
example,
example
we
we
will
will
protect
protect
pages
pages
from
from
unauthenticated
unauthenticated
users
users
and
and
redirect
redirect
them
them
to
to
a
a
sign
sign
in
in
page.
page
We
we
use
use
the
the
CLI
cli
in
in
Angular
angular
4
4
to
to
generate
generate
a
a
default
default
guard.
guard
Guards
guards
use
use
the
the
injectable
injectable
decorator,
decorator
so
so
they
they
need
need
to
to
be
be
registered
registered
as
as
a
a
provider
provider
just
just
like
like
any
any
other
other
service
service
in
in
the
the
app
app
module.
module
Our
our
users
users
are
are
authenticating
authenticating
via
via
Firebase
firebase
and
and
the
the
AngularFire
angularfire
2
2
package.
package
In
in
the
the
service,
service
we
we
are
are
subscribing
subscribing
to
to
the
the
Firebase
firebase
auth
auth
state,
state
then
then
using
using
a
a
getter
getter
to
to
see
see
if
if
the
the
auth
auth
object
object
is
is
null.
null
Check
check
out
out
the
the
OAuth
oauth
tutorial
tutorial
for
for
more
more
details
details
on
on
this
this
code.
code
Router
router
guards
guards
always
always
return
return
a
a
boolean
boolean
type
type
or
or
a
a
boolean
boolean
observable.
observable
The
the
logic
logic
here
here
is
is
simple.
simple
If
if
the
the
Firebase
firebase
auth
auth
state
state
is
is
defined.
defined
We
we
activate
activate
the
the
route.
route
Otherwise,
otherwise
we
we
return
return
false
false
and
and
navigate
navigate
the
the
user
user
to
to
the
the
login
login
page.
page
Now
now
that
that
the
the
guard
guard
is
is
complete,
complete
we
we
just
just
need
need
to
to
apply
apply
it
it
to
to
specific
specific
routes
routes
in
in
the
the
routing
routing
module.
module
That's
that's
it
it
for
for
router
router
guards.
guards
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker explains how Angular's app has a workingeseed bus authentication system, but any visitor can access routes intended for logged-in users. The use of a CLI in Angular 4 is used to generate a default guard, and the service is subscribed to the contacted-home zip code and used to see if the denies object is null. The logic is simple and applies to specific routes in the routing module.
Angular Router Guards for Firebase Users
Router guards are used in Angular to prevent unauthorized users from navigating anywhere they want in your app. At this point, our app has a working Firebase authentication system, but any visitor can access routes intended only for logged in users. Guards handle this problem by implementing the can activate interface, which tells Angular whether or not to activate a certain route. In this example, we will protect pages from unauthenticated users and redirect them to a sign in page. We use the CLI in Angular 4 to generate a default guard. Guards use the injectable decorator, so they need to be registered as a provider just like any other service in the app module. Our users are authenticating via Firebase and the AngularFire 2 package. In the service, we are subscribing to the Firebase auth state, then using a getter to see if the auth object is null. Check out the OAuth tutorial for more details on this code. Router guards always return a boolean type or a boolean observable. The logic here is simple. If the Firebase auth state is defined. We activate the route. Otherwise, we return false and navigate the user to the login page. Now that the guard is complete, we just need to apply it to specific routes in the routing module. That's it for router guards. I'll see you next time.
The speaker explains how Angular's app has a workingeseed bus authentication system, but any visitor can access routes intended for logged-in users. The use of a CLI in Angular 4 is used to generate a default guard, and the service is subscribed to the contacted-home zip code and used to see if the denies object is null. The logic is simple and applies to specific routes in the routing module.