Forem: Francisco Villarreal

checa como se hace una conexión entre nextjs y la autenticación de supabase

Francisco Villarreal — Wed, 08 Jan 2025 00:14:19 +0000

Autenticación con nextjs y supabase

Francisco Villarreal ・ Mar 2 '24

Controla tus promesa con JavaScript

Francisco Villarreal — Mon, 26 Aug 2024 19:36:47 +0000

El manejo de operaciones asíncronas en JavaScript es fundamental para crear aplicaciones eficientes y fluidas. Aquí es donde las promesas entran en juego. ¿Alguna vez te has preguntado cómo hacer que tu código no se bloquee mientras esperas la respuesta de un servidor? O quizás, ¿Cómo puedes ejecutar ciertas tareas solo después de que otra ha terminado? Pues bien, las promesas en JavaScript son la solución que estabas buscando.

En este artículo, exploraremos qué son las promesas, cómo funcionan y cómo pueden mejorar el flujo de tu aplicación. Vamos a sumergirnos en los detalles.

¿Qué es una Promesa en JavaScript?

Una promesa en JavaScript es un objeto que representa la eventual finalización (o falla) de una operación asíncrona y su valor resultante. En otras palabras, una promesa es un intermediario que maneja la ejecución de código asíncrono y te permite trabajar con valores que aún no se conocen al momento de escribir el código.

Características clave de las promesas:

Pendiente (Pending): El estado inicial, donde la operación asíncrona aún no ha terminado.
Resuelta (Fulfilled): La operación asíncrona se ha completado exitosamente y se ha obtenido un resultado.
Rechazada (Rejected): La operación asíncrona falló y se proporciona una razón o error.

Este ciclo de vida de una promesa permite manejar de manera más clara y eficiente las operaciones asíncronas, evitando el "callback hell".

¿Por Qué Usar Promesas?

Las promesas son particularmente útiles cuando se trabaja con peticiones a servidores. Imagina que haces una solicitud HTTP para obtener datos. El tiempo de espera puede variar, y no querrás que tu aplicación se quede congelada mientras llega la respuesta. Usar promesas permite que tu código siga ejecutándose sin necesidad de esperar, lo que mejora el rendimiento general de la aplicación.

Además, las promesas son aplicables en otros casos, como:

Manipulación de archivos: Puedes esperar a que un archivo se cargue o se procese antes de ejecutar otra tarea.
Modificaciones en el DOM: Si necesitas asegurarte de que ciertos cambios en la interfaz se completen antes de continuar con otras operaciones.

Las promesas también permiten encadenar varias operaciones asíncronas de manera más legible y fácil de mantener.

Cómo Usar Promesas en JavaScript

Para crear una promesa, se utiliza el constructor Promise, pasando una función con dos argumentos: resolve y reject.

let miPromesa = new Promise((resolve, reject) => {
    // Simulación de una operación asíncrona
    let exito = true;

    if (exito) {
        resolve("Operación exitosa!");
    } else {
        reject("Ocurrió un error.");
    }
});

Para manejar el resultado de una promesa, se utilizan los métodos .then() y .catch():

