React Native, Auth0 & Firebase, Tutorial (6/8) — Agregando autenticación con Auth0.

Published in

NodersJS

5 min readJul 5, 2016

En el capitulo anterior ya implementamos un login… bueno, realmente no, lo que hicimos fue crear un formulario con una validación bastante insegura.
Pero no se preocupen, recuerdan que algunos capítulos atrás hablamos sobre Auth0? En este post revisaremos como implementarlo en nuestra app, y así cambiar nuestra implementación anterior por el servicio de autenticación que ofrece Auth0.

Vuelta a la terminal →npm install.

Implementar el sistema de autenticación de Auth0, (AKA: Lock) solía ser un poco engorroso (Era necesario instalar paquetes de npm, mover algunas carpetas, modificar tus proyectos iOS y Android, trabajar con cocoapods en el caso de iOS, etc). Pero eso es cosa del pasado, la version actual de react-native-lock soluciona muchos de esos problemas.

Vamos a instalar y guardar el paquete de NPM (Mantenido por Auth0), que nos permitirá hacer uso de sus servicios, con el siguiente comando:

npm install —-save react-native-lock

Tadaaaah! Tan simple como eso.

Eso si, ahora nos topamos con otro problema. Si bien nuestro paquete de NPM está correctamente instalado, aun no está “linkeado” a nuestros proyectos de iOS o Android.

Introducing RNPM

Antiguamente eso lo solucionábamos usando cocoapods manualmente, y modificando parte del proyecto de iOS (o Android), pero desde hace un tiempo existe el proyecto React Native Package Manager (RNPM) que nos facilita los procesos engorrosos de Instalación y configuración de las dependencias de tus proyectos, en palabras textuales del README.MD:

Unfortunately, the process of adding native dependencies to React Native projects is far from perfect and our aim is to make it fun again.

Instalamos RNPM de manera global con:

npm install -g rnpm

Y procedemos a “linkear” correctamente nuestras dependencias de React Native con:

rnpm link react-native-lock

El proceso debiese verse algo así… con nombres distintos de proyecto, claro está.

En este punto, ya tenemos instalado (npm) y linkeado (rnpm) nuestro sistema de autenticación, ahora solo necesitamos configurar un par de cosas para poder hacer uso de el.

Configurando auth0-lock

Cerrar tu proyecto de Xcode, y abrir el archivo “ios/reactnativeauth0tutorial.xcworkspace”. Si te fijas, antes usabamos el archivo “ios/reactnativeauth0tutorial.xcodeproj”, ese archivo o proyecto, no contiene las referencias correctas a los archivos instalados (con rnpm o cocoapods) por lo que ya no funcionará correctamente.
Dentro del proyecto, selecciona el proyecto, y dentro de sus Build Settings busca el elemento “Other Linker Flags” y cambia el valor “-ObjC” por “$(inherited)”
(Sin comillas)
Asegúrate que tengas exactamente la version 15.0.2 de React. Puedes asegurarte desinstalando la versión actual y forzando la 15.0.2 con el siguiente comando:

npm uninstall react && npm install react@15.0.2

Una ves tengas realizado estos pasos, corre tu proyecto de iOS (Recuerda, desde: ios/reactnativeauth0tutorial.xcworkspace).

Authentication made easy — Haciendo funcionar lock

Ok, Lock ya está instalado, linkeado y configurado, ahora vamos a utilizarlo en nuestra app, abre tu componente Login. (Components/login.js) y bajo los componentes que importamos desde ‘react-native’, importa e inicializa react-native-lock de la siguiente manera.

...
} from 'react-native'
import Auth0Lock from ‘react-native-lock’;
let lock = new Auth0Lock({
   clientId: "CLIENT_ID", 
   domain: "DOMAIN"
});

Wow, Un minuto!… que es eso de CLIENT_ID y DOMAIN?

Ah, lo olvidé, creo haberlo mencionado antes, sino, aquí va:

