Contexto de autenticación #5
Conversation
| @@ -0,0 +1,56 @@ | |||
| import * as React from 'react'; | |||
| import type { AuthConnector, UserData } from '@impr3siones/data-connector'; | |||
There was a problem hiding this comment.
import type ...
Importa solo declaraciones de tipos, y cuando se transpila el TypeScript son declaraciones que se borran, de esta manera no se ejecuta el código del paquete que importamos, esto nos permite que el código de @impr3siones/data-connector no se ejecute al hacer SSR, en la entrada del blog lo explicaré mejor
| import type { AuthConnector, UserData } from '@impr3siones/data-connector'; | ||
|
|
||
| const loadAuth = async (): Promise<AuthConnector> => { | ||
| return (await import('@impr3siones/data-connector')).auth; |
There was a problem hiding this comment.
este import de aquí es un import asíncrono, ¿que quiere decir esto? pues que el transpilador, al llegar a esta instrucción, hará MUUUUCHAA magia y lo que hará será transpilar el código a importar pero en un fichero .js a parte, es decir, tendremos el código principal en un fichero .js y la parte del data-connector en otro. Y para rematar la magia total y absoluta, convertirá el import en una llamada asíncrona desde el frontal, de manera que una vez el navegador se haya bajado el fichero js a parte, se ejecutará su contenido y obtendremos nuestro módulo.
Es algo muy mágico y super útil, ya que nos permite tener un bundle (fichero .js) inicial pequeño e ir cargando en el navegador las dependencias según se vayan usando.
| export type { AuthConnector } from './connectors/auth'; | ||
| export type { OrdersConnector } from './connectors/database/orders'; | ||
| export type { StorageConnector } from './connectors/storage'; |
There was a problem hiding this comment.
Esta es la exportación de tipos, para poder usar import type en el contexto de autenticación
| @@ -0,0 +1,56 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
Habría que unificar los imports de react
| React.useEffect(() => { | ||
| loadAuth().then((auth) => { | ||
| setAuthInstance(auth); | ||
| }); | ||
| }, []); |
There was a problem hiding this comment.
Al cargar la instancia de autenticación dentro de un efecto nos estamos asegurando de que el código no se ejecuta en el lado del servidor, puesto que los componentes no se montan
| React.useEffect(() => { | ||
| if (authInstance) { | ||
| return authInstance.onAuthDataReceived(setAuthState); | ||
| } | ||
| }, [authInstance]); |
There was a problem hiding this comment.
Añadimos el listener en otro efecto, ya que onAuthDataReceived nos devuelve una función que al ejecutarla elimina el listener, de esta manera cuando el componente se desmonte se eliminará automáticamente
| const [authState, setAuthState] = React.useState<UserData | null | undefined>( | ||
| null | ||
| ); |
There was a problem hiding this comment.
El estado empieza a null para saber que no se ha comprobado todavía el estado de la sesión, de esta manera podemos mostrar un mensaje de "Cargando...", y cuando sea undefined sabremos que la sesión no está iniciada
✅ Checklist
🖼️ Cambios visuales
Cabecera con información del estado de inicio de sesión
✍️ Artículo
#PR5 Contexto de autenticación