Tutorial Electron: Identificando usuarios y creando vista de login

Bienvenidos a otro artículo del tutorial de Electron. En la ocasión anterior estuvimos viendo como añadir la funcionalidad de imágenes a nuestra aplicación y tras ello, hicimos una parada para ver una introducción a Firebase Auth. En ella repasamos los métodos más importantes e incluso algunos de los que vamos a tratar en esta ocasión así como un pequeño adelanto de lo que vamos a ver en este paso.

En este artículo nos vamos a dedicar a ver la parte práctica de Firebase Auth, pues como hablamos al final del punto anterior, vamos a implementar la autenticación en OpenChat gracias a este servicio.

Si recuerdas, decidimos establecer el sistema de usuario y contraseña pues es el más fácil de implementar en Electron al no requerir de ventanas emergentes o redirecciones ya que nos limitamos a obtener los datos(usuario/contraseña, datos registro) y se lo mandamos a Firebase de una manera muy plana e intuitiva.

Paso 1: Adaptar el componente App para trabajar con autenticación

Antes de implementar toda la lógica de autenticación, deberemos de adaptar componentes con los que ya estamos trabajando para que al añadir el componente de autenticación en el siguiente paso nos sea más fácil.

En el archivo de entrada de React, se encuenrta el componente App al que le vamos a definir en el estado un espacio para almacenar el objeto de usuario:

constructor(props) {
    super(props)
    this.state = {
        user: null
    }

    this.setUser = this.setUser.bind(this)
}

Como es evidente y has podido deducir en esta pequeña pieza de código, en el componente vamos a crear un nuevo método llamado setUser que se encargue de modificar el estado aplicando el objeto que le viene por parámetro. Si estás familiarizado con Reactno te será necesario ni verlo aunque yo te lo proporciono:

setUser(user) {
    this.setState({ user })
}

Finalmente, antes de proceder a crear nuestra vista de autenticación y el componente asociado a la misma, deberemos de realizar algunas modificaciones al método render() de nuestro componente, para, poder desplegar nuestra futura vista de autenticación cuando no haya ningún usuario en el estado que acabamos de establecer:

render() {
    if(this.state.user == null) {
        return(
            <div className="react">
                <AuthView setUser={this.setUser}/> // Hay que importarlo al principio del archivo una ver lo creemos.
            </div>
        )
    } else {
        return(
            <div className="react">
                <MessagesBox />
                <SendBox />
            </div>
        )
    }
}

Paso 2: Creación del componente AuthView y la lógica de autenticación

Como recordarás en la estructura que vimos en el artículo de introducción, para crear este nuevo componente que simbolizará tanto la lógica como la vista de la autenticación, deberemos de añadir un archivo a la carpeta components/.

El archivo incluirá la configuración inicial de Firebase, ya que deberemos de instalar e instanciar el módulo de Firebase para trabajar desde el Front. Si recuerdas no lo habíamos hecho hasta ahora pues el resto de procesos relacionados con Firebase lo hemos llevado a cabo desde Electron. Recuerda que puedes instalar el módulo usando:

$ npm i --save firebase

Y, gracias a el objeto con los datos de configuración que encontramos en el panel de administración, inicializar el módulo de Firebase, lo cual lo haremos mediante el método del ciclo de vida del componente llamado componentDidMount():

import React from 'react'
import firebase from 'firebase'

const config = {
    apiKey: 'AIzaSyBkcMbFekdtvPm7JUELHDYHTfP1mQenRLE',
    authDomain: 'openchat17.firebaseapp.com',
    databaseURL: 'https://openchat17.firebaseio.com',
    projectId: 'openchat17',
    storageBucket: 'openchat17.appspot.com',
    messagingSenderId: '491849616261'
  }

class AuthView extends React.Component {
     [...]
   componentDidMount() {
      firebase.initializeApp(config)
   }
   [...]
}

Básicamente, la vista será un formulario para que el usuario pueda ingresar su usuario y contraseña, todo esto en el método render() como bien sabes:

render() {
    return(
        <div className='Auth'>
            <label>Dirección de email
                <input type="text" placeholder="alumno@openwebinars.net" className="the_email" />
            </label>
            <label>Contraseña
                <input type="password" aria-describedby="@elmejoralumn#89" className="the_pass" />
            </label>
            <button className='button expanded hollow secondary' onClick={this.logUser}>Iniciar sesión con usuario y contraseña</button>
        </div>
    )
}

Para recopilar toda esta información y enviarla a Firebase usando los correspondientes métodos usaremos el método logUser():

logUser() {
    const email = document.getElementsByClassName('the_email')[0].value
    const pass = document.getElementsByClassName('the_pass')[0].value

    firebase.auth().signInWithEmailAndPassword(email, pass)
        .then(result => this.props.setUser(result.toJSON()))
        .catch(err => console.log(err.code))
}

Si te fijas en la promesa que envía la información a Firebase, llamamos al método que creamos en el paso anterior pues al llamar a este componente hemos pasado dicho método por las props.

Paso 3: Adaptación del sistema de mensajes para escribir el autor real de los mensajes

Antes de finalizar con el proceso de autenticación deberemos de hacer algunas modificaciones en el objeto de mensaje tal como hicimos cuando empezamos a trabajar con imágenes, esta vez para no enviar una imagen de usuario y un nombre estático pues ya podemos empezar a diferenciarlos.

Nos posicionamos en el componente SendBox e importamos el módulo de Firebase. Modificaremos el método sendMessage() para obtener el usuario y pasárselo a las propiedades userURL y userName, tal que así:

sendMessage() {
    const user = firebase.auth().currentUser
    const messageObject = {
        message: 
        {
            type: 'text',
            value: document.getElementById('send-message').value
        },
        userURL: user.photoURL,
        userName: user.displayName
    }

    ipcRenderer.send('newMessage', messageObject)
}

Conclusiones

Hemos conseguido establecer un sistema simple de autenticación con usuario/contraseña que nos permitirá identificar quien es el autor de todos y cada uno de los mensajes que el usuario envíe, pudiendo establecer así una comunicación fluida entre la totalidad de los usuarios.

Si estás siguiendo paso a paso el desarrollo de la aplicación, al haber establecido nosotros un sistema muy simple que no incluye cosas como registro de usuarios y cerrar sesión para poder entrar deberás crear tú un usuario manualmente, desde el panel de administración de Firebase. Desde allí usando el botón “Añadir usuario” podrás crearlo sin problemas, es un proceso muy sencillo.

Si lo deseas, puedes ir añadiendo las distintas funcionalidades que heredan del proceso de autenticación, como te he comentado en diversas ocasiones la aplicación es muy versátil, por tanto podemos añadirle tantas funciones como queramos.

Recuerda que si durante el proceso de aprendizaje te surgió alguna duda sólo tienes que dejarla en los comentarios.