En este tutorial implementaremos el Servicio de Autenticación de Firebase, con el proveedor de Google y como podemos integrarlo con React.js.
Pero antes…
<h2>Un poco de contexto, ¿Que es Firebase?</h2>Firebase es un SaaS (Software as a Service) de Google que provee muchos Servicios de Backend, entre ellos podemos nombrar el servicio de autenticación, base de datos en tiempo real, de almacenamiento de archivos, push notifications, cloud functions, entre otros.
En este tutorial nos centraremos en el Servicio de Autenticación, que puede ser implementado con diferentes proveedores, entre ellos Google, Facebook, Twitter, Github, etc. y como integrarlo con React.js.
<h2>Antes de comenzar</h2>El setup del proyecto que usaremos será el mismo que el del proyecto del Curso de React.js, por lo tanto, si completaste el curso, ya tienes desde donde comenzar.
Antes de ir al codigo debemos instalar la dependencia de Firebase como dependencia del proyecto en npm (Node Package Manager).
npm install --save firebase
<h3>Lo primero que debemos hacer es agregar dos nuevos archivos:</h3>
- El archivo social.html en la raiz del proyecto, que sera donde se mostrara todo el contenido de este tutorial
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Login Social Firebase</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: lightgray;
font-family: Arial;
padding-top: 20px;
}
h1 {
display: flex;
justify-content: center;
background: black;
color: white;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<h1>Login Social con diferentes proveedores</h1>
<div id="social"></div>
<script src="http://localhost:9000/js/social-login.js"></script>
</body>
</html>
- El archivo de Javascript social-login.js en la carpeta entries, que servira como entrada en el archivo de configuracion de webpack y que a partir de él se renderizaran todos los componentes de la aplicación.
import React from 'react'
import { render } from 'react-dom'
import SocialButtons from '@/social-login/containers'
const $socialContainer = document.getElementById('social')
render(<SocialButtons />, $socialContainer)
- En el archivo de configuracion de webpack (webpack.dev.config.js) debemos realizar una modificación en el key entry, quedando asi al final:
entry: {
"home": path.resolve(__dirname, 'src/entries/home.js'),
"social-login": path.resolve(__dirname, 'src/entries/social-login.js'),
}
- Y otra modificación al mismo archivo para agregarle un alias a la carpeta src/, que nos permitira trabajar mas facil con las rutas de los archivos.
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
- Ingresa al siguiente link: Firebase y haz click en “Añadir proyecto”.
- Agregar un nombre y la region del proyecto.
- Luego, en la pagina principal del proyecto, debes ver algo como lo siguiente:
- Haz click en “Añade Firebase a tu aplicación web”, y copia el contenido del objeto config de configuracion de firebase:
- Crea un archivo nuevo en la carpeta utils (no existe hasta el momento, hay que crearla en la raiz del proyecto), llamado firebase-config.js con el siguiente codigo:
import firebase from 'firebase'
// Inicializar Firebase
const config = {
// Aqui pega el codigo copiado luego de crear el proyecto en Firebase
}
const app = firebase.initializeApp(config);
export default app
- Por ultimo, pega el codigo copiado luego de crear el proyecto en Firebase, como contenido del objeto config.
Curso de React.js 2017