miPromesa
    .then((mensaje) => {
        console.log(mensaje); // "Operación exitosa!"
    })
    .catch((error) => {
        console.error(error); // "Ocurrió un error."
    });`

Ventajas de las Promesas frente a Callbacks

Antes de que las promesas se introdujeran, el manejo de operaciones asíncronas se realizaba principalmente con callbacks. Sin embargo, esto podía llevar a un código difícil de seguir y mantener, especialmente cuando se anidaban múltiples callbacks, lo que se conoce como "callback hell".

Ventajas de las promesas:

Legibilidad: El código es más fácil de leer y seguir.
Mantenimiento: Facilita la identificación y manejo de errores.
Encadenamiento: Puedes encadenar múltiples operaciones asíncronas de forma más organizada.

Promesas vs Async/Await

Aunque las promesas han sido una mejora significativa en comparación con los callbacks, la introducción de async/await en ECMAScript 2017 ha simplificado aún más la sintaxis para manejar operaciones asíncronas.

async function obtenerDatos() {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

Con async/await, el código se vuelve más lineal, similar al código síncrono, pero sigue siendo asíncrono bajo el capó. Sin embargo, es importante destacar que async/await sigue utilizando promesas en su núcleo, por lo que entender cómo funcionan las promesas es clave para dominar el uso de async/await.

Conclusión

Las promesas en JavaScript son una herramienta poderosa para manejar operaciones asíncronas sin complicar tu código con múltiples callbacks. Desde peticiones a servidores hasta tareas más complejas dentro de tu aplicación, las promesas te permiten escribir un código más limpio, legible y fácil de mantener.

No importa si estás construyendo una simple aplicación web o un sistema más complejo, aprender a manejar promesas es esencial para optimizar el rendimiento de tu código.

custom fetch hook

Francisco Villarreal — Sun, 24 Mar 2024 20:32:45 +0000

In this article, we'll explore how to make fetch calls in React using hooks, which gives us greater control over waiting for responses from requests and better error handling.

Before diving into fetch calls, it's important to understand what hooks are in React. A hook is a special function that allows functional components to maintain their own state, enabling them to replicate certain behaviors of class components. The most commonly used hooks in React are useState, which maintains the component's state, useEffect, which allows for actions to be performed when the component mounts, updates, or unmounts, and useCallback, which optimizes performance and avoids expensive calculations.

However, React also allows us to create our own hooks, known as custom hooks, which combine the functionality of existing hooks to suit our specific needs.

In this article, we'll propose a way to handle server requests using a custom hook, where we can control whether the request is pending, whether it has been completed, and, in case of an error, handle it appropriately. This technique provides us with an efficient and flexible way to make network requests in our React applications, improving the user experience and simplifying error handling.

import {useState, useEffect} from 'react'

export default function useFetch(url) {
    const [data, setData] = useState('')
    const [isLoading, setIsloading] = useState(false)
    const [error, setError] = useState(null)

    useEffect(()=> {
        try{
            setIsloading(true)
            const getfetch = async ()=> {
                const {data: fetchedData} = await fetch(url).then(res=> res.json())
                setData(fetchedData)
            }
            getfetch()
        } catch(err){
            setError(err)
        }
        finally {
            setIsloading(false)
        }
    },[])
    return {data, error, isLoading}
}

The code above shows the creation of a function called useFetch, which acts as our custom hook. In the initial lines, the three states necessary for the hook's operation are defined. The first is used to store the information obtained in the call, the second acts as a flag to indicate whether the request is ongoing or has completed, and the last state is used to store error information.

Once the states have been defined, the next step is the use of the useEffect hook, which executes a block of code within a try...catch. First, we set the isLoading state to true to indicate that the call is in progress. Then, we create an asynchronous function to perform the fetch request synchronously and assign the value of the response to the data state. If an error occurs, the catch block handles saving the corresponding error state. Finally, regardless of the outcome of the request, the finally block resets the isLoading flag to false, indicating that the request has finished. This code provides us with a robust mechanism for making network requests in our React applications, with the ability to handle loading state and errors efficiently.

After the useEffect, we only need to return the values that we want to expose outside the hook, and the way to do this is by returning an object with values, in this case, data, isLoading, and error.

Here is the implementation of the custom hook we created earlier:

export default function App() {
    const {data, isLoading, error} = useFetch('http://fakeApiRest')

    if(isLoading) {
        return <div>loading...</div>
    }
    if(error) {
        return <ErrorHandler error={error} />
    }
    return (
        <div>{data}</div>
    )
}

In this code snippet, we call the hook we created and receive an object that we destructure into three variables: data, isLoading, and error. Then, we have a condition that checks if isLoading is true, in which case a loading message is displayed. There is also a condition to handle errors: if there's an error, the ErrorHandler component is returned. Finally, if the call is successful, the received information from the request is displayed. This implementation allows for effective control of loading state and errors when making network requests in our React application.

This is one way to implement a request, but let me provide some comments on how I would approach or what changes or additions I might make:

More detailed error handling: Instead of simply returning the ErrorHandler component, we could provide more detailed error information, such as a specific error message or suggested actions for the user.
Performance optimization: Depending on the application and the number of requests made, it might be useful to implement some form of data caching or data retrieval strategies to avoid making redundant requests.
Customization of the user interface during loading: In addition to displaying a loading message, we could consider showing a visual loading indicator, such as a spinner or progress bar, to provide a better user experience.

como usar contextApi en react

Francisco Villarreal — Fri, 22 Mar 2024 17:31:55 +0000

En esta ocasión, exploraremos una funcionalidad que React nos ofrece para almacenar información y acceder a ella desde cualquier punto de nuestra aplicación. Esto nos ayuda a evitar un problema común conocido como "prop drilling", que ocurre cuando pasamos props a través de varios niveles de componentes. Esto puede resultar en que los componentes intermedios reciban props que no necesitan para su lógica, lo que puede forzar su renderización innecesaria y aumentar el costo de la aplicación.

Hoy nos enfocaremos en la utilidad de ContextAPI. Esta característica nos permite crear un estado global donde podemos almacenar información y hacer que esté disponible para cualquier componente a lo largo de la aplicación.

El primer paso para crear un estado global es establecer un contexto, lo cual se realiza de la siguiente manera:

interface IEstado {
  estado: string,
  setEstado: () => void
}

export const MiPrimirContext = createContext<IEstado>({
  estado: '',
  setEstado: () => {}
});

En este código, creamos un contexto utilizando el método createContext. Le proporcionamos un objeto con dos propiedades: estado y setEstado, que serán los valores por defecto del estado global. Este contexto se asigna a la constante MiPrimerContext.

Una vez que hemos creado el contexto, el siguiente paso es crear un nuevo componente llamado MiPrimerProvider. Este componente será responsable de establecer el proveedor del contexto que creamos anteriormente.


export const MiPrimirProvider = ({children}: {children: ReactNode})=> {
  const [estado, setEstado] = useState('primier Estado')
  return (
    <MiPrimirContext.Provider value={{estado, setEstado}}>
      {children}
    </MiPrimirContext.Provider>
  )
}

En este fragmento de código, observamos el uso del hook useState, el cual nos ayuda a gestionar el estado. Este componente actuará como un "HOC" (Componente de Orden Superior), lo que significa que cualquier componente anidado dentro de él tendrá acceso al estado definido.

import "./App.css";
import { MiPrimerProvider } from "./providers/MiPrimerProvider";
import Dashboard from "./components/dashboard";

function App() {
  return (
    <div className="relative">
      <MiPrimerProvider>
        <Dashboard />
      </MiPrimerProvider>
    </div>
  );
}

export default App;

En este código de la aplicación principal (App), se utiliza el MiPrimerProvider para envolver el componente Dashboard, asegurando así que Dashboard y sus componentes hijos tengan acceso al estado global proporcionado por MiPrimerProvider.

import { useContext } from "react";
import { MiPrimirContext } from "../providers/MiPrimirContext";

export default function Dashboard() {
  const { estado, setEstado } = useContext(MiPrimirContext);

  return (
    <>
        {estado}
        <button onClick={()=> setEstado('update State')}> updateState</button>
    </>

  );

}

Aquí podemos observar que el componente Dashboard está utilizando el contexto que creamos. Es tan simple como utilizar el hook useContext, pasándole como parámetro el contexto que creamos (MiPrimirContext). De esta manera, obtenemos acceso a los valores mantenidos por el contexto, que en este caso son estado y setEstado. Con esto, ya podemos hacer uso de ellos en nuestro componente.

Como manejar modales con hooks en react

Francisco Villarreal — Thu, 21 Mar 2024 16:40:15 +0000

En este artículo, exploraremos cómo crear un ModalProvider para controlar los modales utilizados en una aplicación desde cualquier punto de la misma. Esta implementación nos ayudará a gestionar los modales con mayor facilidad y coherencia en toda la aplicación.

Todo el código que vamos a presentar se puede encontrar en el siguiente repositorio.

Creación del Hook `useModal`

Lo primero en lo que nos centraremos es en la creación de un hook que mantendrá el estado de los modales abiertos.

import { useState } from 'react';
import { modalStore } from '../providers/modalProvider';

export default function useModal(){
  const [modalList, setModalList]= useState<modalStore[]>([])
  
  const openModal = (newModal: modalStore)=> {
    setModalList(old=> [...old, newModal])
  }
  const closeModal =(id: number)=> {
    setModalList(old=> old.filter(modal=> modal.id != id))
  }
  
  return {modalList, openModal, closeModal}
}

la función de este hook va estar enfocada en mantener la información y poder modificarlo atreves de los dos métodos

Este hook se centra en mantener la información sobre los modales abiertos y permite su modificación a través de dos métodos:

openModal(newModal: ModalStore): Este método añade un nuevo modal a la lista de modales abiertos.
closeModal(id: number): Este método cierra el modal correspondiente al ID proporcionado.

Uso del `ModalProvider`

Ahora, vamos a implementar el ModalProvider, que utilizará el hook useModal para proporcionar el control de modales en toda la aplicación.

import { ReactNode, createContext } from 'react';
import ModalController from '../components/modalControler';
import useModal from '../hook/useModal';

export enum ModalType {
  "helloModal",
  "byeModal",
}

export interface modalStore {
  id: number;
  type: ModalType | null;
  data?: unknown;
}

interface contextModalInterface{
  modalList: modalStore[],
  openModal: (type: modalStore) => void
  closeModal: (id: number) => void
}

export const ModalContext = createContext<contextModalInterface>({
    modalList: [],
    openModal: () => {},
    closeModal: () => {},
});

export const ModalProvider = ({children}: {children: ReactNode})=> {
  const {modalList, openModal, closeModal} = useModal()
  return (
    <ModalContext.Provider value={{modalList, openModal, closeModal}}>
      
      {children}
    </ModalContext.Provider>
  )
}

controlador de modales

una ves creado el Provider tenemos que crear otro componente el que va estar encargado de desplegar los modales que se desean utilizar va ser de la siguiente forma

import { useContext } from "react";
import {
  ModalContext,
  ModalType,
  modalStore,
} from "../providers/modalProvider";
import HelloModal from "./helloModal";
import ByeModal from "./byeModal";  

export default function ModalController() {
  const { modalList } = useContext(ModalContext);
  return (
    <>
      {modalList.map(({ type, data, id }: modalStore) =>
        type === ModalType.helloModal ? (
          <HelloModal data={data as string} key={id} id={id} />
        ) : type === ModalType.byeModal ? (
          <ByeModal key={id} id={id} />
        ) : null
      )}
    </>
  );
}

la tarea principal de este componente es la de iterar todos la lista de todos los modales que se desean visualizar

después de crear este componente lo tenemos que mandar llamar y este va estar alojado dentro de componente ModalProvider que anterior mente creamos

export const ModalProvider = ({children}: {children: ReactNode})=> {
  const {modalList, openModal, closeModal} = useModal()
  return (
    <ModalContext.Provider value={{modalList, openModal, closeModal}}>
      <ModalController/>
      {children}
    </ModalContext.Provider>
  )
}

y por ultimo tenemos que hacer uso del componente modalProvider que creamos y este va ir situado en la mas alta del la estructura de la aplicación para que tengamos acceso a al contexto atreves de toda la aplicación

import "./App.css";
import { ModalProvider } from "./providers/modalProvider";
import Dashboard from "./components/dashboard";
function App() {
  return (
    <div className="relative">
      <ModalProvider>
        <Dashboard />
      </ModalProvider>
    </div>
    
  );
}
export default App;

una ves creado todos los elementos requeridos para esta implementación solo falta mandar llamar un modal que esto se haría de la siguiente manera

import { useContext } from "react";
import { ModalContext, ModalType } from "../providers/modalProvider";

export default function Dashboard() {
  const { openModal, modalList } = useContext(ModalContext);
  return (
    <>
      <button
        onClick={() =>
          openModal({
            id:modalList.length + 1,
            type: ModalType.helloModal,
            data: "francisco",
          })
        }
      >
        open Hello Modal
      </button>
      <button
        onClick={() =>
          openModal({
            id: modalList.length + 1,
            type: ModalType.byeModal,
            data: "francisco",
          })
        }
      >
        open Bye Modal
      </button>
    </>
  );
}

Conclusión

En este artículo, hemos explorado cómo mejorar el control de modales en una aplicación React mediante la creación de un ModalProvider. Esta implementación nos permite gestionar los modales de manera centralizada y eficiente desde cualquier punto de la aplicación.

Al utilizar un hook personalizado llamado useModal, hemos encapsulado la lógica para mantener el estado de los modales abiertos y proporcionar métodos para abrir y cerrar modales. Esto nos permite mantener un código más limpio y modular, ya que toda la lógica relacionada con los modales se encuentra en un único lugar.

Además, al utilizar el contexto de React, hemos creado un ModalProvider que proporciona el estado y los métodos necesarios para el control de modales a todos los componentes hijos. Esto facilita el acceso y la gestión de los modales en cualquier parte de la aplicación.

Al final, hemos integrado el ModalProvider en nuestra aplicación principal, lo que nos permite mejorar la experiencia del usuario al tener un control más consistente y coherente de los modales.

custom fetch hook

Francisco Villarreal — Wed, 13 Mar 2024 01:47:18 +0000

En este artículo, exploraremos cómo realizar llamadas fetch en React utilizando hooks, lo que nos brinda un mayor control sobre la espera de respuestas de las peticiones y una mejor gestión de errores.

Antes de sumergirnos en las llamadas fetch, es importante comprender qué son los hooks en React. Un hook es una función especial que permite a los componentes funcionales mantener su propio estado, lo que les permite replicar ciertos comportamientos de los componentes de clase. Los hooks más utilizados en React son useState, que mantiene el estado del componente, useEffect, que permite realizar acciones al montar, actualizar o desmontar el componente, y useCallback, que optimiza el rendimiento y evita cálculos costosos.

Sin embargo, React también nos permite crear nuestros propios hooks, conocidos como custom hooks, que combinan la funcionalidad de los hooks existentes para adaptarse a nuestras necesidades específicas.

En este artículo, propondremos una forma de manejar las solicitudes a servidores mediante un custom hook, donde podremos controlar si la petición está pendiente, si se ha completado y, en caso de error, capturarlo adecuadamente. Esta técnica nos proporciona una manera eficiente y flexible de realizar solicitudes de red en nuestras aplicaciones React, mejorando la experiencia del usuario y facilitando el manejo de errores.

import {useState, useEffect} from 'react'

export default function useFetch(url) {
    const [data, setData] = useState('')
    const [isLoading, setIsloading] = useState(false)
    const [error, setError] = useState(null)

    useEffect(()=> {
        try{
            setIsloading(true)
            const getfetch = async ()=> {
                const {data: fetchedData} = await fetch(url).then(res=> res.json())
                setData(fetchedData)
            }
            getfetch()
        } catch(err){
            setError(err)
        }
        finally {
            setIsloading(false)
        }
    },[])
    return {data, error, isLoading}
}

El código que vemos arriba muestra la creación de una función llamada useFetch, la cual actúa como nuestro hook personalizado. En las primeras líneas, se definen los tres estados necesarios para el funcionamiento del hook. El primero se utiliza para almacenar la información obtenida en la llamada, el segundo actúa como una bandera para indicar si la petición está en curso o si ha finalizado, y el último estado se utiliza para almacenar información en caso de error.

Una vez que se han definido los estados, el siguiente paso es el uso del hook useEffect, el cual ejecuta un bloque de código dentro de un try...catch. En primer lugar, establecemos el estado isLoading como verdadero para indicar que se está realizando la llamada. Luego, creamos una función asíncrona para realizar la solicitud fetch de manera síncrona y asignar el valor de la respuesta al estado data. En caso de que ocurra un error, el bloque catch se encarga de guardar el estado correspondiente de error. Finalmente, independientemente del resultado de la solicitud, el bloque finally vuelve a establecer la bandera isLoading como falsa, indicando que la solicitud ha finalizado. Este código nos proporciona un mecanismo robusto para realizar solicitudes de red en nuestras aplicaciones React, con la capacidad de manejar el estado de carga y los errores de manera eficiente.

despues del useeffect solo queda regresar los valores que queremos exponer fuera el hook, y la forma de hacerlo es regresar un objeto con valores que en este caso son data , isLoading y error

Aquí está la implementación del custom hook que creamos anteriormente:

export default function App() {
    const {data, isLoading, error} = useFetch('http://fakeApiRest')

    if(isLoading) {
        return <div>loading...</div>
    }
    if(error) {
        return <ErrorHandler error={error} />
    }
    return (
        <div>{data}</div>
    )
}

En este fragmento de código, llamamos al hook que creamos y recibimos un objeto que desestructuramos en tres variables: data, isLoading, y error. Luego, tenemos una condición que verifica si isLoading es verdadero, en cuyo caso se muestra un mensaje de carga. También hay una condición para manejar errores: si hay un error, se devuelve el componente ErrorHandler. Por último, si la llamada es exitosa, se muestra la información recibida en la petición. Esta implementación permite controlar el estado de carga y los errores de manera efectiva al realizar solicitudes de red en nuestra aplicación React.

esto es una fomra de hacer la implementacion de una llamada pero comenta tu como lo harias o que cambiarias o agregarias

Autenticación con nextjs y supabase

Francisco Villarreal — Sat, 02 Mar 2024 18:30:08 +0000

En este artículo, exploraremos los pasos necesarios para crear una autenticación sólida utilizando la potencia de Next.js y la flexibilidad de Supabase. desglosaremos cada etapa del proceso para que puedas construir una autenticación escalable y confiable en tu aplicación web.

el proyecto completo po puedes encontrar en el repositorio auth_nextjs_supabase

Primero, inicializaremos el proyecto de Next.js desde la terminal ejecutando el siguiente comando:

npx create-next-app@latest

Este comando iniciará el proceso de configuración del proyecto de Next.js y te hará algunas preguntas básicas. Para este ejemplo, puedes seleccionar todas las opciones por defecto.

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

Una vez finalizada la instalación de todos los paquetes, procedemos a instalar las librerías de Supabase para establecer la conexión. Ejecuta el siguiente comando en la terminal:

npm install @supabase/auth-helpers-nextjs @supabase/supabase-js

Luego, recupera la URL y la clave anónima de tu proyecto desde la configuración de tu API settings. Crea un archivo .env.local en la raíz del proyecto y declara las siguientes variables de entorno:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

Una vez creadas las variables de entorno, procedemos a activar los proveedores que deseamos habilitar para la autenticación. Para hacerlo, sigue estos pasos:

Dentro del proyecto, dirígete a la sección de autenticación.
Selecciona la opción "Providers".
Habilita los proveedores que deseas utilizar.
Para los proveedores que requieran cuentas de terceros, como Google o GitHub, deberás proporcionar un Client ID y un Client Secret. Estos se obtienen configurando la autenticación en la consola de desarrolladores de cada proveedor, siguiendo los pasos indicados para crear una nueva aplicación o proyecto. Una vez creada la aplicación, te proporcionarán el Client ID y el Client Secret que deberás ingresar en la configuración correspondiente de tu proyecto.

Repite este proceso para cada proveedor que desees habilitar, siguiendo las instrucciones específicas de cada plataforma para obtener las credenciales necesarias.

Nota: Antes de continuar, es importante verificar que la opción de
permitir a los usuarios crear nuevas cuentas esté disponible para ellos. Esto se puede hacer accediendo a la configuración del proyecto y navegando hasta el área de autenticación. Allí, asegúrate de habilitar la opción que permita a los usuarios crear nuevas cuentas. Esto garantizará que tengan la posibilidad de registrarse por sí mismos según sea necesario.

Middleware

Una vez completada toda la configuración, continuamos en nuestro proyecto de Next.js. En este paso, crearemos el archivo src/middleware.js, donde desarrollaremos un middleware para verificar si el usuario ha iniciado sesión. Este middleware nos permitirá redirigir al usuario a la página principal si ya está autenticado, de lo contrario, lo dirigirá a la página de inicio de sesión.

import { createMiddlewareClient } from  "@supabase/auth-helpers-nextjs";
import { NextRequest, NextResponse } from  "next/server";

export  async  function  middleware(req: NextRequest) {

    const  reqUrl  =  new  URL(req.url);
    const  res  =  NextResponse.next();
    const  supabase  =  createMiddlewareClient({ req, res });
    const  isLoginPage  = ["/sign-in", "/sign-up"].includes(reqUrl.pathname);
    const { data: { session } } =  await  supabase.auth.getSession();

    if (isLoginPage  &&  session) {
        return  NextResponse.redirect(reqUrl.host);
    } else  if (!session  &&  !isLoginPage) {
        return  NextResponse.redirect(`http://${reqUrl.host}/login`);
    }

    return  res;
}

