Proteger rutas privadas en Angular es uno de los pasos finales antes de llevar tu aplicación a producción. Con un AuthGuard conectado a Firebase Authentication, puedes bloquear el acceso a vistas sensibles como /chat y redirigir a usuarios no autenticados hacia el login.

Esta protección evita que cualquier persona ingrese a secciones privadas escribiendo la URL directamente en el navegador, algo común cuando trabajas con SPAs y rutas declaradas en app.routes.

¿Qué hace un AuthGuard en Angular y por qué lo necesitas?

Un AuthGuard es una clase que implementa la interfaz CanActivate de Angular y decide si una ruta puede activarse o no. Funciona como un portero: antes de cargar el componente, evalúa una condición y devuelve un booleano o un observable que resuelve a booleano.

En el flujo que vimos, el guard vive en src/app/guards y se apoya en un AuthService ligado a Firebase. La lógica es simple pero efectiva.

• Si el usuario está autenticado, imprime usuario permitido y devuelve true.
• Si no lo está, imprime denegado, navega hacia /auth y devuelve false.
• El método canActivate retorna un observable para manejar la verificación asíncrona contra Firebase.

Ese retorno asíncrono es clave porque Firebase no responde de inmediato sobre el estado de sesión. [00:30]

¿Qué es canActivate en Angular? Es un método de la interfaz CanActivate que Angular ejecuta antes de activar una ruta. Si devuelve true, permite el acceso; si devuelve false, lo bloquea.

¿Cómo aplicar el AuthGuard a una ruta específica?

En el archivo app.routes tenemos tres rutas declaradas: la ruta vacía que redirige a auth, la ruta chat, y un wildcard para cualquier URL aleatoria que también lleva a auth. La única que necesita protección es chat, porque es la que solo deben ver usuarios autenticados.

Para protegerla, agregas la propiedad canActivate al objeto de la ruta y pasas tu AuthGuard dentro del array. Aquí hay un detalle importante: cuando tu editor o Copilot sugiere el import, asegúrate de traer tu AuthGuard desde guards/auth.guard y no uno genérico de otra librería.

typescript import { AuthGuard } from './guards/auth.guard';

export const routes: Routes = [ { path: '', redirectTo: 'auth', pathMatch: 'full' }, { path: 'auth', component: AuthComponent }, { path: 'chat', component: ChatComponent, canActivate: [AuthGuard] }, { path: '**', redirectTo: 'auth' } ];

Con esa línea ya tienes el chat blindado. [01:25]

¿Cómo verificar que la protección funciona?

Después de guardar los cambios, abre la aplicación en localhost. Si cierras sesión y luego intentas ingresar manualmente a la URL del chat presionando enter, Angular ejecuta el guard, detecta que no hay usuario autenticado en Firebase y te redirige automáticamente a /auth.

Ese comportamiento confirma dos cosas: que el AuthService está leyendo correctamente el estado de Firebase y que el guard está interceptando la navegación antes de renderizar el componente.

¿Por qué redirigir en vez de solo bloquear? Porque mejora la experiencia. Un usuario no autenticado no entiende un error 403; en cambio, llegar al login le indica qué hacer a continuación.

¿Qué sigue después de proteger las rutas?

Con el AuthGuard implementado, tu aplicación Angular cumple el requisito mínimo de seguridad en cliente: nadie entra al chat sin pasar por Firebase Authentication. El siguiente paso natural es llevarla a producción, lo que implica hostear la aplicación en la nube y configurar el dominio para que Firebase reconozca el origen autorizado.

Algunas habilidades que practicaste en este flujo merecen un repaso.

• Uso de CanActivate y observables para validaciones asíncronas de sesión.
• Inyección de un AuthService que centraliza la lógica de autenticación con Firebase.
• Configuración de rutas protegidas mediante la propiedad canActivate en app.routes.
• Redirección controlada con Router.navigate cuando falla la verificación.

¿Ya probaste tu guard cerrando sesión y forzando la URL? Cuéntame en los comentarios qué comportamiento viste en consola.