Auth0 es un servicio genial, te permite externalizar la lógica de autenticación y usuarios de tu aplicación/servicio para enfocarte netamente en el desarrollo de las funcionalidades importantes.

Si bien tienen planes pagados, la version gratuita es más que suficiente para desarrollar una aplicación pequeña, o un MVP. (Por otro lado… 12 USD por 1000 usuarios activos, me parece de lo más razonable :) )

Entonces, para usar los servicios de Auth0 tenemos que tener una cuenta, desde la cual obtendremos las credenciales (CLIENT_ID y DOMAIN) para usar los servicios.

Dirígete al siguiente link y crea tu cuenta (https://manage.auth0.com/login) , una vez dentro de tu dashboard, crea una aplicación nueva:

Y luego en el dashboard de la aplicación, dentro de la pestaña settings podrás ver tu CLIENT_ID y DOMAIN. Ahora reemplázalas, en tu código.

let lock = new Auth0Lock({
   clientId: "OobSfQMVz5amp70yU8V2iJXPoOTKdxGy", 
   domain: "fforres.auth0.com"
});

Vamos a cambiar un poco la visualización de tu componente, ya no será un pequeño formulario, sino un botón, el que llamará a una pantalla que nos entrega ‘react-native-lock’ para poder registrarnos/loguearnos etc.

Cambia lo que retorna de la función render de tu componente por lo siguiente:

<View style={styles.container}>
    <TouchableHighlight
      onPress={this.login}
    >
    <Text>
      Ingresa a la app!
    </Text>
  </TouchableHighlight>
</View>

Ahora nuestro componente “TouchableHighlight” esta llamando a una función distinta, la cual no tenemos creada aún, esta función lo que hará es llamar a un pequeño modal que proviene del paquete “react-native-lock”, con ciertas configuraciones que nosotros decidamos.

En tu componente Login, bajo el método getInitialState, crea el siguiente método

login: function(){
  lock.show({
    closable: true
  }, (err, profile, token) => {
    if (!err) {
      alert(“bienvenido: “ + profile.nickname)
      this.props.navigator.push({name:’Dashboard’, index:1});
    }
  });
},

Esta función es la que ejecuta nuestro componente “TouchableHighligh” cuando es presionado, y lo que hace es llamar al “modal” con ciertos parámetros, en este caso solamente “closable:true”, y un callback, que será el que se ejecute una ves el usuario se loguee o registre.

(El código fuente del react-native-lock está en github, por si quieres aprender más sobre react-native-lock, como configurarlo, o algunas otras integraciones de Auth0, puedes revisar el siguiente link: https://github.com/auth0/react-native-lock#api)

Antes que continuemos, una pequeña aclaración:
Al momento de realizar estos posts/tutorial, NO estoy trabajando para auth0, ni me pagan por hacer este tutorial, ni nada por el estilo, solo me gusta mucho el servicio que ofrecen. :-)

La prueba de Fuego.

Ya tenemos casi listo nuestra implementación de auth0, solo nos falta la parte más importante, verlo funcionar.

Si lo cerraste, corre nuevamente tu proyecto de iOS (Recuerda, desde ios/reactnativeauth0tutorial.xcworkspace) y deberías ver algo como esto:

registro, login, y cuenta inexistente.

Con esto termina esta parte 6 de este tutorial, ya vimos componentes, carpetas, y tenemos nuestro sistema de autenticación implementado!
En los siguientes capítulos crearemos un perfil de usuario, y veremos como debuguear nuestra aplicación de React Native!

Si tienes cualquier otra duda o consulta, recuerda que siempre puedes hacer preguntas en los comentarios, o en nuestro slack de Noders.

Si aun no tienes acceso, puedes pedir tu invitación acá https://fforres.typeform.com/to/z2Rj7z

Nos vemos en el capítulo 7!

Capítulo 1 – Introducción

Capítulo 2 – Configurando el entorno

Capítulo 3 – Componente Login

Capítulo 4 – Carpetas y nuevos componentes