export  const  config  = {
    matcher: ["/((?!api|images|icons|_next/static|_next/image|favicon.ico).*)"],
};

El propósito principal de este middleware es garantizar la seguridad y la experiencia del usuario al navegar por la aplicación. Además, en la configuración del middleware, se especificarán las rutas donde se omitirá su uso, adaptándose así a las necesidades específicas del proyecto.

Callback

Sigamos con la creación de archivos. Ahora vamos a crear un callback que nos permitirá recibir la respuesta del proveedor que seleccionamos anteriormente. Este archivo estará ubicado en src/app/auth/callback/route.ts. Este paso es crucial para manejar la respuesta del proveedor de autenticación y realizar las acciones necesarias en función de esa respuesta.

import { createRouteHandlerClient } from  '@supabase/auth-helpers-nextjs'
import { cookies } from  'next/headers'
import { type  NextRequest, NextResponse } from  'next/server'

export  const  dynamic  =  'force-dynamic'

export  async  function  GET (request: NextRequest) {
    const  requestUrl  =  new  URL(request.url)
    const  code  =  requestUrl.searchParams.get('code')
    if (code  !==  null) {
        const  supabase  =  createRouteHandlerClient({ cookies })
        await  supabase.auth.exchangeCodeForSession(code)
    }
    return  NextResponse.redirect(requestUrl.origin)
}

