Probar creación de usuario y autenticación

Si al hacer click en el boton de iniciar sesion no les aparece el modal, es porque esta mal el id. En el authcontroller deberia verse asi el controlador del modal de inicio de sesion

 $("#btnInicioSesion").click(() => {
    $("#modalRegistro").modal("close");
    $("#modalSesion").modal("open");
  });```

Como se inicia el servicio de localhost:3000

Para aquellos que esten haciendo recien el curso y tengan problemas corriendo el comando gulp la solucion es crear un archivo llamado npm-shrinkwrap.json al mismo nivel que el archivo package.json y agregarle el siguiente contenido:

{
  "dependencies": {
    "graceful-fs": {
        "version": "4.2.2"
     }
  }
}

Una vez que guarden ejecuten de nuevo npm install y ya cuando ejecuten el comando gulp no saldran errores.

Uno de los peores cursos que he visto en Platzi, espero se actualice pronto para regresar…

no me aparece la ventana de modal para ingresar el correo electronico ??

Hay algunas cosas que no entiendo 😦 crei que el proyecto iba desde 0

Este curso es bastante difícil de seguir, está desactualizado y sigue malas prácticas. U.U

si utilizan VSCode, pueden optar por Live Server

No me aparece el botón para continuar al abrir el enlace de verificación.
En la clase se crea la constante

const configuracion = {
	url: 'http://localhost:3000/'
}

pero no se usa en ningún lado.

Se dieron cuenta que al hacer click nuevamente sobre la imagen para hacer el SignOut del usuario les sigue apareciendo que fue correcto?
Les dejo el codigo que agregue para que verifique si hay algun usuario y envie otro mensaje si no lo hubiera

<$('#avatar').click(() => {
        //$('#avatar').attr('src', 'imagenes/usuario.png')
        var user = firebase.auth().currentUser
        
        if (!user) {
            Materialize.toast('Tienes que iniciar sesion',5000)
        } else {
            firebase.auth().signOut()
            .then(() => {
                $('#avatar').attr('src', 'imagenes/usuario.png')
                Materialize.toast('SignOut correcto', 4000)
            })
            .catch(error => {
                Materialize.toast(`Error al realizar SignOut ${error}`)
            })
        }
        
    })>

ES MUY DIFICIL SEGUIR EL CURSO, SIENTO QUE SALTA COSAS Y ES FACIL PERDERSE… CASI TODOS LOS CURSOS DE PLATZI SON BUENOS, RECOMIENDO VOLVER A HACER ESTE CURSO CON OTRO PROFESOR Y DESDE CERO.

Para quienes no les haya funcionado el gulp (En mi caso probé de todo y nunca funcionó). Podrían usar la extensión “live server” y cuando estén en el archivo index.html presionar “go live” en la esquina inferior derecha del vscode.

Gente, cuando apreto el boton de registrarse, despues de llenar mis datos, no hace nada, queda la ventana modal de inicio de sesion y registro. apreto el boton, y no reacciona, Alguien sabe como ayudarme? gracias!! porque si no no puedo seeguir adelante

Pueden usar servor en caso de que no les funcione gulp

npx servor ./public index.html 3000 --browse --reload

Hay un error cuando quieres iniciar el servidor gulp

$ gulp
ReferenceError: primordials is not defined
    at fs.js:27:26
    at req_ (H:\Firebase-blogeek\blogeek-platzi-configuracionfirebasealproyecto\node_modules\natives\index.js:143:24)
    at Object.req [as require] (H:\Firebase-blogeek\blogeek-platzi-configuracionfirebasealproyecto\node_modules\natives\index.js:55:10)
    at Object.<anonymous> (H:\Firebase-blogeek\blogeek-platzi-configuracionfirebasealproyecto\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)```

Por ahora sin solución el curso es super des actualizado, al igual que los videos y ya no se ven igual al firebase actual.

Que arquitectura, framework estás utilizando en este proyecto, entiendo que es html, js pero el estilo del codigo es limpio y claro, bastante estructurado y me interesa aprenderlo 😄

