No tienes acceso a esta clase

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

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
22H
30M
40S
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 15

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渦se鈥 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 鈥渦se鈥 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/*"]

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

npm install js-cookie
npm i axios

Me parece demasiado rebuscada esta forma de implementar el contexto. Es mas sencillo y c贸modo crear un archivo independiente solo para el contexo y usar lo que retorna useAuth como value del contexto.
.
(Esa es el m茅todo que el profesor usa en otros cursos鈥 No entiendo por qu茅 no fue consistente)
.
As铆 es como lo voy a implementar yo:
.

  • /contexts/AuthContext.jsx
import React from 'react';

const AuthConetxt = React.createContext();

export { AuthConetxt }
  • /hooks/useAuth.jsx
import React from 'react';

import Cookie from 'js-cookie';
import axios from 'axios';

function useAuth() {
  const [user, setUser] = React.useState(null);

  async function signIn(email, password) {
    setUser('login');
  }

  return {
    user,
    signIn
  }
}

export { useAuth };
  • /pages/_app.jsx
import '../styles/globals.css';

import MainLayout from '../layout/MainLayout';

import { AuthContext }  from '../contexts/AuthContext';
import { useAuth }      from '../hooks/useAuth';

function MyApp({ Component, pageProps }) {
  const auth = useAuth();

  return (
    <AuthContext.Provider value={auth}>
      <MainLayout>
        <Component {...pageProps} />
      </MainLayout>
    </AuthContext.Provider>
  )
}

export default MyApp;
 

Estoy aplicando el curso para crear un proyecto similar pero con Typescript, les comparto como llevo el useAuth con las diferencias:

La extensi贸n del useAuth.tsx

As铆 lo llevo 馃槂 Nunca pares de aprender 馃槂

import { useState, useContext, createContext } from "react";

import axios from "axios";

interface AppContextInterface {
  id: number;
  name: string;
  email: string;
  role: string;
  token: string;
}

const AuthContext = createContext<AppContextInterface | null>(null);

const sampleUser: AppContextInterface = {
  id: 1,
  name: "Admin",
  email: "",
  role: "superAdmin",
  token: "",
};

export const AuthProvider = ({ children }: any) => (
  // const auth = useProvideAuth();
  <AuthContext.Provider value={sampleUser}>{children}</AuthContext.Provider>
);

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

function useProvideAuth() {
  const [user, setUser] = useState<any>(null);
  const singIn = async (email: string, password: string) => {
    setUser("logeando...");
  };
  return {
    user,
    singIn,
  };
}

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

Si est谩n usando TS para instalar Js-Cookie este es el c贸digo para instalarlo con sus tipos:

yarn add js-cookie @types/js-cookie

Les recomiendo a los que tengan algun problema con las versiones de los componentes que se instalen las versiones desde cero de cada plugin y dem谩s, por ejemplo, si desean instalar js-cookie, agreguen al final as铆:

npm install js-cookie@3.0.1

E igualmente con axios:

npm install axios@0.24.0

Esto les recomiendo en cada curso para evitar incompatibilidad con recursos que tal vez el profe est茅 usando pero que desde el momento de la grabaci贸n hasta cuando lo vemos en un futuro (5-10 meses desde su lanzamiento) hay muchos cambios en sus versiones, y a veces nos arrojan errores por cambios de sintaxis o cosas as铆.

Adem谩s, si les muestra error por los 鈥渘ode_modules鈥, borren esa carpeta y corran el comando:

npm install

El cual har谩 que se instalen de nuevo todos los componentes necesarios seg煤n nuestra configuraci贸n en package.json, adem谩s, puede ser que la misma terminal les pida que corran:

npm audit fix --force

Pero no tengan miedo de hacerlo, ya lo he testeado varias veces por los mismos inconvenientes, y simplemente hago eso desde la clase 1 viendo las versiones que tiene instalada el profe en la secci贸n de recursos de cada clase.
Espero les sea de ayuda este testamento.

se me hizo un poco pezada la clase en especial los hooks no los domino tan bien, quizas me doy un break y dare un vistazo al curso de hooks 馃槮

Que molesto el error lens jajajajaja

Para los que usamos TypeScript, debemos instalar los tipos de js-cookie

npm install @types/js-cookie -D
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/*"],
      }
    }
  }

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,
};
}

Al hacer el reto VERIFIQUEN LOS SLASH !importante/

    getCategoryItems: (id) => `${API}/api/${VERSION}/categories/${id}/products/`,

Importante el slash final products/
los slash van en los elementos que poseen al inicio esto o similares
(id) =>

Este es el reto cumplido funcional

const API = process.env.NEXT_PUBLIC_API_URL;
const VERSION = process.env.NEXT_PUBLIC_API_VERSION;

const endPoints = {
	  auth: {
    login: `${API}/api/${VERSION}/auth/login`,
    profile: `${API}/api/${VERSION}/auth/profile`,
  },
  products: {
    getProduct: (id) => `${API}/api/${VERSION}/products/${id}/`,
		getProducts: (limit, offset) => `${API}/api/${VERSION}/products?limit=${limit}&offset=${offset}`,
    addProducts: `${API}/api/${VERSION}/products`,
    updateProduct: (id) => `${API}/api/${VERSION}/products/${id}/`,
    deleteProducts: (id) => `${API}/api/${VERSION}/products/${id}/`,
  },

  categories: {
    getCategoriesList: `${API}/api/${VERSION}/categories/`,
    addCategory: `${API}/api/${VERSION}/categories/`,
    getCategoryItems: (id) => `${API}/api/${VERSION}/categories/${id}/products/`,
    updateCategory: (id) => `${API}/api/${VERSION}/categories/${id}/`,
  },

  files: {
    addImage: `${API}/api/${VERSION}/files/upload/`,
  },
};


export default endPoints;

Tambi茅n el env local es

TAILWIND_MODE=watch
NEXT_PUBLIC_API_URL=https://api.escuelajs.co
NEXT_PUBLIC_API_VERSION=v1

me pregunto como en algunas ocaciones a Oscar aunque cometa algun typo, lo que quiere hacer se ejecute con normalidad, es npm install js-cookie