Firebase Login: Iniciar sesión con Google

En este artículo vamos a aprender cómo implementar un sistema de inicio de sesión con Google utilizando Firebase y React en español.

Requisitos previos

• Tener una cuenta de Firebase
• Crear un proyecto en Firebase
• Instalar React en tu proyecto

Implementación

Para empezar, vamos a instalar las dependencias necesarias en nuestro proyecto de React:

npm install firebase react-firebaseui

A continuación, creamos un componente de inicio de sesión que utilizará Firebase para autenticar a los usuarios:

import React from 'react';
import firebase from 'firebase';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

const firebaseConfig = {
  apiKey: "tu-api-key",
  authDomain: "tu-auth-domain",
  projectId: "tu-project-id",
  storageBucket: "tu-storage-bucket",
  messagingSenderId: "tu-messaging-sender-id",
  appId: "tu-app-id"
};

firebase.initializeApp(firebaseConfig);

const Login = () => {
  const uiConfig = {
    signInFlow: 'popup',
    signInSuccessUrl: '/',
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID
    ]
  };

  return (
    <div>
      <h2>Iniciar sesión con Google</h2>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
    </div>
  );
};

export default Login;

Ahora solo necesitas añadir el componente de inicio de sesión en tu aplicación de React y ya podrás permitir a los usuarios iniciar sesión con su cuenta de Google.

¡Espero que este artículo te haya sido de ayuda! Si tienes alguna pregunta, no dudes en dejar un comentario.