No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Creaci贸n del custom hook useAuth

11/31
Recursos

Aportes 5

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

npm install js-cookie
npm i axios

Primero debemos instalar dos recursos utilizando en la terminal:

npm i js-cookie axios

Luego creamos una nueva carpeta dentro de src llamada hooks, y dentor de esta un nuevo archivo llamada useAuth. C贸digo de este file:

import React, {useState, useContext, createContext} from 'react';
import Cookie from 'js-cookie';
import axios from 'axios';

const AuthContext = createContext();

export function ProviderAuth({ children }) {
  const auth = useProvideAuth();
  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
}

export const useAuth = () => {
  return useContext(AuthContext);
};

function useProvideAuth() {
  const [user, setUser] = useState(null);

  const signIn = async (email, password) => {
    setUser('login');
  };

  return {
    user,
    signIn,
  };
}

Creamos los correspondientes alias tanto de la clase pasada como de esta en jsconfig.json:

{
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@styles/*": ["styles/*"],
        "@components/*": ["components/*"],
        "@common/*": ["common/*"],
        "@layout/*": ["layout/*"],
        "@services/*": ["services/*"],
        "@api/*": ["services/api/*"],
        "@hooks/*": ["hooks/*"],
      }
    }
  }

Y finalmente llevamos el provider a toda la aplicaci贸n incluy茅ndolo en pages/_app.js de la siguiente manera:

import { ProviderAuth } from '@hooks/useAuth';
import '@styles/tailwind.css';
import MainLayout from '@layout/MainLayout';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ProviderAuth>
        <MainLayout>
          <Component {...pageProps} />
        </MainLayout>
      </ProviderAuth>

    </>
  )
}

export default MyApp

import React, {useState, useContext, createContext} from 鈥榬eact鈥;
import Cookie from 鈥榡s-cookie鈥;
import axios from 鈥榓xios鈥;

const AuthContext = createContext();

export function ProviderAuth({ children }) {
const auth = useProvideAuth();
return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
}

export const useAuth = () => {
return useContext(AuthContext);
};

function useProvideAuth() {
const [user, setUser] = useState(null);

const signIn = async (email, password) => {
setUser(鈥榣ogin鈥);
};

return {
user,
signIn,
};
}

Creo que seria algo mejor tener el context en una carpeta y archivo separado, y que el context internamente use el hook

npm install js-cookie axios
  • useAuth.js
import React, { useState, useContext, createContext } from"react";
import Cookie from"js-cookie";
import axios from"axios";

const AuthContext = createContext();

exportfunctionProviderAuth({ children }) {
  const auth = useProvideAuth();
  return <AuthContext.Providervalue={auth}>{children}</AuthContext.Provider>;
}

exportconst useAuth = () => {
  return useContext(AuthContext);
};

functionuseProvideAuth() {
  const [user, setUser] = useState(null);

  const signIn = async (email, password) => {
    setUser("login");
  };

  return {
    user,
    signIn,
  };
}
  • _app.js
import"@styles/tailwind.css";
import MainLayout from"@layout/MainLayout";
import { ProviderAuth } from"@hooks/useAuth";

functionMyApp({ Component, pageProps }) {
  return (
    <>
      <ProviderAuth>
        <MainLayout>
          <Component {...pageProps} />
        </MainLayout>
      </ProviderAuth>
    </>
  );
}

exportdefault MyApp;
  • jsconfig.json
{
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@common/*": ["common/*"],
        "@components/*": ["components/*"],
        "@hooks/*": ["hooks/*"],
        "@layout/*": ["layout/*"],
        "@services/*": ["services/*"],
        "@styles/*": ["styles/*"],
      }
    }
  }