Excelente video! En ningún otro video lo explican con este nivel de detalle para Firebase y React, me sirvió lo suficiente para incluso implementarlo con redux. Te lo agradezco!
La aplicación mas util en el frontend. gracias por compartir conocimiento. El componente que mas me gusto por la maniobra que realiza, el componente ProtectedRoute.
Una maravilla este video,de lo mejores contenidos que he visto ese mes; todo lo que me sirvio este video para terminar de entender varios conceptos y utilidades con firebase,muchas gracias.
CONSEJO A LOS QUE MIRAN ESTE VIDEO: si por alguna razon les aparece un error de "export 'Login' (imported as 'Login') was not found in './Components/Login' (possible exports: default)" lo que deben hacer es no importar entre llaves {Login} dejo esto solo por si alguien tuvo este mismo error pd: GRACIAS SEÑOR FAZT
Muy buena explicación, Super genial vengo días buscado como hacer un login y poder entender lo que se debe hacer y gracias a este video esta genial muchas gracias.
Excelente video!!! De los mejores en YT, ojala avances con lo que comentaste al final del video y puedas usar redux toolkit, para poder poder escalar en la app a otra cosas. Sigue asi!!
Hola Buenas noches, muchas gracias por todos tus aportes, escelente video simpre aprendo mucho viendop tus tutoriales, eres un excelente Maestro Que Dios te bendiga Hermano
Buenas tardes, inicialmente darte las gracias por la explicación de este video y por otro lado preguntarte si ya subiste el video que mencionaste al final de este, donde indicas que vas hacer un nuevo video de autenticación, como crear roles y poder guardar datos de cada usuario. Te agradecería mucho esta información. Saludoss!!!
Buena Fazt. Primero que nada quiero agradecer por tu excelente labor. Quería comentar que tengo un error y no comprendo porque sucede. Cuando uso try y catch al enviar los datos para crear el usuario no ingresa en el catch, me figura por consulta uncaught y el mensaje de firebase. No entiendo porque, ya que no es la primera vez que trabajo con este tipo de peticiones
Una duda, en el caso de querer crear un formulario con mas datos al momento de crear el usuario como por ejemplo: teléfono, dirección, dni, etc. Como se podría hacer? Ya que vos lo haces con la función de firebase createUserWithEmailAndPassword que entiendo es solo para esos dos datos, tendríamos que crear una función nosotros mismos y subir esos datos a firebase? o firebase cuenta con una función para un caso como ese?
Hola, excelente video y explicación Fazt. ¿Qué puedo hacer para darle seguridad al firebase initialize? Ya que al subir el proyecto a GitHub me salen advertencias sobre seguridad. Gracias
Muy bueno todo lo explicado, muy claro por cierto, Me gustaria consultarte si es que ya tenes el video de como asignar roles para usuarios comunes y ADMIN, como asi tambien como customizar los campos de los usuarios q se registran en una api como la q creaste en este ejemplo,
Hola EXCELENTE video, muchas gracias por todo! Solo me quedo una duda, la funcion signInWithPopup no funciona para moviles, por lo que estuve leyendo la documentacion de firebase para usar SiginWithRedirect, pero es necesario otra funcion de GetResult y hay que ponerlo en el useEffect pero no se como. Podrias ayudarme? O tendrias alguna recomendacion?
Excelente video Fast!, solo que al dar refresh me manda al login, pero sigo manteniendo mi currentUser.. no se que pasa, he comparado el codigo del repo. pd, tengo mas de una ruta para componente
Hola fazt excelente video, hay videos asi pero casi nadie explica como lo haces tu, solo una preguntita jsjs se puede hacer lo mismoo con node usando express y las dependencias necesarias?
Muchas gracias por tu video!!! esta genial! tengo una duda si quiero subirlo al hosting de firebase, la carpeta que tengo que seleccionar es la de components?
Hola, ¿Que tal comunidad? Excelente video Fazt Tengo una duda con respecto a las rutas protegidas. El programa te estaba lanzando un error en componente HOME porque no podia detectar la propiedad email de NULL. Entonces colocaste una ruta protegida para validar y evitar el error. Una forma en la cual yo lo solucione fue asi: if(!user) return Si el programa ve que USER es NULL lo redirecciona con el component Navigate, pero no se que tan seguro sea. ¿Cuál es tu opinion?
En mi caso lo hago con Prettier. El atajo depende del sistema que estes usando en Windows es: ALT + Shift + A y en Linux es: Ctrl + shit + I Aunque tambien se puede personalizar :)
Hola, lamentablemente no entiendo porque al aplicar estilos con las diferentes formas para react no me funcionan, ayer estuve intentando con styled-components, hoy intente con tailwindcss y lo mismo, no aplica estilos, alguien sabe porque?
Hola, felicitaciones y muchas gracias por tu contenido.. una pregunta.. como formateas el codigo? min 41:47 lo haces manual o es alguan extension? gracias
El formateado viene por parte de Prettier, y yo lo activo manual (por preferencia personal, porque también se puede hacer que se haga cuando se guarda). esta es la extension: prettier.io/ aqui hay un tutorial del tema: www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code-es en mi caso yo activo el formateado con la combinación: CTRL+shift+I
hola amigo quisiera saber como puedo modificar, para que en caso de que ya estoy logueado al momento de poner la url de login no se vaya a ese formulario, porque se supone que ya estoy logueado y no deberia poder irse a esa url
Hola, muchas gracias por todo, otra pregunta, no se si ya lo hicistes o tienes algun link donde se pueda guardar los datos de conexion de firebase sin que esten en el codigo? tendras algo de eso?
El error es capturado en el primer try/catch que encuentre, así que puede que estés viendo el archivo equivocado, prueba viendo si el error está cuando haces la petición al backend
Hola fazt, quería saber cómo hacer para agregar un campo nombre y apellido al register y que en el current user te aparezca esa información, busque por todos lados y no encuentro una forma de hacerlo, gracias
Muchas gracias por los vídeos que has hecho sobre React y MongoDB. Si fueras tan amable, quisiera preguntarte cómo proteger esa información sensible que se copia desde Firebase (el código que incluye las credencialess) para evitar que otras personas puedan usar tus usuarios (en este caso) o tu Firestore (en otros casos).
Buenas.... una consulta por alguna razon no me llegan los correos en el cambio de contraseña y registro. si alguien puede contestar me seria de ayuda.... lo demas funciona todo bien...saludos
AYUDA URGENTE!!! al principio corrí npx run start, no me reconocía el script por lo que miré el archivo package.json, me parecía extraño que solo aparecían tres lineas de código, donde solo tenía la dependecia de npx y la versión, comparé la líneas de código de tu proyectos de los archivos package.json y package-lock.json y este ultimo me aparece solo 8000 línead de código. busqué solución y desintalé create-react y lo volví a instalar y o sorpresa antes de instalar tailwinCSS tenía las mismas líneas de código de tu proyect, pero despues de instalar tailwinCSS OCURRIÓ EL MISMO ERROR, ya no sé que hace, no puedo ejecutar el npx run star. noo puedo hacer nadaa. AYUDAAA
Hola Fazt y a todos. Estaba haciendo el inicio de sesión con Facebook agregando el id de la app y la clave secreta también la uri OAuth de redireccionamiento, cuando ejecuto la app y quiero iniciar sesión me sale un mensaje en una ventana emergente que la app esta desactivada y que se podrá iniciar sesión cuando se reactive. Sabes como solucionarlo o alguién que sepa que me ayude?
hola excelente video Fazt, tengo una pregunta como haces para que automaticamente cuando escribes una ruta haces que se importe automaticamente, con que extension se puede realizar eso, gracias
Para importar, eso ya lo hace VSCode por defecto. Intenta hacer esto, Escribe las primeras letas del componente, por ejemplo en el caso de Login, escribes:
Sí Claro, el provider es parte de la biblioteca estandar de React, simplemente coloca tu enrutador adentro del provider y cada pantalla podra acceder al contexto
Gran titurial, me fue de gran ayuda! Pero tengo una duda. ¿Como puedo hacer para cuando hago un refresh en la página me mantenga el usuario que logueo?
Según recuerdo a este ejemplo le había añadido el evento onAuthStateChange. Este evento te permite recibir el estado del usuario, si ya esta autenticado o no. con este puedes estable en true o false en el context, para seguir diciendo que el usuario tiene autorizacion o no. cuando llamas el metodo signout, este cambiara a false
Excelente video! En ningún otro video lo explican con este nivel de detalle para Firebase y React, me sirvió lo suficiente para incluso implementarlo con redux. Te lo agradezco!
Fazt, nuevamente muestras código limpio, claro y simple de entender!!!!🙌... eres un Crack.... Gracias bro!!! 👊😎
Gracias Fazt y espero que te recuperes muy pronto de ese resfriado
La aplicación mas util en el frontend. gracias por compartir conocimiento. El componente que mas me gusto por la maniobra que realiza, el componente ProtectedRoute.
A la espera de la red social. Muy bien Fazt
Ya va siendo hora de salir de los CRUD y los logins y meternos con Web 3.0. Eres un crack!
Una maravilla este video,de lo mejores contenidos que he visto ese mes; todo lo que me sirvio este video para terminar de entender varios conceptos y utilidades con firebase,muchas gracias.
Estoy viendo el video Fazt! gracias por recomendármelo. Seria excelente el video que mencionas sobre entender mejor context! Gracias.
CONSEJO A LOS QUE MIRAN ESTE VIDEO: si por alguna razon les aparece un error de "export 'Login' (imported as 'Login') was not found in './Components/Login' (possible exports: default)" lo que deben hacer es no importar entre llaves {Login}
dejo esto solo por si alguien tuvo este mismo error
pd: GRACIAS SEÑOR FAZT
Muy buena explicación, Super genial vengo días buscado como hacer un login y poder entender lo que se debe hacer y gracias a este video esta genial muchas gracias.
Muchas gracias por compartirnos tus conocimientos, eres genial :)
Esto estaba esperando 😁. Gracias Fazt eres lo máximo ❤
Excelente video!!! De los mejores en YT, ojala avances con lo que comentaste al final del video y puedas
usar redux toolkit, para poder poder escalar en la app a otra cosas. Sigue asi!!
Excelente Profe Fazt. Lo estaba esperando Gracias
Exelente explicacion hermano. todo me quedo super claro . Eres uno de los mejores.
Excelente video, entendí perfecto todo. Muchas graciasss!!!
Hola Buenas noches, muchas gracias por todos tus aportes, escelente video simpre aprendo mucho viendop tus tutoriales, eres un excelente Maestro Que Dios te bendiga Hermano
Gracias Leonardo. Un gusto leerte. Muchos éxitos
Excelente curso, espero un pronto video!!
Eres el mejor Fazt, mil gracias por cada vídeo
que crack, me gustan mucho estos tutoriales* super utiles :3
esto de las secciones es una idea genial, sos el mejor
Oro, este video es oro !!! 🪙🪙🪙🪙🪙
Buenas tardes, inicialmente darte las gracias por la explicación de este video y por otro lado preguntarte si ya subiste el video que mencionaste al final de este, donde indicas que vas hacer un nuevo video de autenticación, como crear roles y poder guardar datos de cada usuario. Te agradecería mucho esta información. Saludoss!!!
Excelente Tutorial Fazt eres genial😉 👏✅
Muchas gracias por este tutorial, excelente explicación.
Genial máster voy a hacerlo, al terminarlo subiré en link del despliegue a ver
muchas gracias, me sirvio para entender varias cosas, es facil seguir lo que explicas, saludos!
Tengo un problema porque cuando tengo un error igual me lleva al home y muestra el error en consola, es decir, el trycatch no esta funcionando 39:08
Pudiste solucionarlo ?
me pasa lo mismo, pudiste solucionarlo?
lo mismo por aca, alguien con la solucion?
me pasaba lo mismo y tuve que agregar async/await a la funcion signup
const signup = async(email, password) => {
await createUserWithEmailAndPassword(auth,email,password)
}
@@franciscobarrera7373 gracias bro si me sirvio 👍
Tremendo, como siempre Fazt !
Estaba esperando un vídeo como este tuyo
Justo lo que estaba buscando! Maestro!
Sos un fenomeno explicando. Gracias
eres fantastico bro saludos !
Una pregunta, de cuánto es el límite de usuarios que puedo registrar en firebase si no pago?
Infinito
@@msjd8126 omaigaaaaa
Fazt, excelente tutorial, gracias.
Se te escucha un poco ronco, espero estés bien, bro. Saludos.
Buena Fazt. Primero que nada quiero agradecer por tu excelente labor. Quería comentar que tengo un error y no comprendo porque sucede. Cuando uso try y catch al enviar los datos para crear el usuario no ingresa en el catch, me figura por consulta uncaught y el mensaje de firebase. No entiendo porque, ya que no es la primera vez que trabajo con este tipo de peticiones
Cristian, tengo el mismo problema . Pudiste solucionarlo? saludos
Una duda, en el caso de querer crear un formulario con mas datos al momento de crear el usuario como por ejemplo: teléfono, dirección, dni, etc. Como se podría hacer? Ya que vos lo haces con la función de firebase createUserWithEmailAndPassword que entiendo es solo para esos dos datos, tendríamos que crear una función nosotros mismos y subir esos datos a firebase? o firebase cuenta con una función para un caso como ese?
Sos un crack!!!!
Hola Profe Fazt
Esperando ...
MERN con context API, GraphQL, Mongodb Atlas y TailwindCSS
Configuración de Visial Studio Code en 2022
Gracias
Eres una leyenda, Fazt!
Muchas gracias amigo excelente, eres grande
Hola, excelente video y explicación Fazt. ¿Qué puedo hacer para darle seguridad al firebase initialize? Ya que al subir el proyecto a GitHub me salen advertencias sobre seguridad. Gracias
Muy bueno todo lo explicado, muy claro por cierto, Me gustaria consultarte si es que ya tenes el video de como asignar roles para usuarios comunes y ADMIN, como asi tambien como customizar los campos de los usuarios q se registran en una api como la q creaste en este ejemplo,
Hola bro, tengo la misma duda conseguiste una forma de hacerlo?
Hola EXCELENTE video, muchas gracias por todo! Solo me quedo una duda, la funcion signInWithPopup no funciona para moviles, por lo que estuve leyendo la documentacion de firebase para usar SiginWithRedirect, pero es necesario otra funcion de GetResult y hay que ponerlo en el useEffect pero no se como. Podrias ayudarme? O tendrias alguna recomendacion?
Maestro de maestros
Increíble fazt
Gracias
excelente muy bien explicado slds
Que joyita de video
GRACIAS POR TU LABOR
Buenisiiimmo muchas muchas Gracias!
Excelente video! Ya salió otro video con las otros métodos de logeo?
Excelente video Fast!, solo que al dar refresh me manda al login, pero sigo manteniendo mi currentUser.. no se que pasa, he comparado el codigo del repo. pd, tengo mas de una ruta para componente
Hola fazt excelente video, hay videos asi pero casi nadie explica como lo haces tu, solo una preguntita jsjs se puede hacer lo mismoo con node usando express y las dependencias necesarias?
Muchas gracias por tu video!!! esta genial! tengo una duda si quiero subirlo al hosting de firebase, la carpeta que tengo que seleccionar es la de components?
Lo esperado fazt
Hola, ¿Que tal comunidad? Excelente video Fazt
Tengo una duda con respecto a las rutas protegidas. El programa te estaba lanzando un error en componente HOME porque no podia detectar la propiedad email de NULL. Entonces colocaste una ruta protegida para validar y evitar el error. Una forma en la cual yo lo solucione fue asi: if(!user) return Si el programa ve que USER es NULL lo redirecciona con el component Navigate, pero no se que tan seguro sea. ¿Cuál es tu opinion?
Genial video Fazt! Una pregunta, con que extension o de que forma se formatea el codigo para que quede bien indentado o mas legible?
En mi caso lo hago con Prettier. El atajo depende del sistema que estes usando en Windows es:
ALT + Shift + A
y en Linux es:
Ctrl + shit + I
Aunque tambien se puede personalizar :)
Genio!
que grande
el fazt
Hola, lamentablemente no entiendo porque al aplicar estilos con las diferentes formas para react no me funcionan, ayer estuve intentando con styled-components, hoy intente con tailwindcss y lo mismo, no aplica estilos, alguien sabe porque?
Algún día harás un curso de .Next ? Sería todo un éxito 🙂
Estoy elaborando uno aún, pero si esta entre mis planes publicarlo :)
man así honestamente, como sacas tanto tiempo para hacer tantos videos sobre tantas tecnologías? xD trabajas?
Master 🥶
This is amazing 🔥🔥
hola fazt en esta parte del logout
const handleLogout = () => {
logout()
}
if(loading) return cargando...
return (
{`welcome ${user.email}`}
logout
)
} tu pones async y await pero he probado que tambien se puede hacer sin async y await , estaria bien o seria mala practica ?
Como hacer para que me vuelva a pedir las credenciales del proveedor gmail, quedan mis datos guardados, gracias.
Buen vídeo
Hola, felicitaciones y muchas gracias por tu contenido.. una pregunta.. como formateas el codigo? min 41:47 lo haces manual o es alguan extension? gracias
El formateado viene por parte de Prettier, y yo lo activo manual (por preferencia personal, porque también se puede hacer que se haga cuando se guarda).
esta es la extension: prettier.io/
aqui hay un tutorial del tema: www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code-es
en mi caso yo activo el formateado con la combinación: CTRL+shift+I
@@FaztCode Listo Muchas Gracias!
1:15:15
import { useAuth } from "../context/authContext";
export function Home() {
const { user } = useAuth();
console.log(user);
return (
{user && user.email ? (
Welcome {user.email}
) : (
No user found
)}
);
}
Hola fazt, una pregunta puedes hacer un vídeo explicando cómo configurar vite para hacer una PWA en react js y en vue
Por cierto muy buen vídeo
Hola, saben como es si quiesiera enviarle aparte de email y contraseña, un parametro más?, como "ROL_ADMIN" por ejm
Hola fazt. Cómo estás? Aras en algún momento algo de nodejs con microservicios con Docker. Te animas?
hola amigo quisiera saber como puedo modificar, para que en caso de que ya estoy logueado al momento de poner la url de login no se vaya a ese formulario, porque se supone que ya estoy logueado y no deberia poder irse a esa url
el user del contexto hay que guardarlo localstorage si no con f5 se pierde, no? o firebase auth hace esto automaticamente?
Nuevo suscriptor crack, gracias por los cursos, crees que me puedas dar el nombre de tu extencion que te autocompleta el código (Intellij), please.
Hola Paico, esa extension se llama github copilot, se tiene que solicitar acceso: copilot.github.com/
Hola, muchas gracias por todo, otra pregunta, no se si ya lo hicistes o tienes algun link donde se pueda guardar los datos de conexion de firebase sin que esten en el codigo? tendras algo de eso?
Bro has un vídeo sobre tu configuración de visual en 2022 porfa. Las extensiones q usas.
Siempre lo olvido voy hacer uno para esta semana sin falta
@@FaztCode Muchas gracias genio :D
¿Saben porque a la hora de querer manejar el error en el catch de singup; no lo utiliza? Es decir no guarda el mensaje ni nada
El error es capturado en el primer try/catch que encuentre, así que puede que estés viendo el archivo equivocado, prueba viendo si el error está cuando haces la petición al backend
Creo que fue eso, pero cambie el try/catch dentro de la función tipo;
Try{
CreateUser...
}Catch(error){
//...
}
Y ahí si me funcionó
@@flyoneos8415 Podrias poner como te quedo el try/catch ? estoy trabado en eso. Gracias
try {
await createUserWithEmailAndPassword(auth, email, password)
navigate('/')
} catch (error) {
const errorMessage = error.message;
seterror(errorMessage)
}
esto va dentro del singup
@@flyoneos8415 Muchas gracias !
Hola fazt, quería saber cómo hacer para agregar un campo nombre y apellido al register y que en el current user te aparezca esa información, busque por todos lados y no encuentro una forma de hacerlo, gracias
Más de Solidity por favor! 🙏
Muchas gracias por los vídeos que has hecho sobre React y MongoDB.
Si fueras tan amable, quisiera preguntarte cómo proteger esa información sensible que se copia desde Firebase (el código que incluye las credencialess) para evitar que otras personas puedan usar tus usuarios (en este caso) o tu Firestore (en otros casos).
tenes que crear un archivo .env para que esos datos sean variables de entorno y no se puedan ver en el codigo.
@@leoneld pero en estos casos, las conexión se hace desde el cliente y las variables de entorno solo están accesibles en el servidor.
@@MarioRocafull Estoy en un proyecto ahora y lo tengo así, es todo react y el archivo config de firebase llama a las variables.
Buenas.... una consulta por alguna razon no me llegan los correos en el cambio de contraseña y registro.
si alguien puede contestar me seria de ayuda.... lo demas funciona todo bien...saludos
Gracias!!
ya conocía todo lo anterior, pero desconocia cómo enviar restablecer la contraseña
Buen dia, tenes algun video explicando como seria para enviar un mail de verificacion cuando te creas un usuario? Muchas gracias
AYUDA URGENTE!!!
al principio corrí npx run start, no me reconocía el script por lo que miré el archivo package.json, me parecía extraño que solo aparecían tres lineas de código, donde solo tenía la dependecia de npx y la versión, comparé la líneas de código de tu proyectos de los archivos package.json y package-lock.json y este ultimo me aparece solo 8000 línead de código.
busqué solución y desintalé create-react y lo volví a instalar y o sorpresa antes de instalar tailwinCSS tenía las mismas líneas de código de tu proyect, pero despues de instalar tailwinCSS OCURRIÓ EL MISMO ERROR, ya no sé que hace, no puedo ejecutar el npx run star. noo puedo hacer nadaa. AYUDAAA
se que respondo después de 2 meses, pero no es "npm run start" ?
Hola Fazt, una pregunta. En este ejemplo de Login cómo se guarda la clave en localstorage?
Hola Fazt y a todos. Estaba haciendo el inicio de sesión con Facebook agregando el id de la app y la clave secreta también la uri OAuth de redireccionamiento, cuando ejecuto la app y quiero iniciar sesión me sale un mensaje en una ventana emergente que la app esta desactivada y que se podrá iniciar sesión cuando se reactive. Sabes como solucionarlo o alguién que sepa que me ayude?
Primero
Estaria muy bien authenticacion con firebase y authorizacion con strapi todo bajo redux saga
No olvides prepararnos para el Web3 que no tardan las actuales CLI y herramientas de desarrollo en ser obsoletas
en unos 50 años pero, ya a día de hoy casi nadie está interesado en Web3
Fazt, pa cuando hablaras de Antd? 🤨
Buenas Fazt , bro de cualidad tienes alguno donde se use el link de verificacion de correo de firebase y usando zustand? un saludo!
Que te costaba poner la imagen FAST!!?!?!?!?!?!?
hola excelente video Fazt, tengo una pregunta como haces para que automaticamente cuando escribes una ruta haces que se importe automaticamente, con que extension se puede realizar eso, gracias
Para importar, eso ya lo hace VSCode por defecto. Intenta hacer esto, Escribe las primeras letas del componente, por ejemplo en el caso de Login, escribes:
Al subirlo en la web se queda con el renderizados en el cliente?
fazt hola! ¿podrías realizar un video realizando una app móvil con alguna base de datos local ? por favor!!
Buena idea voy a hacer un ejemplo de aplicaciones móviles con bases de datos como sqlite3
¿Cómo puedo pasar el código a nextjs? cuando colocaste AuthProvider se me complico.
El contexto es el mismo en react y en next, solo que en next tienes que añadir el contexto en _app.js
se puede usar el provider con stack navigation?
Sí Claro, el provider es parte de la biblioteca estandar de React, simplemente coloca tu enrutador adentro del provider y cada pantalla podra acceder al contexto
Gran titurial, me fue de gran ayuda! Pero tengo una duda. ¿Como puedo hacer para cuando hago un refresh en la página me mantenga el usuario que logueo?
En la documentación hay una sección que se llama "persistencia del estado de auth", creo que puede servirte
`useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
setCurrentUser(user)
setLoading(false)
})
return unsubscribe
}, [])`
Hola Fazt, ¿Me podrías ayudar explicándome cómo puedo hacer que la sesión se mantenga luego de hacer refresh a la página? Gracias de antemano
Según recuerdo a este ejemplo le había añadido el evento onAuthStateChange. Este evento te permite recibir el estado del usuario, si ya esta autenticado o no. con este puedes estable en true o false en el context, para seguir diciendo que el usuario tiene autorizacion o no. cuando llamas el metodo signout, este cambiara a false