Inicio de sesión con Google (firebase) desde ⚛️REACT con protección de rutas
En este artículo, aprenderemos cómo implementar la funcionalidad de inicio de sesión con Google utilizando Firebase en una aplicación ⚛️React y cómo proteger rutas privadas una vez que el usuario haya iniciado sesión.
Configuración inicial
Para comenzar, necesitaremos configurar un proyecto en Firebase y obtener las credenciales necesarias para integrar la autenticación con Google en nuestra aplicación ⚛️React. Esto incluye configurar un proyecto en la consola de Firebase y obtener las claves de API necesarias para la autenticación con Google.
Instalación de dependencias
Luego, necesitaremos instalar las dependencias necesarias en nuestro proyecto ⚛️React. Esto incluirá la instalación del paquete `firebase` para conectarnos a Firebase, así como otras dependencias relacionadas con la autenticación con Google.
npm install firebase
Configuración de Firebase
Una vez que hayamos instalado las dependencias, necesitaremos configurar Firebase en nuestra aplicación. Esto incluirá inicializar Firebase con nuestras credenciales y configurar la autenticación con Google como un proveedor de inicio de sesión.
Esto también implicará la configuración de las reglas de seguridad en Firebase para proteger los datos de los usuarios una vez que hayan iniciado sesión.
Iniciar sesión con Google
Una vez que hayamos configurado Firebase en nuestra aplicación ⚛️React, podemos implementar la funcionalidad de inicio de sesión con Google. Esto requerirá la creación de un botón de inicio de sesión que permita al usuario autenticarse con su cuenta de Google.
Una vez que el usuario haya iniciado sesión con éxito, podremos acceder a su información de perfil y almacenarla en la base de datos de Firebase si es necesario.
Protección de rutas
Finalmente, podemos implementar la protección de rutas en nuestra aplicación ⚛️React. Esto requerirá la creación de un componente de `PrivateRoute` que verificará si el usuario ha iniciado sesión antes de permitirles acceder a rutas privadas en la aplicación.
Si el usuario no ha iniciado sesión, serán redirigidos a la página de inicio de sesión. Una vez que hayan iniciado sesión con éxito, podrán acceder a las rutas protegidas en la aplicación.
Conclusión
En resumen, hemos aprendido cómo implementar el inicio de sesión con Google utilizando Firebase en una aplicación ⚛️React y cómo proteger las rutas privadas una vez que el usuario ha iniciado sesión. Esta funcionalidad es fundamental para crear aplicaciones seguras y proteger los datos de los usuarios.
cuando cierro sesion y me vuelvo a logear no me muestra las cuentas a escoger, directamente se logea, debo borrar las cookies para que me muestren de nuevo para escoger cuentas
Gracias
como se nota que sos ingeniero, y lo digo x la capacidad de explicar paso a paso con detalle la funcionalidad de llo que se está codeando, una cosa es lo que hacen muchos dev que si, quizas saben escribir codigo pero otra es explicar el para que y porque se debe realizar asi las cosas, son las 4:26 en buenos aires y creeme entendi a la perfeccion, un subs mas en tu lista.. sos un crack
hola amigo una pregunta, ahora en caso de que esté logeado y en la URL pongo /login, no debería irse a esa ruta xq ya estoy logeado, si quiero que me redirija a la pantalla principal, ahí como se puede hacer eso?
no le veo la funcion, cuaqluiera que tenga un correo puede ingresar, asi que no se protege ninguna ruta
Sabes porque no autentica desde el browse de un dispositivo mobil.
Buenas noches Franklin, como puedo hacer para recibir esas asesorías?
Profe usted hace los diseño ?
he vuelto por ese chupón xD
Interesante video pelao
Me estoy haciendo una idea de la inmensidad de lo que es Facebook, permitiendo registrarse con tantos servicios, tantas pages de navegación, protección de perfil etc etc… Madre mía y súmale el Front, las medía querias, Backend