Buen dia, ¿realmente es necesario tener tantos archivos de javascript?:
general.js , autenticacion.js , authController.js ¿no seria mas practico uno solo para no andar de archivo en archivo? o ¿cual es la ventaja de manejarlo asi?

Gracias por sus comentarios.

Oh, ahi es donde se valida que se haya verificado…

A mi me est’a funcionando casi todo excepto lo del mensaje de bievenida. en la consola de dice que Materialize no es una funcion pero si esta agregada en el index.html. No tebgo idea porque no me sale el mensaje de Bienvenida ni el otro cuadno cierras sesi’on. A alguien le pasa lo mismo?

Hola, lo que no me funciona es lo del cambio de avatar del usuario no encuentro porque no aparece el avatar del usuario al iniciar sección. alguna ayuda por acá les agradezco

alguien me podría ayudar me aparece el siguiente error después de que le puse la autenticación, y ya no me envía el correo de validación, gracias.

Hola!

Cuando mando a llamar user.displayName, me requesa null. Alguien sabe por que no se esta guardando bien el nombre?

firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(result => {
        result.user.updateProfile({
          diplayName : nombres
        });

Para nodejs > 12 existen errores de compatibilidad con gulp, es necesario crear un archivo con nombre “npm-shrinkwrap.json” en el mismo directorio que “package.json” el archivo debe contener el siguiente código:

{
  "dependencies": {
    "graceful-fs": {
        "version": "4.2.2"
     }
  }
}```
Una vez que lo tengan creado tendrán que volver a ejecutar el comando:

npm install

y posteriormente el comando:

gulp

Deberian de actualizar el curso, aunque no ha cambiado mucho firebase

El Profesor hace redundancia al programar, escribe repetidamente la sentencia de firebase para hacer Log Out, supongo para que se entienda cual es la sentencia de firebase para hacer log out pero lo más correcto sería tener su respectivo método ‘this.logOut()’ en la clase Auth, recodermos que la reutilización y centralización de código fomenta la buena lectura de código y previene errores.

Hola! Alguien sabe como crear diferentes autenticaciones para diferentes usuarios. Por ejemplo, si tengo a usuarios que son admin de la pagina, y otras personas que solo van a ser consumidores de la pagina, como podriamos hacer eso?

Creo que este curso se debe redefinir. Estoy de acuerdo con el aprendizaje en comunidad y todo eso, pero hay muchas cosas que no explica y uno queda completamente perdido

La version de nodeJS actual no es compatible con gulp. Recominedo para seguir el curso utilizar live-server y seguir la documentacion directo de la pagina de firebase ya que el curso esta un poco desactualizado a la fecha.

Una preguntilla, estoy haciendo este código en React, como puedo cambiar la imagen del avatar ya que utilizando componentes no puedo llamar mediante un document.getElementById(‘avatar’) usando javascript, este es mi código para hacer el SignIn

 onSubmit = event =>{
        const {email, password} = this.state;
        var avatar = document.getElementById('avatar')
        this.props.firebase
            .doSignInWithEmailAndPassword(email, password)
            .then((authUser)=>{
                if(authUser.user.emailVerified){
                    this.setState({ ...INITIAL_STATE });
                    this.props.history.push(ROUTES.HOME);
                    alert('Bienvenido a Weygo')
                    avatar.attr('src', './weygo/imagenes/others/carrito.PNG')
                }else{
                    this.props.firebase.doSignOut();
                    alert('Por favor realiza el proceso de verificación de la cuenta')
                    this.props.history.push(ROUTES.HOME);
                }
            })
            .catch(error => {
                this.setState({error});
            });
        event.preventDefault();
    };

Nota: el SignIn lo realiza correctamente con este código, lo único que no puedo hacer es cambiar la imagen del avatar, puesto que tengo la imagen puesta en otro componente llamado Header, mi pregunta sería como puedo cambiar el atributo src de <img id=‘avatar’ src ="./weygo/imagenes/users/usuario.png" /> ya que con document.getElementById desde el componente SignIn no funciona 😦

Haganle caso a las personas que recomiendan instalar el Live Server de VSCode (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).

Hay múltiples problemas con la versión de Gulp que se usa en el proyecto y versiones modernas de NodeJS.

No se puede cambiar el contenido que está en la plantilla pero si el idioma, hay una casilla de selección multiple en el lado izquierdo inferior:

Yo lo hice con React.

import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Checkbox, message } from 'antd';
import * as firebase from 'firebase/app';
import { firebaseConfig } from '@/util/config';
import 'firebase/auth';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 24 },
};
const tailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 24 },
};
const Login = () => {
  const [emailAuth, setEmailAuth] = useState(null);
  useEffect(() => {
    firebase.initializeApp(firebaseConfig);
  }, []);

  const onFinish = async (values) => {
    const { email, password } = values;
    try {
      const $login = await firebase.auth().signInWithEmailAndPassword(email, password);
      if ($login.user.emailVerified) {
        message.success('Bienvenid@ vendeta.com');
        setEmailAuth(email);
      } else {
        message.error('Por favor, verifica tu cuenta para iniciar sesión');
        firebase.auth().signOut();
      }
    } catch (error) {
      // message.error(error.message);
      await handleOnCreateAcount(email, password);
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const handleOnCreateAcount = async (email, password) => {
    try {
      const $create = await firebase.auth().createUserWithEmailAndPassword(email, password);
      const configuration = { url: 'http://localhost:3000' };
      $create.user.sendEmailVerification(configuration).catch((error) => {
        message.error(error.message);
      });
      firebase.auth().signOut();
      message.success(`Verifica tu cuenta para iniciar sesión, se te envio un correo a: ${email}`);
    } catch (error) {
      message.error(error.message);
    }
  };

  return (
    <div className="gx-login-container">
      <div className="gx-item-login-container">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa, labore molestias id vitae doloribus porro assumenda nulla a iste
        vero quod molestiae adipisci, quo maxime alias minima quam rerum omnis?
      </div>
      <div className="gx-item-login-container">
        {emailAuth}
        <Form
          {...layout}
          name="basic"
          hideRequiredMark
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          layout="vertical"
        >
          <Form.Item label="E-Mail" name="email" rules={[{ required: true, message: 'Please input your E-Mail!', type: 'email' }]}>
            <Input />
          </Form.Item>

          <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
            <Input.Password />
          </Form.Item>

          <Form.Item {...tailLayout} name="remember" valuePropName="checked">
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit" block>
              Login
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;

una consulta para probar firebase lo tengo que hacer en un servidor web, es correcto eso ?

Parceros, si le mama mucho gallo esa vuelta y usan Yarn como en mi caso, solo haga

yarn browser-sync ./public

y listo

por que al hacer al boton de enter no se envia la informacion? Deberia manejar el form en vez del boton?

Perfecto, tuve un par de problemas con gulp pero lo pude resolver, creo que actualmente son muy pocas las cosas que se pueden modificar en la plantilla de email que da firebase:(

error “code”: “auth/wrong-password”,
“message”: “The password is invalid or the user does not have a password.”

No me funcionan los botones de iniciar sesion y registrarse ! xq puede ser? gracias urgente!

No hay forma de por lo menos mostrar el mensaje de verificación en español?

Nice

No me anda el botón de Iniciar Sesión, apreto y no hace nada. Seguí la clase tal cual…

En el minuto 12.40 dice que no se puede modificar el contenido del correo de verificación, pero debajo de verificación de sms en la carpeta de plantillas uno puede seleccionar el idioma.! !

puedes compartir el proyecto que tienes hasta donde has avanzado porfa?

No me envia el email de verificación, aunque si guarda el user en la consola, que podra ser?

Me aparecio el mensaje de bienvenida, ademas el usuario quedo creado en la consola, solo que despues del mensaje de bienvenidad me salio el error:

auth/internal-error
autenticacion.js:27 {"error":{"code":500,"message":"Internal error encountered.","errors":[{"message":"Internal error encountered.","domain":"global","reason":"backendError"}],"status":"INTERNAL"}}```

en la url yo coloque mi ruta en el disco duro, no se si sea eso

por casualidad eres familia de Christian…?

exelente

como se sabe si el usuario o la contraseña es incorrecta?
se captura con .catch()? y si es asi… es el único error que devuelve la promesa de signInWithEmailAndPassword()?

No me aparece el modal para ingresar el correo electrónico 😦

Una pregunta , no me deja correr el programa por este error alguien sabe porque es ?

assert.js:385
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\Atiempo\Downloads\LAURA SARITA\blogeek-platzi-configuracionfirebasealproyecto\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\Users\Atiempo\Downloads\LAURA SARITA\blogeek-platzi-configuracionfirebasealproyecto\node_modules\undertaker\lib\task.js:13:8)
at Object.<anonymous> (C:\Users\Atiempo\Downloads\LAURA SARITA\blogeek-platzi-configuracionfirebasealproyecto\gulpfile.js:33:6)
at Module._compile (internal/modules/cjs/loader.js:1133:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1153:10)
at Module.load (internal/modules/cjs/loader.js:977:32)
at Function.Module._load (internal/modules/cjs/loader.js:877:14)
at Module.require (internal/modules/cjs/loader.js:1019:19)
at require (internal/modules/cjs/helpers.js:77:18)
at execute (C:\Users\Atiempo\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned^4.0.0\index.js:36:18)
at Liftoff.handleArguments (C:\Users\Atiempo\AppData\Roaming\npm\node_modules\gulp-cli\index.js:201:24)
at Liftoff.execute (C:\Users\Atiempo\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:201:12)
at module.exports (C:\Users\Atiempo\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\flagged-respawn\index.js:51:3)
at Liftoff.<anonymous> (C:\Users\Atiempo\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:191:5)
at C:\Users\Atiempo\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:149:9
at C:\Users\Atiempo\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\v8flags\index.js:138:14 {
generatedMessage: false,
code: ‘ERR_ASSERTION’,
actual: false,
expected: true,
operator: ‘==’
}

A los que al hacer ‘click’ en el boton de iniciar sesion, no les aparece el modal, me podrian decir como lo solucionaron?

Oigan no sé por qué no entra en el else
![](

Sí están trabajando con VSCODE hay una extensión que genera un servidor local cuando se trabaja un proyecto solo con HTML, CSS, javascript (sin uso de un framework como es este caso). les puede ayudar a los que tienen problemas con arrancar gulp. La extensión se llama “Live Server”

Hola, tengo un error en mi código que no he podido solucionar: “Cannot find the firebase namespace; be sure to include firebase-app.js before this library”. Este es el repositorio de mi proyecto: https://github.com/wilmarFlorez/firebaseBlogGeek.

Si tienes problemas para levantar el servidor en el puerto 3000 con gulp puedes instalar express con el siguiente comando:

npm i express

y en la raiz del proyecto ( a la misma altura que el package.json ) crear un archivo llamado app.js con el siguiente contenido:

const express = require('express');
const app = express();
app.listen(3000);
app.use('/',express.static('public/'));

luego levantar el servidor con el comando

node app.js

Solamente cuando haces una actualización en el código html o js debes actualizar la pagina del navegador.

Como hago para guardar mas información al momento de registrar un usuario con email y password?

Malísimo este curso en comparación a otros este deja mucho que desear muchachos ojalá lo actualicen pronto

Para los que tienen yarn y no les funciona el tal gulp, instalen live server con

$ yarn add live-server

luego en el archivo package.json en la parte de script colocamos

"script" : {
	"test" : "no test",
	"start" : "live-server"
}

para iniciar el server colocamos en la terminal

yarn start ./public

y listo

También habría que actualizar la variable configuración en autetication.js