Acceso

Contexto de autenticación básico para React y NextJS.

toscadev

@ ToscaDevsJS


App
context/userContext.tsx
"use client";
import {
  Dispatch,
  SetStateAction,
  createContext,
  useContext,
  useState,
} from "react";

interface IUserContext {
  user: boolean;
  setUser: Dispatch<SetStateAction<boolean>>;
}
export const UserContext =
  createContext <
  IUserContext >
  {
    user: false,
    setUser: () => {},
  };

const UserProvider = ({ children }: { children: React.ReactNode }) => {
  const [user, setUser] = useState < boolean > false;

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};
export default UserProvider;

export const UserAuth = () => {
  return useContext(UserContext);
};

Creación del Contexto e Interfaz IUserContext

interface IUserContext {
  user: boolean;
  setUser: Dispatch<SetStateAction<boolean>>;
}

export const UserContext =
  createContext <
  IUserContext >
  {
    user: false,
    setUser: () => {},
  };

Creación del Provider

El componente UserProvider es un componente envolvente que proporciona el contexto a sus hijos. Internamente utiliza el hook useState para gestionar el estado de autenticación del usuario.

const UserProvider = ({ children }: { children: React.ReactNode }) => {
  const [user, setUser] = useState < boolean > false;

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};
export default UserProvider;

Creación del Hook "UserAuth"

El hook UserAuth es una forma rápida y sencilla de acceder al contexto UserContext en cualquier lugar de la aplicación. Al usar este hook, se obtiene directamente el valor user y la función setUser.

export const UserAuth = () => {
  return useContext(UserContext);
};

Uso recomendado

1- Envuelva la parte superior de su aplicación (o la parte que necesita acceso al estado de autenticación) con el UserProvider.

<html lang="es">
  <body>
    <UserProvider>{children}</UserProvider>
  </body>
</html>

2-En cualquier componente hijo que necesite acceder al estado de autenticación o cambiarlo, simplemente utilice el hook UserAuth. 3- Ahora puede utilizar el valor de user para comprobar el estado de autenticación y setUser para cambiarlo.

App
/page.tsx
"use client";

import { UserAuth } from "@/context/userContext";

export default function Home() {
  const { setUser, user } = UserAuth();

  console.log(user);
  return (
    <>
      {user ? (
        <>
          <h1>Usuario logueado</h1>
          <button onClick={() => setUser(false)}>cerrar sesión</button>
        </>
      ) : (
        <>
          <h1>Usuario no logueado</h1>
          <button onClick={() => setUser(true)}>iniciar sesión</button>
        </>
      )}
    </>
  );
}

Regresar al Blog.

© Copyright 2024 ToscaDevJS.