Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Crear un sistema de autenticación personalizado puede ser una tarea abrumadora. Requiere una comprensión profunda de los protocolos de autenticación y los procesos de autenticación y autorización de usuarios. Sin embargo, al integrar una herramienta como Supabase, puede concentrarse más en construir la lógica central de su aplicación.

Supabase es una alternativa de Firebase de código abierto que proporciona una plataforma de desarrollo basada en la nube. Ofrece una gama de servicios de back-end, como una base de datos Postgres completa, un servicio de autenticación y funcionalidades sin servidor.

Está diseñado para ser más accesible, lo que le permite configurar proyectos rápidamente. Siga para aprender cómo integrar el servicio de autenticación en sus aplicaciones React.js.

Crear un nuevo proyecto en Supabase Developer Console

Para crear un nuevo proyecto en Supabase Developer Console, siga estos pasos:

instagram viewer
  1. Regístrese para un Supabase cuenta de desarrollador. Navegue hasta el tablero y cree un nuevo proyecto.
  2. Complete el nombre del proyecto y una contraseña (esto es opcional para este tutorial pero se recomienda al configurar una base de datos), seleccione la región y finalmente haga clic en Crear nuevo proyecto.
  3. En Configuración de API, copie el proyecto URL y el anónimo público llave.

Configurar un proveedor de autenticación

Un proveedor de autenticación proporciona una forma segura para que los usuarios se autentiquen utilizando varios inicios de sesión sociales. Supabase por defecto proporciona un proveedor de correo electrónico. Además, puede agregar otros proveedores como Google, GitHub o Discord según sus preferencias.

Este tutorial demostrará cómo configurar un proveedor de Google. Para hacerlo, sigue estos pasos:

  1. En el panel izquierdo, seleccione el Autenticación pestaña.
  2. En la página de configuración de autenticación, seleccione el Proveedores opción y, por último, seleccione la opción Proveedor de Google de la lista de proveedores. Tenga en cuenta que el proveedor de correo electrónico ya está configurado de forma predeterminada. No es necesario realizar ninguna configuración.
  3. Habilitar el Proveedor botón de activación.
  4. El proveedor de Google requiere dos entradas: un ClientID y un ClientSecret. Obtendrá estos dos valores después de crear una aplicación en Google Developer Console. Por ahora, copia el Redireccionar URL. Lo usará para configurar una aplicación en Google Developer Console para obtener ClientID y ClientSecret.

Configura tu proyecto en Google Developer Console (GDC)

