Cuando utilizamos Firebase con React.js utilizamos el método onAuthStateChanged()
de Firebase en el método componentDidMount
de React, así aceleramos el render inicial de la aplicación y evitamos problemas de Server Side Rendering 😉.
Bienvenida e Introducción
Firebase para Web: Autenticación y Base de Datos
Firebase: Plataforma Integral para Desarrollar Aplicaciones Web y Móviles
Creación y gestión de un videoblog con Firebase
Consola Web de Administración
Configuración de Firebase en Proyectos Web y Móviles
Configuración de Firebase en Proyecto Web con JavaScript
Autenticación de Usuarios
Autenticación y Creación de Usuarios con Firebase
Autenticación con Firebase: Email y Google paso a paso
Autenticación de Usuarios con Firebase: Registro y Verificación de Email
Autenticación con Google usando Firebase en aplicaciones web
Implementación de Autenticación con Facebook en Firebase
Gestión de Autenticación de Usuarios con Firebase
Gestión de Usuarios en Firebase: Creación, Inhabilitación y Plantillas
Exportar e Importar Usuarios en Firebase Auth
Gestión de la Base de Datos
Firestore: Gestión y Estructura de Datos en Firebase
Comparación entre Realtime Database y Firestore de Firebase
Configuración de Firestore en un Proyecto Firebase
Inserción de documentos en Firestore con JavaScript
Consultas en Tiempo Real con Firestore para Aplicaciones Web
Consultas y Operaciones de Datos en Firestore
Reglas de Seguridad en Bases de Datos con Firestore
Creación y gestión de índices en Firestore para optimizar consultas
Almacenamiento de archivos
Almacenamiento de Archivos en Firebase: Gestión y Seguridad
Subir Imágenes a Firebase Storage desde un Blog
Reglas de Seguridad en Firebase Storage para Blogs
Hosting
Características y beneficios del hosting de Firebase
Despliegue de Aplicaciones con Firebase Hosting
Configuración Personalizada de Hosting con Firebase
Notificaciones Push
Notificaciones Push con Firebase Cloud Messaging
Implementación de Notificaciones en Blog con Firebase
Implementación de Notificaciones Push con Firebase y Firestore
Implementación de Notificaciones Push con Firebase en Blogs
Conclusiones
Integración de Firebase en Aplicaciones Web
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Firebase nos permite controlar nuestra aplicación dependiendo de los cambios en la autenticación de los usuarios con el método onAuthStateChanged()
, nuestro trabajo es añadir el código necesario para cambiar los textos de nuestra aplicación dependiendo de si el usuario esta autenticado o no.
Aportes 11
Preguntas 3
Cuando utilizamos Firebase con React.js utilizamos el método onAuthStateChanged()
de Firebase en el método componentDidMount
de React, así aceleramos el render inicial de la aplicación y evitamos problemas de Server Side Rendering 😉.
Tengo una duda no se si estoy ingresando mal a crear la App en twitter,pero creo esta cambio sus políticas y tarda mas tiempo para dar acceso a crear una nueva app.
He aqui mi commit de esta clase con mi practica con nextjs
los que siguieron mis pasos, notaran que guardar la informacion del usuario ya lo hemos manejado con el contexto de Nextjs. Sin embargo, en este commit hice algunas mejoras. Maquete y defini un layout, e hice lo mismo que el profe hice con la imagen del usuario, si esta logeado, me traigo con la informacion del contexto el photoURL del usuario accedido. Hice algunos truquitos para trabajar el auth con google y facebook desde el login y register para poder cambiar de ruta con useRouter de Nextjs. Espero que te guste…continuamos…
como se hace para saber que un usuario esta haciendo signing in por primera vez cuando la autenticación es con email y contraseña?
Lo bueno de esto es que podemos hacer muchas cosas en ese listener, no solo cambiar foto y perfil, de hecho incluso podríamos redireccionar a su perfil en caso de que manejáramos perfiles
Crear Escuchador en Firebase
¿Cómo sería para paginas que no se manejan sobre una sola pagina, es decir donde ya no hay navegación?
Es muy util esto de iniciar sesion con redes sociales, porque crear un sistema de login es bastante tedioso
general.js
$(() => {
$('.tooltipped').tooltip({ delay: 50 })
$('.modal').modal()
// TODO: Adicionar el service worker
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// firebase.analytics();
// TODO: Registrar LLave publica de messaging
// TODO: Solicitar permisos para las notificaciones
// TODO: Recibir las notificaciones cuando el usuario esta foreground
// TODO: Recibir las notificaciones cuando el usuario esta background
// TODO: Listening real time
// TODO: Firebase observador del cambio de estado
//$('#btnInicioSesion').text('Salir')
//$('#avatar').attr('src', user.photoURL)
//$('#avatar').attr('src', 'imagenes/usuario_auth.png')
//$('#btnInicioSesion').text('Iniciar Sesión')
//$('#avatar').attr('src', 'imagenes/usuario.png')
// TODO: Evento boton inicio sesion
$('#btnInicioSesion').click(() => {
iniciarSesion();
})
$('#avatar').click(() => {
const user = firebase.auth().currentUser;
if (user) {
firebase.auth().signOut()
.then(() => {
$('#avatar').attr('src', 'imagenes/usuario.png');
Materialize.toast(`SignOut correcto`, 4000);
})
.cath(error => {
console.error(error);
Materialize.toast(`Error al realizar SignOut ${error}`, 4000);
});
} else {
iniciarSesion();
}
})
$('#btnTodoPost').click(() => {
$('#tituloPost').text('Posts de la Comunidad')
})
$('#btnMisPost').click(() => {
//$('#tituloPost').text('Mis Posts')
//Materialize.toast(`Debes estar autenticado para ver tus posts`, 4000)
})
function iniciarSesion() {
const user = firebase.auth().currentUser;
if (user) {
return firebase.auth().signOut()
.then(() => {
$('#btnInicioSesion').text('Iniciar Sesión');
$('#avatar').attr('src', 'imagenes/usuario.png');
Materialize.toast(`SignOut correcto`, 4000);
})
.cath(error => {
console.error(error);
Materialize.toast(`Error al realizar SignOut ${error}`, 4000);
});
}
$('#emailSesion').val('');
$('#passwordSesion').val('');
$('#modalSesion').modal('open');
}
})
autenticacion.js
class Autenticacion {
autEmailPass(email, password) {
firebase.auth().signInWithEmailAndPassword(email, password)
.then(result => {
if (result.user.emailVerified) {
$('#btnInicioSesion').text('Salir');
$('#avatar').attr('src', 'imagenes/usuario_auth.png');
Materialize.toast(`Bienvenido ${result.user.displayName}`, 5000);
} else {
firebase.auth().signOut();
Materialize.toast(`Por favor realiza la verificacion de la cuenta ${result.user.displayName}`, 5000);
}
})
.catch(error => {
console.error(error);
Materialize.toast(error.message, 4000)
});
$('.modal').modal('close')
}
crearCuentaEmailPass(email, password, nombres) {
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(result => {
result.user.updateProfile({
displayName: nombres
});
const configuracion = {
url: 'http://localhost:3000/'
};
result.user.sendEmailVerification(configuracion);
firebase.auth().signOut();
Materialize.toast(
`Bienvenido ${nombres}, debes realizar el proceso de verificación`,
4000
);
$('.modal').modal('close');
})
.catch(error => {
console.error(error);
Materialize.toast(error.message, 4000);
});
}
authCuentaGoogle() {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then(result => {
$('#btnInicioSesion').text('Salir');
$('#avatar').attr('src', result.user.photoURL);
$('.modal').modal('close');
Materialize.toast(`Bienvenido ${result.user.displayName} !! `, 4000);
})
.catch(error => {
console.error(error);
Materialize.toast(`Error al autenticarse con google: ${error.message}`, 4000);
});
}
authCuentaFacebook() {
const provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider)
.then(result => {
$('#btnInicioSesion').text('Salir');
$('#avatar').attr('src', result.user.photoURL);
$('.modal').modal('close');
Materialize.toast(`Bienvenido ${result.user.displayName} !! `, 4000);
})
.catch(error => {
console.error(error);
Materialize.toast(`Error al autenticarse con facebook: ${error.message}`, 4000);
});
}
authCuentaTwitter() {
const provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().signInWithPopup(provider)
.then(result => {
$('#btnInicioSesion').text('Salir');
$('#avatar').attr('src', result.user.photoURL);
$('.modal').modal('close');
Materialize.toast(`Bienvenido ${result.user.displayName} !! `, 4000);
})
.catch(error => {
console.error(error);
Materialize.toast(`Error al autenticarse con twitter: ${error.message}`, 4000);
});
}
}
Al registrar una cuenta nueva sin el user haber confirma el correo, el boton cambia a salir de todas maneras, para arreglar eso solo tiene que agregar user.emailVerified/
firebase.auth().onAuthStateChanged((user) => {
console.log(user);
if (user.emailVerified) {
$("#btnInicioSesion").text("Salir");
}
});
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?