Sign-in

Una vez completado todo lo anterior, procedemos a crear un componente que mostrará un botón para iniciar sesión en la aplicación. Este botón ejecutará la función signInWithProvider, que se encargará de realizar el inicio de sesión utilizando la cuenta de terceros seleccionada.

"use client";
import { createClientComponentClient } from  "@supabase/auth-helpers-nextjs";
import { Icons } from  "../icons";
import { Button } from  "../ui/button";
import { Provider } from  "@supabase/supabase-js";

export  default  function  Providerbuttons() {
    const  supabase  =  createClientComponentClient();

    const  signInWithProvider  =  async (provider: Provider) => {
        const { data, error } =  await  supabase.auth.signInWithOAuth({
            provider,
            options: {
                redirectTo: "http://localhost:3000/auth/callback",
            },
        });
    };

    return (
        <div  className="grid grid-cols-2 gap-6">
            <Button  variant="outline"  onClick={() =>  signInWithProvider("github")}>
                <Icons.gitHub  className="mr-2 h-4 w-4"  /> Github
            </Button>
            <Button  variant="outline"  onClick={() =>  signInWithProvider("google")}>
                <Icons.google  className="mr-2 h-4 w-4"  /> Google
            </Button>
        </div>
    );
}

la combinación de Next.js y Supabase ofrece una solución completa para implementar sistemas de autenticación en aplicaciones web. Hemos abordado cómo configurar la conexión con Supabase, gestionar credenciales y crear middleware para proteger rutas en Next.js. Además, destacamos la importancia de permitir a los usuarios registrarse con cuentas de terceros y cómo manejar las respuestas de los proveedores de autenticación. Al implementar esta solución, no solo aseguramos la aplicación, sino que también mejoramos la experiencia del usuario. Estos conocimientos permiten construir sistemas de autenticación sólidos y escalables para proyectos web exitosos.

Forem: Francisco Villarreal

checa como se hace una conexión entre nextjs y la autenticación de supabase

Autenticación con nextjs y supabase

Francisco Villarreal ・ Mar 2 '24

Controla tus promesa con JavaScript

¿Qué es una Promesa en JavaScript?

Características clave de las promesas:

¿Por Qué Usar Promesas?

Cómo Usar Promesas en JavaScript

Ventajas de las Promesas frente a Callbacks

Promesas vs Async/Await

Conclusión

custom fetch hook

como usar contextApi en react

Como manejar modales con hooks en react

Creación del Hook useModal

Uso del ModalProvider

controlador de modales

Conclusión

custom fetch hook

Autenticación con nextjs y supabase

Middleware

Callback

Sign-in

Creación del Hook `useModal`

Uso del `ModalProvider`