Clase #11: Creación del custom hook useAuth 11/31
¿Qué es un Custom Hook?
Un Custom Hook es una función de JavaScript cuyo nombre comienza con “use” y que puede llamar a otros Hooks. Por ejemplo, useAuth permite autenticar un usuario. A diferencia de un componente React, un Custom Hook no necesita tener una firma específica. Podemos decidir lo que toma como argumentos, y lo que, en todo caso, debe devolver. En otras palabras, es como una función normal. Su nombre siempre debe comenzar con “use” para que pueda saber de un vistazo que se aplican las reglas de Hooks. Fuente: aquí
Continuando con el Proyecto:
Vamos a crear un Custom Hook para crear la estructura que nos permita iniciar sesión y salir del login. Dentro de src vamos a crear la carpeta hooks, dentro se crea el archivo useAuth.js y se agrega la lógica de la implementación, vamos a importar elementos de react y a usar axios para el manejo de peticiones.
Primero instalamos en consola: npm install js-cookie
Y también ejecutamos axios: npm install axios
Implementando la lógica en useAuth.js:
import React, {useState, useContext, createContext} from 'react';
import Cookie from 'js-cookie'; //Nos ayuda asignar a nuestro navegador las cookies que esté recibiendo en el momento de la autenticación
import axios from 'axios'; //Para el manejo de las peticiones como GET, PUT, POST, DELETE
const AuthContext = createContext(); //Se crea un nuevo context gracias a la api de react
//Se crea la encapsulación de nuestra aplicación
export function ProviderAuth({children}){
const auth = useProvideAuth();
return <AuthContext.Provider value ={auth}>{children}</AuthContext.Provider>;
}
//Permite exponer cierta información que se estará requiriendo
export const useAuth = () => {
return useContext(AuthContext);
};
//Captar la información del usuario
function useProvideAuth() {
const [user, setUser] = useState(null);
const signIn = async (email, password) => {
setUser('login');
};
return{
user,
signIn,
};
}
Vamos al archivo _app.js de la ruta src/pages y le agregamos el import de ProviderAuth y la etiqueta:
import { ProviderAuth } from '@hooks/useAuth';
import MainLayout from '@layaout/MainLayout';
import '@styles/tailwind.css';
function MyApp({ Component, pageProps }) {
return (
<>
<ProviderAuth>
<MainLayout>
<Component {...pageProps} />
</MainLayout>
</ProviderAuth>
</>
);
}
export default MyApp;
En jsconfig.json agregamos los path de hooks y components:
"@hooks/*": ["hooks/*"],
"@services/*": ["services/*"]
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.