Contexto de autenticación básico para React y NextJS.
toscadev
@ ToscaDevsJS
"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.
"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>
</>
)}
</>
);
}