Para autenticarse con Google, deberá registrar su aplicación en Google Developer Console (GDC) y obtener un ClientID y ClientSecret. Siga estos pasos para configurar un proyecto en GDC:

  1. Ir a Consola para desarrolladores de Google e inicie sesión con su cuenta de Google para acceder a la consola.
  2. Una vez que haya iniciado sesión, navegue hasta el API y servicios pestaña, elija la Crear credenciales opción y luego seleccione ID de cliente de OAuth.
  3. Especifique el tipo de aplicación de las opciones proporcionadas y luego complete el nombre de su aplicación.
  4. Luego, especifique la URL de la ruta principal de su aplicación (http://:localhost: 3000) y, por último, especifique la URL de redirección de devolución de llamada. Pegue la URL de redirección que copió de la página de configuración del proveedor de Supabase Google. Haga clic en Ahorrar para completar el proceso.
  5. Copia el Identificación del cliente y secreto del cliente y regrese a su tablero de Supabase Project y péguelos en los campos de entrada ClientID y ClientSecret en la página de configuración del proveedor de Google. Hacer clic Ahorrar para habilitar el proveedor.

Configurar el servicio de autenticación de Supabase en una aplicación React.js

Crear una aplicación React.jsy luego abra la carpeta del proyecto en su editor de código favorito. A continuación, en el directorio raíz de la carpeta de su proyecto, cree un archivo ENV para contener sus variables de entorno: la URL de su proyecto y su clave anónima pública. Dirígete a la página de configuración de Supabase, abre la sección API y copia la URL del proyecto y la clave anónima pública.

REACT_APP_SUPABASE_URL= URL del proyecto
REACT_APP_SUPABASE_API_KEY = público clave anónima

1. Instale los paquetes necesarios

Ejecute este comando en su terminal para instalar las dependencias requeridas:

instalar npm @supabase/auth-ui-react @supabase/supabase-js reaccionar reaccionar-enrutador-dom

2. Crear la página de inicio de sesión y los componentes de la página de éxito

Cree una nueva carpeta en el directorio /src de su aplicación React.js y asígnele el nombre de páginas. Dentro de esta carpeta, cree dos archivos: Login.js y Success.js.

3. Componente de página de inicio de sesión

Este componente generará una función de registro e inicio de sesión, utilizando la interfaz de usuario de autenticación de React.js proporcionada por Supabase. Importó la interfaz de usuario de autenticación como una dependencia (@supabase/auth-UI-react), lo que simplifica la implementación de la funcionalidad de autenticación.

En el archivo login.js, agregue el siguiente código:

importar Reaccionar de'reaccionar';
importar {crear cliente} de'@supabase/supabase-js';
importar {Autenticación, ThemeSupa} de'@supabase/auth-ui-reaccionar';
importar {usarNavegar} de'reaccionar-enrutador-dom';
constante supabase = createClient(
proceso.env.REACT_APP_SUPABASE_URL,
proceso.env.REACT_APP_SUPABASE_API_KEY
); 
funciónAcceso() {
constante navegar = usarNavegar(); 
 supabase.auth.onAuthStateChange(asíncrono (evento) =>{
si (evento !== "CERRÓ SESIÓN") {
 navegar('/éxito');
 }demás{
 navegar('/');
 }
 })
devolver (
<divisiónnombre de la clase="Aplicación">
<encabezamientonombre de la clase="Encabezado de la aplicación">
 supabaseClient={supabase}
 apariencia={{tema: ThemeSupa}}
 tema="oscuro"
 proveedores={['Google']}
 /> 
encabezamiento>
división>
 );
}
exportarpor defecto Acceso;

Vamos a desglosarlo:

  • Inicialice un cliente de Supabase con las variables de entorno: la URL de su proyecto y su clave anónima pública en el archivo ENV.
  • Configure un detector de eventos para realizar un seguimiento de los cambios en el estado de autenticación utilizando el método supabase.auth.onAuthStateChange(), es decir, si el el estado de autenticación no es "SIGNED_OUT", entonces el usuario navega a la página '/success'; de lo contrario, el usuario navega a '/' (inicio/inicio de sesión) página.
  • Utilizará el método de navegación del enlace useNavigate para administrar este proceso.
  • Finalmente, devuelva un div que contenga el componente de interfaz de usuario React Auth de la biblioteca Supabase con una apariencia de themeSupa (proporcionado por Supabase), tema oscuro y proveedor de Google establecido como propiedades.

4. Componente de página de éxito

Este componente generará una página de éxito con los detalles del usuario después de que un usuario se haya autenticado correctamente y un botón de cierre de sesión.

En el archivo Success.js, agregue el siguiente código:

importar Reaccionar de'reaccionar';
importar {crear cliente} de'@supabase/supabase-js';
importar {usarNavegar} de'reaccionar-enrutador-dom';
importar {usarEfecto, usarEstado} de'reaccionar';
constante supabase = createClient(
proceso.env.REACT_APP_SUPABASE_URL,
proceso.env.REACT_APP_SUPABASE_API_KEY
); 
funciónÉxito() {
constante [usuario, establecerUsuario] = usarEstado([]); 
constante navegar = usarNavegar(); 
 usarEfecto (() => {
asíncronofunciónobtener datos de usuario(){
esperar supabase.auth.getUser().then((valor) => {
si(valor.datos?.usuario) {
establecerUsuario(valor.datos.usuario)} 
 }) }
 obtenerDatosUsuario();
 },[]);
constante avatar = usuario?.user_metadata?.avatar_url; 
constante nombre de usuario = usuario?.user_metadata?.full_Name; 
asíncronofunciónsignOutUser(){
esperarsupabase.auth.desconectar();
 navegar('/');
 };
devolver (
<divisiónnombre de la clase="Aplicación">
<encabezamientonombre de la clase="Encabezado de la aplicación">
<h1>Inicio de sesión correctoh1>
<h2>{nombre de usuario}h2>
<imagenorigen={avatar} />
<botónal hacer clic={()=> signOutUser()}>Cerrar sesiónbotón>
encabezamiento>
división>
 );
}
exportarpor defecto Éxito;

Vamos a desglosarlo:

  • Inicialice un cliente de Supabase con las variables de entorno: la URL de su proyecto y su clave anónima pública en el archivo ENV.
  • Usar Ganchos React.js, useState y useEffect, para obtener datos de la respuesta de la API.
  • El gancho useEffect implementa una función asíncrona que llama al método supabase.auth.getUser. Este método recupera la información del usuario asociada con la sesión del usuario actual.
  • La función asincrónica luego verifica si los datos del usuario existen y los establece en la variable de estado si es así.
  • La función signOutUser usa el método supabase.auth.signOut para cerrar la sesión del usuario y navegar de regreso a la página de inicio de sesión cuando hace clic en el botón de cierre de sesión.
  • Finalmente, devuelva un div con parte de la información del usuario.

5. Configurar las rutas de la página

Finalmente, configure las rutas para las páginas de inicio de sesión y éxito.

En el archivo app.js, agregue el siguiente código:

importar Reaccionar de'reaccionar';
importar { NavegadorRouter como Enrutador, Rutas, Ruta } de'reaccionar-enrutador-dom';
importar Acceso de'./páginas/Iniciar sesión';
importar Éxito de'./páginas/Éxito';
funciónaplicación() {
devolver (
<enrutador>
//Definimos las rutas
"/" elemento={} />
"/éxito" elemento={} />
Rutas>
enrutador>
 );
}
exportarpor defecto aplicación;

Vamos a desglosarlo:

  • Defina las dos rutas: una ruta para la página de inicio de sesión y una ruta para la página de éxito utilizando los componentes de enrutador de la biblioteca de enrutador de reacción.
  • Establezca las rutas de ruta en '/' y '/success' respectivamente, y asigne los componentes Login y Success a sus respectivas rutas.
  • Finalmente, ejecute este comando en su terminal para activar el servidor de desarrollo: 
 npm comenzar
  • Navegar a http://:localhost: 3000 en su navegador para ver el resultado. El componente de inicio de sesión representa la interfaz de usuario React-auth-UI de Supabase tanto con el correo electrónico como con los proveedores de Google.

Puede autenticarse con Google o registrarse con su correo electrónico y contraseña y usar estas credenciales para iniciar sesión. La ventaja de usar los proveedores de inicio de sesión social de Supabase o el proveedor de correo electrónico es que no necesita preocuparse por la lógica de registro.

Una vez que un usuario se registra con un proveedor social o con un correo electrónico y una contraseña, los datos se almacenarán en la base de datos de usuarios de autenticación de Supabase para su proyecto. Cuando inician sesión con sus credenciales, Supabase validará los detalles con las credenciales utilizadas para registrarse.

Supabase facilita la autenticación en React

Supabase ofrece un conjunto completo de funciones más allá de la autenticación, como alojamiento de bases de datos, acceso a API y transmisión de datos en tiempo real. También ofrece funciones como el generador de consultas y la visualización de datos para ayudar a los desarrolladores a crear y administrar sus aplicaciones de manera más eficiente.

Con su tablero intuitivo y su API robusta, Supabase es una herramienta poderosa para crear aplicaciones escalables y seguras.