Lo que vamos a hacer es una aplicación desde cero de NextDS, no le vamos a dar funcionalidad
porque nos vamos a enfocar sobre todo a conseguir la autenticación con Firebase y la quiero
de Service App Rendering, que podamos también utilizarla en la parte del servidor.
Vamos a probar con NextFirebaseAuth a ver si los problemas que nos podamos encontrar
y lo que sea.
Create Next App, quiero justamente ver si puedo tener Firebase en el Service App Rendering
y de forma más o menos sencilla.
Así que lo vamos a probar.
NextFirebaseAuth, venga, este es nuestro proyecto, empieza la instalación, ya tenemos aquí
como le he llamado NextDSFirebaseAuth.
A new version of create NextApp is available.
Pues lo acabo de ejecutar porque ya se está quejando esto.
Si lo acabo de ejecutar por primera vez, ¿cómo puede ser que haya una nueva versión?
Venga, hacemos un MPN run dev, a ver cómo se queda esto y esto a ver, habrá inicializado
el proyecto y ya está, vale, usando Webpack 5, vale, esto está bien, voy a abrir mi editor,
bueno, ya lo he dejado así todo blanco, vamos a instalar este, NextFirebaseAuth.
Vamos a ver si funciona bien, si no funciona bien.
Una cosa que seguramente nos dé problemas y, pero bueno, está bien que dé problemas porque
así aprendemos, ¿no?
También, ¿queréis que dé problemas o me salto los problemas?
Vamos a instalarlo, bueno, por aquí pone que hay una demo, pero bueno, NextFirebaseAuth.
Y asegúrate que tienes las peer dependencies instaladas.
Aquí es donde va a estar uno de los problemas, yo creo, ¿vale?
Vamos a instalarlo y aquí en las peer dependencies que es Firebase, FirebaseAdmin, Next, React y ReactDom.
¿Ves? Mira, aquí ya tenemos el problema.
Esto es porque yo estoy utilizando NPM 7, ¿vale?
Y cuando se instala, cuando se utiliza NPM 7, ha cambiado la forma en la que funcionan las peer dependencies.
Es bastante jodido esto.
¿Por qué?
Porque ahora las peer dependencies se instalan y aquí de esto se está quejando justamente.
Si vamos a este proyecto, en el package.json seguramente veremos que la versión de Next, Next, que tiene las peer dependencies,
fíjate, dice mayor de la 9.5.0 y menor a la 11.
Esto quiere decir, como peer dependency, Next tiene que ser una versión que sea la 9, mayor que la 9.5, pero menor a la 11.
Y claro, Next y es ya parecido a la 11.
¿Qué son las peer dependencies?
No sé si sabéis lo que son las peer dependencies.
Bueno, Víctor Béjar me pregunta ya.
¿Qué son las peer dependencies?
Las peer dependencies son dependencias que no instala este paquete.
O sea, yo cuando instalo Next Firebase Out, no va a instalar esas dependencias, ¿vale?
El peer dependencies, estas no las va a instalar o no las instalaba antes, pero da por hecho que tu proyecto las tiene para funcionar.
¿Qué quiere decir esto?
Pues que tú cuando instalas Next Firebase Out, lo que va a hacer es instalar las dependencias.
O sea, solo va a instalar esta, pero va a dar por hecho que el proyecto que tú estás utilizando tenga instaladas estas dependencias de aquí.
O sea, va a dar por hecho que tú tienes Firebase, que es una versión mayor a la 7 pero menor a la 9, que tienes Firebase Admin con una versión compatible con la 9.2.xx, Next y tal.
¿Qué pasa?
¿Qué pasa?
Que en NPM 7 esto ha cambiado.
¿Qué quiere decir?
Pues que ahora sí que revisa.
Esto antes se ignoraba directamente.
O sea, se ignoraba.
Decía, esto me importa un pepino.
Y NPM pasaba de esto.
Pero ahora NPM lo revisa.
Y cuando lo revisa, fíjate, como yo tengo en Next.js, ahí, perdón, Next, tengo la versión 11.
Lo que ha hecho es resolver las pierde dependencias y se ha dicho, mira, cuando he intentado instalar el Next.js Firebase Admin he encontrado que tienes la versión 11.
Pero claro, es que este paquete Next.js Firebase Admin necesita una versión de la 9.50 o menor a la 11.
Y entonces peta.
Para arreglar esto, bueno, hay diferentes.
Lo mejor para arreglarlo sería hacer esto que quitar este menor a 11 y poner menor a 12 o poner otra cosa.
Pero si no, una cosa que se puede hacer para arreglar también sería hacer un NPM install y poner Legacy Peer Depths.
Esta podría ser una forma.
Que creo que esto lo que hace es ignorar vilmente la versión.
Otra cosa sería utilizar NPM 6 y ya está.
O utilizar Next.js 10, claro.
Pero como yo estoy utilizando Node.js 16 y yo tengo la versión 7, pues tengo que tenerlo en cuenta.
¿Vale?
Ahora se supone que se ha instalado.
Pero bueno, debería instalar también Firebase Admin y a ver cuál más había dicho que había que instalar por aquí.
Firebase Admin.
Vale, ya las tenemos.
Pues nada, instalar.
Alguien me preguntaba, ¿por qué utilizas NPM y no utilizas JAN?
Y la pregunta podría ser contraria.
¿Por qué utilizas JAN y no utilizas NPM?
¿Sabes?
O sea, no entiendo estas preguntas.
Es muy extraña esa pregunta.
Pues igual de la misma forma que utilizas JAN porque, no sé, te gusta más.
Porque es que realmente son muy parecidos.
Y al final yo utilizo NPM porque ya viene instalado con Node.
Simplemente.
No creo que sea superior ni mucho menos.
Y en tema de diversidad más o menos ya van parejos.
JAN al principio era mucho más rápido.
Pero esas mejoras las trajo NPM también.
Si utilizo NPM es porque con Node ya te viene instalado NPM y así no tengo que instalar otro paquete.
Y como ya me funciona suficientemente bien NPM, pues utilizo NPM.
Pero no es por ninguna otra cosa.
El menos C, que me está preguntando gente, es para guardar la versión exacta de ese paquete.
Vale, pues ahora se supone que ya tenemos instalado todo esto.
Vamos a ver si esto sigue funcionando.
O ya solo puedo instalar esto a peta o algo.
Que esperemos que no.
Vale, está en blanco pero porque aquí...
Hola Twitch.
Vamos a poner esto.
Vale.
Muy bien, muy bien.
Pues nada, estamos empezando.
No os preocupéis que acabamos de empezar.
Hemos instalado las dependencias y ya está.
Vale, pues ahora que ya tenemos todo esto, vamos a Firebase.
Tengo que ir a Firebase a crear también mi pequeña aplicación.
Igual puedo utilizar una que tenga por aquí.
Tengo un montón, ¿no?
Tengo un montón.
Voy a utilizar la MNADEF esta.
Voy a utilizar esta MNADEF.
Luego miraré el tema de las configuraciones y todo esto.
Vale.
Aquí pone que tenemos que tener un archivo .inithauth.
Que tenga todo esto del init y no sé qué.
Venga, pues vamos a crear el initauth.
Que no sé si initauth.js.
Y esto deberíamos importar esto de aquí.
Y aquí nos da initauth.
Vamos a crear una función que va a llamar al init.
Y aquí le pasamos toda esta pedazo de configuración.
Todo esto.
Entiendo que hay cosas que no serán necesarias pasarle.
Pero bueno, en cookies veo...
Vamos a las cosas que son requeridas.
Por ejemplo, Login API Endpoint.
A ver la documentación de la config porque igual es más fácil aquí.
AuthPage URL.
Vale.
Esto sería el default URL no sé qué, no sé cuánto.
Hostia, pero me molaría ver cuál es el valor por defecto, ¿no?
Porque no aparece.
Dice opcional a no ser que utilices esto.
Vale, que esto lo veremos más adelante.
Pero esto básicamente sería la URL a la que quieres que vaya el usuario en el caso de que no tenga la sesión iniciada y le quiera redirigir a alguna página.
Y esto sería para lo contrario.
Si el usuario ya ha iniciado sesión y lo quiere redirigir a una página.
Estos serían los endpoints de Login y Logout.
Vale.
Tiene que estar...
Vale.
O sea que todo esto tiene que estar hecho.
Ok.
Muy bien.
Pues vamos a ponerlo.
Ah, mira.
Alguien ha sugerido una encuesta.
Que React, Svelte o Vue.
Venga, yo lo pongo.
Yo lo ponemos aquí.
Tres demonios.
Quiere saber si preferís React, Svelte o Vue.
React, Svelte.
Me encanta que no he puesto ni siquiera Angular.
Angular, jQuery.
Venga, yo pongo unos cuantos.
Ahí extras.
Y ahí...
Ahí tienen la encuesta.
Ahí tienen la encuesta.
La encuesta.
¿Qué usarías para crear estilos propios para usar en diferentes proyectos de React importándolo como si una lib se tratase?
Solo elementos.
No maquetación.
Solo elementos, no maquetación.
Pero como hablas de estilos propios para usar en diferentes proyectos, como que solo elementos, no maquetación.
A ver, seguramente diferentes proyectos de React.
Tendrías dos opciones.
Pues seguramente depende de cómo de grande es el proyecto.
Igual yo apostaría por CSS nativo.
Si...
Si es muy grande y tiene que pervivir mucho en el tiempo.
No utilizaría ninguna librería.
Intentaría utilizar CSS nativo o como mucho CSS modules.
Eso serían mis...
Yo intentaría usar eso.
No utilizaría hasta el component ni nada de eso.
Pero este soy yo.
Este soy yo.
Si fuese un proyecto que es rápido, que no tiene que durar mucho, pues entonces la cosa igual cambiaría.
Vale.
Vamos a poner esto.
La página...
Esto sería a donde iría cuando ya está logueado.
Esto si queremos que se loguee.
Login.
Vale.
Require, require.
Pues lo dejamos así.
El emulator, en principio, no lo vamos a usar.
Yo creo que no lo vamos a usar.
Así que esto lo dejamos así.
Esto lo copiamos ahora.
Y esto también.
De la configuración de Firebase.
Cookies.
Y esto, todo este tema de cookies.
Vamos a ver.
Porque aquí en cookies pone nombre de la cookie.
Vamos a llamarle miduCookieApp.
Las keys son necesarias a no ser que tenga sign a false.
¿Vale?
Las keys no pueden ser accesibles a través del cliente.
Vamos a poner un env local que vamos a necesitar.
Para que no sepa lo que es el archivo env, son para poner variables de entorno y puedes
tener diferentes entornos.
Vamos a poner local porque por ahora vamos a utilizar local.
¿Vale?
O sea, lo vamos a utilizar en local.
Pero bueno, más adelante, si lo queremos deployar, pues tenemos que hacerlo en diferentes
entornos de desarrollo.
¿Vale?
Entonces, decía por aquí que quería cookiessecret, current y previous.
Yo entiendo que esto es más como un nombre.
O sea, miduCookieCurrent y miduCookiePreviews.
Yo creo que van por aquí los tiros.
Si no, luego lo miramos.
Pero yo creo que es un stream, básicamente, para identificar esas dos cookies y ya está.
Este es el tiempo que la cookie va a ser válida.
Aunque ya os digo que no os lo he enseñado.
Esto lo he pasado muy rápido y no lo hemos leído.
Pero NextFirebaseSouth es una forma sencilla de utilizar la autenticación de Firebase en tu aplicación de Next.
¿Vale?
Y tienes diferentes estrategias, se supone.
Entonces, esto lo que hace es que sea simple poder utilizar la autenticación de Firebase con este proyecto.
Pero además, te va a hacer el refresh del token del usuario.
Y esto está genial.
Y tiene soporte client-side y server-side.
No lo he utilizado nunca.
O sea, puede ir todo mal.
Y lo descubriremos aquí.
No pasa nada.
Pero solo para que lo sepáis.
Lo mejor es que tú no te tienes que preocupar de gestionar los tokens, de iniciar la sesión.
De hecho, creo que hay que pegar unas líneas de código y ya está.
Y esto es lo bueno, ¿no?
Que al tratar todo esto también en server-side, pues cuando se haga el get server-side props de Next.js,
vamos a poder mirar si el usuario está registrado o no.
Y con un high-order component vamos a ser capaces de decirle, vale, pues esta página,
solo si el usuario está registrado la puede ver y todo esto.
Ok, muy bien.
Y además, cuando el usuario cierra la sesión, o sea, cuando cierra la sesión va a limpiar la cookie.
O sea, hace un montón de trabajo por nosotros, lo cual me parece fantástico.
Eso sí, fijaos que aquí ya te dice cuándo no usar este paquete.
Y esto siempre, esto me parece muy bien porque muy pocas veces se dice cuándo no tienes que utilizar un paquete.
Y es que es verdad, es que la gente se vuelve loca siempre a utilizar paquetes.
De hecho, antes me estaba preguntando a alguien, ¿por qué uno utiliza Ramda?
¿Y por qué sí que tengo que utilizar Ramda? Si es un coñazo Ramda.
Ramda, para el que no lo sepa, es para hacer programación funcional en JavaScript.
Pero a mí me parece innecesario, ¿vale?
O sea, de hecho, no solo me parece innecesario, sino que muchas veces me parece hasta odiable, ¿vale?
Yo me he encontrado proyectos que utilizan Ramda y aparte de tener la dependencia de Ramda que, si no recuerdo mal, no está mal lo que ocupa.
Bueno, 12Ks tampoco es tanto, tampoco es tanto, no nos vamos a engañar, tampoco es tanto.
Pero al final tienes un pseudocódigo porque todo tu código, según lo loco que te vuelvas, todo tu código es así, con Ramda, a saco.
A mí personalmente no me gusta, pero es súper válido.
Por ejemplo, esto sería para hacer if, if else, if else, no sé qué, no sé cuánto.
No sé, a mí me parece un poco innecesario.
Creo que JavaScript tiene programación funcional suficiente para no tener que ponerte con estas cosas.
Sí, lo hemos comentado antes, ¿eh?
NextOut es otra alternativa.
Si vemos que esta no funciona, pues utilizaremos NextOut, no pasa nada, ¿eh?
Lo que pasa es que NextOut como que tiene demasiada cosa.
Y prefiero este porque se enfoca en lo que justamente necesito.
Si por lo que sea este no funciona, pues nada, pasaremos a utilizar NextOut y volveremos a probar.
Ya está, pero primero vamos a intentarlo con este.
Si este da lo que queremos, pues yo ya estaré contento.
Pues eso es lo que os decía, que os dice cuándo no usar este paquete, por ejemplo.
Si solo lo vas a utilizar en el cliente, pues te dice, pues para eso mejor utiliza directamente el SDK.
O si tu aplicación necesita el usuario en SSR, vale.
Pues eso, que al final te dice que las pros es, bueno, pues que te quitarían la dependencia.
Pero la contra es, pues que hay mucho trabajo que tendrías que hacer tú manualmente.
Así que yo no quiero hacer trabajo manualmente, ya que tenemos este pedazo de librería.
Vamos a ver, eso sí, si hace lo que queremos.
Vale, vamos a ver, tengo que sacar las keys, así que me voy a poner por aquí un momento, ¿vale?
Voy a poner aquí antes.
Estoy haciendo auth para NextDS con Firebase.
Vale, voy a poner por aquí un momento.
Vamos a configuración del proyecto.
Vale, porque aquí en las keys, aquí en las keys tendríamos Firebase Private Key.
Esta es la que necesitamos.
Y la Private Key, si no me equivoco, se tendría que sacar de la cuenta de servicio.
Vale, cuenta de servicio.
Firebase, cuenta de servicio.
Creo que esto sí que se puede copiar, ¿no?
La cuenta de servicio, este, esto, esto sí que se puede ver.
Creo que sí que se puede ver.
O sea, creo que esto no pasa nada que se vea.
Vale, pues lo ponemos aquí.
El Project ID, hostia, un montón de cosas aquí, ¿eh?
Número del proyecto.
Nombre público.
¿Será esto?
Vamos a poner esto.
Yo creo que es esto.
Ahora lo que me falta es el Private Key.
The Private Key must not be accessible on the client site, ¿vale?
Me imagino.
Pero la Private Key creo que es en cuentas de servicio.
Creo que es por aquí.
Creo que es aquí, ¿vale?
Y creo que habría que generar una nueva tal, tal, tal.
Y entonces aquí en este service account, no sé qué, debería verse.
Vamos a ver.
Vamos a ver.
Voy a crear una nueva.
Generar clave.
Venga.
No se ve, ¿no?
A ver si la vamos a liar.
Voy a mover esto un momento también.
Para poner aquí la key.
Bueno, que si no...
Ah, y no, que verás que me lo abre donde no debe.
Verás.
Ah, no.
Vale.
Private Key.
Hostia, ¿es todo esto?
Joder.
La leche.
Hostia, ya no tengo claro que esto vaya a funcionar, ¿eh?
Pero bueno.
Private Key.
Private Key ID.
Project ID.
Hostia, ahora estoy dudando entre el Project ID, si es este o es directamente este.
Porque aquí me pone Project ID.
Luego client email, sí que lo tengo bien.
Client email, private, no sé qué.
Lo puedo volver a copiar.
Este sí que debería ser esto.
A ver.
Este.
Ah, y voy a probar.
Tengo por aquí una...
Tenía aquí una extensión.
Cloak.
Mira, tengo esta extensión de aquí.
Que se supone que te permite ocultar los secrets y todo esto.
Y no lo había terminado de...
Vale.
Cloud.
Vale.
Toggle secrets.
A ver si esto funciona.
Un momento.
Vamos a probar una extensión aquí en vivo.
Por primera vez.
Cloak.
Oh.
Qué chulo.
Qué chulo.
Fíjate.
Mira.
Aquí están mis secretos.
Ja.
Qué bueno.
No sé si es muy fiable.
¿Sabes?
No sé si en un momento dado esto, por lo que sea, los mostrará.
Pero están aquí.
No los podéis ver, pero están aquí.
Aquí están mis secrets.
Entonces, lo bueno de esto es que os puedo enseñar la pantalla de lo que estoy haciendo.
Podéis ver los secrets.
O sea, podéis ver los secrets que estoy tocando.
Pero no podéis ver los valores.
O sea, yo puedo ponerme aquí a escribir.
¿Ves?
Pero no vais a ver lo que estoy poniendo después.
¿Qué os parece esto?
Esto está súper...
Está bien esto.
No lo vemos.
Bueno.
Está bien.
El John Papa.
Esta es que las tiene todas.
Vale.
Yo creo que he hecho bien en esto.
Creo que...
Creo que he hecho bien con este tema.
Ya veremos si no.
Fue una cuenta de servicio.
Vale.
Entonces, el Firebase Private Key se supone que es esto.
Eso se supone que ya está bien.
Database URL.
Vale.
Firebase.
Vamos por aquí.
Firebase.
Crear base de datos.
Vamos a ponerlo en modo producción directamente.
La saco.
Y lo vamos a poner en Europa West.
Habilitar.
Venga.
Ha ganado React la encuesta.
Ha ganado React la encuesta.
Vamos a ver.
Con 88 votos.
Segundo lugar se ha quedado Vue.
Tercer lugar Angular.
Cuarto jQuery.
Y quinto Svelte.
Ay.
Y me he cobrado la hidratación.
Safe75 ha contribuido con 3.700 puntos.
Porque creo que quería que ganase React.
O sea, él ha dicho.
No, yo quiero que gane React.
Sí o sí.
Te puedes equivocar en una letra.
Sí, no.
Totalmente.
En cualquier momento probablemente aparecen de la nada.
Totalmente.
También lo creo.
¿Tú lo ves?
No, yo no lo veo.
Ya sería.
O sea.
No, no.
Lo que pasa es que...
Sí, tengo que volver a ejecutarlo.
Lo que pasa es que lo puedo copiar.
Yo podría tenerlo en otra pantalla.
Hacer un control C.
Y aquí entiendo que copiarlo.
Y no debería verse.
Entiendo.
No lo sé.
Pero veis.
Yo aquí he copiado una pedazo de cosa.
Y aquí no veo que se vea.
Oye.
Pues no está mal la idea esta.
Firebase, ¿cuánto está cobrando?
Por ahora gratis.
Por ahora gratis.
Vale.
Por aquí ya se ha creado esto.
Y en la descripción general vamos a hacer...
¿Cómo era esto?
Web.
Esto aquí.
Hostia.
Registrar web.
Vamos a poner menea dev.
Configura hosting.
No, no quiero.
Vamos a conseguir el SDK aquí y todo esto.
Esto sí que puede ser...
Esto sí que se puede ver.
No pasa nada.
Porque esto total, esto está en JavaScript.
Así que tendríamos la API key, que es esto.
La domain.
Vale.
Estas dos cosas.
Estas dos cosas aquí.
Project ID, que es menea dev.
Project ID.
Menea dev.
Vale.
Y, ostras, lo que tengo dudas es del database URL.
Porque veis que aquí no aparece.
Vamos a ir a la consola.
Firestore.
Database.
Database URL.
Estoy ahí.
Database URL.
Vamos a ver si sale por aquí.
Configuración del proyecto.
Database.
Database.
Hmm.
Database URL.
Cuenta de servicio no será.
Igual es la de real time.
Que en el caso que la configure sí que tiene una URL.
¿Qué estamos haciendo?
No empezó hace mucho.
Estábamos intentando conseguir una autenticación de Firebase en nuestra aplicación de Next.
DS.
Y todavía estoy configurando toda la configuración de Firebase.
Y justo la he terminado, pero me falta el database URL este.
Que no sé.
Database URL.
Firebase.
Que no sé de dónde sacarla.
O sea, porque me parece a mí, me da la sensación, que esto, esto es solo para, no es para Firestore,
sino que es para la real time, me parece a mí.
Entonces, no vamos a utilizar la real time, por lo tanto, yo creo que no es necesario.
Creo que es para eso.
La DSK para real time database, ¿veis?
Tendrá el formato para encontrar la sección real time.
Tendrá formato para base de datos en todas las ubicaciones.
Me da a mí la sensación que no, que es eso.
Que no, que no es necesario para Firestore.
Si alguien sabe algo, que lo comente.
Porque si no, luego nos encontraremos el problema.
Así que por ahora lo voy a quitar.
Y esto también lo voy a quitar, porque yo creo que no es necesario.
Ale, muy bien.
Vamos a volver al localhost.
Crea una nueva colección.
Allí te bota la URL de la API.
Una nueva colección, ¿vale?
Vamos a poner una nueva colección.
Vamos a ponerle posts, por ejemplo.
Y tú, tú, tú, una idea.
A ver.
Timestone reference.
No es nada.
Un string.
Vamos a poner un 2-3 por ahora.
Vale, ID automático.
Vale, pues una de ID.
Title.
Este es el primer post.
Venga, guardar.
Sí, pero yo no veo que...
De la URL, ¿no?
¿Dónde encuentro la private key y el client email?
La private key la tienes que...
Aquí.
Fíjate que tienes una ruedecita.
Te vienes para aquí.
Configuración de proyecto.
Cuentas de servicio.
Y aquí, una vez que te crees la cuenta de servicio,
puedes darle a generar nueva clave privada.
Cuando le des aquí, te va a descargar un archivo.
Y al descargar ese archivo, lo vas a tener.
Ah, y en el icono de la casa.
¿Vale?
En el icono de la casa del Firestore.
¿Vale?
Aquí en el icono de la casa.
No, pero tampoco.
¿No?
¿Qué icono de la casa?
¿Qué icono de la casa?
No, aquí tampoco sale el icono de la casa.
¿Ves?
No aparece el...
Que yo creo que no es necesario.
Si no, lo veremos.
Ya petará alguna cosa.
Ya está.
Bueno, por ahora ya tenemos esto.
En editar.
Editar.
¿Ves?
Tampoco.
Esto sale en la raíz.
No sale ahí la API.
El database URL.
Vale.
Ok.
Vale.
No, reglas.
No, reglas serán todo lo de editar reglas y todo esto.
Pero tampoco sale...
No sale.
No sale el database URL.
No hay database URL.
Que si no, lo veremos.
Pero bueno, igualmente hasta ahora tampoco será muy importante.
Vale.
Pues todo esto yo lo creo...
Creo que lo podemos cerrar.
Puede ser que sea lo mismo que Storage Bucket.
No lo descarto.
Eso sí que puede ser.
A ver.
Database URL.
Mira, aquí.
A planeoje en el database URL.
¿Qué tiene?
¿Qué tiene?
Define the database and mean config credentials, but it cannot be defined the client site and should leave in Excel?
Vale.
Esto sí.
Esto lo tengo claro.
Pero no pone nada.
Inicial.
Credential.
Esto lo tenemos.
Database URL.
¿Me tiene esto?
A ver si...
Un momento.
Un momento.
Un momento porque me he descargado las private keys hace un momento.
Yo que sé.
A ver si sale ahí.
Y yo estoy aquí dándole vueltas al...
Client.
No.
Aquí tengo type.
Tengo project ID.
Tengo private key ID.
Tengo private key.
Client email.
Que se lo he puesto.
Auth URI.
Token URI.
Auth provider.
Y...
No.
O sea, aquí no sale el database URL.
O sea que...
¿Puedes pasar el repo?
Claro que sí.
Que lo pasa, hombre.
Ahí lo tenéis.
Bueno.
Por ahora le vamos a adelantar.
O sea, vamos a probar.
Y si no, nos daremos cuenta de qué es lo que le pasa.
Si tiene algún problema y tal.
Vale.
Ya tenemos la configuración.
Lo que vamos a hacer es exportar este método.
Export default init auth.
Vale.
Ya tenemos nuestro archivo.
Dice set the private environment variables.
Vale.
Esto lo he puesto ya.
Private private key.
Y si hace emulator no tenemos.
Vale.
Pues ya nos vamos.
Dice a la página de app.
A página app.
Esta.
Vamos a importar el init auth.
Este.
Que acabo de crear.
Vale.
Y dice que ejecutemos aquí init auth.
De una.
Y luego...
Ya está.
No habría que hacer nada más.
Hasta aquí.
A la app.
Luego dice que hay que crear dos endpoints.
Uno para login.
Y otro para logout.
Para hacer el set out de las cookies.
Vale.
Esto sería en pages api.
Tendríamos aquí login.js.
Esto lo podéis configurar.
Porque antes lo hemos puesto aquí.
¿Veis?
Los endpoints lo podéis llamar como queráis.
Pero como lo hemos puesto ya.
Como se llamaban.
Pues nada.
En api.
Login.
Y esto.
Pues nada.
Importar.
Set out cookies.
De next five days auth.
Esto es un método que te da esta librería.
Para setear las cookies.
Luego hay que importar el init auth que hemos hecho antes.
Oye.
Que bien funciona últimamente lo del import.
Estoy hasta sorprendido de lo bien que funciona.
Brutal.
Y entonces.
Y hay que ejecutar el init auth.
Me sorprende lo del init auth que se ejecuta en la raíz del fichero.
Esto es súper raro.
Quiero confiar.
Vale.
Para el que no sepa lo que hace esto.
Os comento.
¿Vale?
Mira.
Aquí en páginas.
En next years.
Tú tienes una carpeta api.
Donde puedes ir creando endpoints.
Entonces.
Ahora mismo.
Podríamos tener.
En localhost 3000.
Api.
Hello.
Hello.
Vale.
¿Veis que está devolviendo esto?
¿Por qué me devuelve esto?
¿Esto es todo donde sale?
Este api barra hello.
Esto viene de este fichero.
¿Ves?
Api barra hello.
Hello.js.
Y esto lo único que hace.
Es que tienes que exportar un método.
Que recibe dos parámetros.
La request y la response.
Entonces con la response le dice.
Vale.
La respuesta tiene un status code de 200.
Y devuelve un json.
Que es un objeto con name.
John Doe.
Por eso cuando entro.
Pues sale esto.
Vale.
Este no lo necesitamos.
Así que este.
Fuera.
Fuera.
Fuera.
Fuera.
Pero este de login.
Pues estamos haciendo algo similar.
Aquí.
Estamos creando.
Esto es.
Porque nos ha dicho la documentación.
Que lo tenemos que hacer.
Pero hemos creado aquí un método.
Handler.
Que es exactamente lo mismo que hemos visto antes.
De hecho esto.
Lo podríamos hacer.
Incluso aquí.
No sé.
Podríamos hacerlo así.
Y sería lo mismo.
Y a lo mejor ahora lo veis más claro.
Que no esto del handler.
Que es un poco raro.
Vale.
Hacemos un export default.
De una función asíncrona.
Intentamos hacer.
Hacer un set out cookies.
Pasándole la request y la response.
Este método no es nuestro.
Este método es.
Del next Firebase out.
Y si hay algún problema.
Pues te da un status code de 500.
Con un json que te dice.
Oye ha habido un error.
Que no me esperaba.
Y si todo ha ido bien.
Pues nada.
Te devuelve un 200.
Con un success.
Y esto.
Lo que va a hacer.
La magia de esto.
Está en este método.
Porque este método.
Lo que va a hacer es.
Añadirle la cookie al usuario.
En el caso de que todo haya ido bien.
Y esto mismo.
Pues nada.
Con el logout.js.
Solo que será un pelín distinto.
Me imagino.
Este.
Esto es una extensión.
Esto de que te lo formate.
Que además es súper útil.
Y os recomiendo un montón.
Es una extensión.
Que se llama json formatter.
Y.
Y os recomiendo mucho.
Mucho.
Podéis verlo en row.
Que es más o menos.
Como se vería normal.
O en parse.
Y de esta forma.
Pues podéis.
Además.
Cuando tienes arrays.
Y cosas así.
Pues es súper útil.
Vale.
Y el de logout.
Que como veis.
Es muy similar al que hemos hecho.
Por no decir igual.
Solo que.
En lugar de llamar.
Al set out cookies.
Pues llama al unset.
Perfecto.
Esto bien.
Esto bien.
A mí me gusta más.
No sé por qué.
Que esto.
A mí me gusta más.
Async function.
Me gusta más así.
Ya que es.
Por defecto.
A ver.
Que además.
Se le puede poner aquí.
El nombre de la función.
Que no hace falta.
Ni siquiera que sea anónima.
Pero.
Crear una constante.
Para luego hacer un export default.
O se me escapa algo.
O.
Pero yo diría.
Que esto es un poquito más.
Bueno.
No sé.
A mí me gusta más así.
Aquí cada uno.
Lo que quiera.
Gracias.
Cristian.
Yo soy fan de tu comentario.
¿Qué te parece?
Vale.
Y dice.
Finalmente.
Vamos a usar.
The authenticated user in a page.
Claro.
Imaginad.
Todavía no he iniciado sesión.
Pero ya deberíamos ser capaces.
De saber si un usuario.
Ha iniciado sesión o no.
Vamos a crear esta página demo.
A ver si hasta aquí.
Podemos.
Vale.
En páginas.
Podemos crear aquí.
Demo.js.
Y venga.
Ahí ya saco.
Un montón de cosas.
Aquí viene un poco el tema.
A ver si hemos sido capaces.
De hacerlo.
El private key.
Todo esto.
Vale.
Esto está petando.
De cookies max age.
Tiene que ser menos de dos semanas.
Fíjate.
Interesante.
No pasa nada que la cookie dure menos de dos semanas.
Porque como os he explicado al principio.
La cookie que pongamos.
Mira.
Vamos a poner aquí 12 días.
Que es como estaba antes.
¿Vale?
¿Vale?
Tu email is unknown.
Esto está bien.
¿Por qué?
Porque yo ahora mismo el usuario no está logueado.
O sea.
Si vamos a demo.
Vamos a ver un poco lo que hemos pegado aquí.
Y vamos a ver lo que hay.
¿Vale?
Venga.
Primero importamos React.
Perfecto.
Esto no es necesario.
Fuera.
En next year no hace falta importar React.
Si tienes que importar un hook.
Sí.
O sea.
Si tienes el useState.
Pues pondría useState.
From.
React.
Y tal.
Pero React.
De React no hace falta.
Aquí estamos importando un hook.
Y dos high order components.
Que no sé si sabéis lo que es un high order component.
¿Sabéis lo que es un high order component?
¿Qué decís?
Clase.
No os escucho.
Bueno.
Me lo decís ahora.
Un hook.
Que es este.
Use out user.
Que se supone que es el que nos va a decir.
Nos va a devolver.
Esto que sean mayúsculas.
Un poco raro.
Yo aquí pondría en minúscula.
Un poco raro esto.
Sí.
No.
No.
Sí.
Sí.
Bueno.
Lo explico.
¿No?
Para los que han dicho que no.
Ahora os lo explico.
Primero importamos un hook.
Que al ejecutarlo.
Nos va a dar un objeto.
Con toda la información.
De si el usuario.
Está logado o no.
Y si está logado.
Pues vamos a tener su email.
Seguramente su username.
Diferente información.
Eso por un lado.
Y estamos importando aquí.
Dos.
High order components.
¿Vale?
Without user.
Y without user token SSR.
¿Qué es un high order component?
Un high order component.
Es una función.
Que.
Le tienes que pasar.
Bueno.
Es una función.
Que al ejecutarla.
Devuelve otra función.
Esto depende.
Pero bueno.
Imagínate.
Es una función.
Que le pasas como parámetro.
Un componente.
Y entonces.
Lo que hace.
Es.
Añadirle algún tipo de funcionalidad.
A ese componente.
En este caso.
Este without user.
Fíjate donde lo estamos usando.
Estamos usando aquí.
¿No?
Lo que hacemos.
Es.
Exportarlo por defecto.
Y hacemos un without user.
Pero fíjate.
¿Ves?
Esto es lo que te decía.
En este caso.
Es un método.
Que al ejecutarlo.
Te devuelve.
Una función.
Que recibe como parámetro.
Un componente.
¿Por qué se hace esto?
Esto se hace así.
Porque seguramente aquí.
Le puedes pasar una configuración.
¿Vale?
Pero normalmente.
Un higher the component.
Es una función.
Que recibe como parámetro.
Un componente.
Y devuelve.
Otro componente.
Pero con.
Nueva funcionalidad.
Es un higher the component.
¿Vale?
Por eso lo estamos utilizando aquí.
En este caso aquí.
Este sí que me tiene un poco más.
Esto no sería un higher the component.
Mira.
Este sí que sería un.
High order.
High order component.
¿Vale?
Porque es una función.
Que devuelve.
Un componente.
Y este sería una high order function.
Porque es una función.
Que devuelve.
Una función.
¿Vale?
No sé si se queda ahí claro.
Pero.
Lo que haría la primera.
Al without user.
Es que tú.
Podrías envolver.
Un componente.
Y decirle.
Este componente.
Tiene.
Que tener.
Sesión.
Para.
Poder visitarlo.
Y aquí le podríamos pasar.
Pues diferente configuración.
Por ejemplo.
Le podríamos decir.
Que cuando.
¿Vale?
Cuando no.
No tiene.
Cuando no tiene.
La sesión iniciada.
Before init.
Aquí.
Le podríamos decir.
Creo que aquí.
Le podríamos decir.
Que.
Se redirija a otra página.
Y es lo que vamos a hacer.
¿Vale?
Vamos a decirle.
Que se redirija a otra página.
Ta ta ta.
Without user.
Aquí.
Out action.
Out action.
Vale.
Esto hay que importarlo.
De aquí.
Out action.
Punto.
Y le decimos.
Redirect to login.
Cuando no ha iniciado sesión.
Lo que queremos que haga.
Es que redirija al login.
Entonces.
Si ahora guardo los cambios.
Y me voy a la página de demo.
Vale.
Podemos ver.
Que ha pasado algo.
¿Vale?
¿Ves?
Me ha intentado redirigir a.
Out.
Pero no existe esa página.
Vamos a ir aquí.
Vamos a crear.
Out.js.
Y vamos a poner.
A ver.
Ir.
No.
Bueno.
Import.
Export default.
Function.
Out.
Y lo que vamos a hacer aquí.
Te tienes que loggear.
¿Vale?
Por ahora le ponemos esto.
Al menos para que.
¿Vale?
Te tienes que loggear.
Si intento volver para atrás.
Y voy a demo.
¿Ves?
Ya me redirige al te tienes que loggear.
Lo que yo creo que está pasando aquí.
Porque la pregunta sería.
¿Por qué hay dos?
¿No?
¿Por qué hay uno aquí.
Without user.
Que lo que hace es devolver otro componente.
Y aquí hay otro que es.
Without user token.
SSR.
Pues que este es el que funciona.
En server server rendering.
Y este es el que funciona.
En client server rendering.
Por lo tanto.
Esta redirección.
Ocurre en el cliente.
¿Qué quiere decir que ocurre en el cliente?
Pues que vamos a ver.
Si yo hago aquí un preserve log.
Y me voy a demo.
¿Vale?
¿Vale?
No.
Ah, vale.
Aquí.
Pues vamos a ver.
Como yo he ido primero a demo.
Y luego.
Ha redirigido.
¿Ves?
He visto aquí demo.
Y después.
Ha redirigido a out.
Esto no está mal.
No pasa nada.
Pero lo más ideal de esto.
No sería hacerlo en el cliente.
Sería hacerlo en el servidor.
Así que esta configuración.
Que le hemos pasado aquí.
Se la podríamos pasar.
Al without user token.
SSR.
Que fíjate.
Que devuelve.
Es lo mismo.
¿No?
Get server side props.
Y aquí tienes.
Una función.
Que aquí irían.
Los.
Las opciones.
Que recibe.
Y aquí.
Es donde creo.
Que deberías poner.
El get server side props.
O sea.
Aquí tendrías.
A ver.
El get server side props.
Es como era la.
Ta ta ta.
Get server side props.
Get server side.
Context.
Vale.
Pues yo creo que aquí.
Recibe context.
Y aquí podrías hacer.
Lo que.
Lo que quisieses.
Por ejemplo.
Vamos a devolver.
Props.
Y una ribacía.
Esto en el contexto.
Tampoco lo estamos usando.
O sea.
Que podemos dejarlo así.
Y esto.
Lo que debería hacer.
Es una redirección.
Desde el server side rendering.
Si ha funcionado bien.
Vamos a.
Vamos a ir.
A demo.
Ahora voy a intentar ir a demo.
Y vamos a ir a la network.
A ver.
Si funciona correctamente.
Vale.
Fíjate que ahora.
Si que ha hecho.
Aunque sale demo.
Esto es porque.
Le he puesto un preserve log.
Y por eso lo vemos los dos.
Ah no.
Si de hecho no ha hecho nada.
He visto este logout.
Hmm.
Hace este logout.
Pero no hace.
No hace la redirección.
Espérate.
Ah.
Claro.
Ya sé por qué.
Porque la.
La configuración no es la misma.
Este.
When.
When.
Un out.
Before in it.
Esto no es necesario.
Esto tiene sentido en el cliente.
Pero.
En el servidor.
Esto es.
When.
Un out.
Directamente.
No es ni before.
Ni after.
Es cuando no tienes la sesión iniciada.
Entonces.
Redirige.
Ya está.
A ver.
Ves.
Ves ahora sí.
Y fíjate.
Como aquí.
Si que se ve.
Que ha sido a demo.
Pero luego.
Te he mandado.
Justamente donde quería.
Y con un 307.
Que es una redirección temporal.
O sea.
La redirección ahora.
La hemos hecho en el servidor.
Y antes.
La estamos haciendo en el cliente.
No sé si se ha visto claro.
Si queréis.
Lo volvemos a mirar.
Pero.
Básicamente.
Esto sería.
Por cierto.
Esta es una herramienta.
Que es.
Increíble.
No le pongo nota.
No le pongo.
Es que a mí no me gusta ponerle nota a las cosas.
Porque si le pusiera nota.
Serían 10.
Pero es la mejor herramienta de Mac.
De portapapeles de universo.
La mejor.
Sin exagerar.
Pero mira.
Para que veáis lo del cliente otra vez.
¿Vale?
Me voy a demo.
Me voy a demo.
Limpio esto.
Me voy a demo.
Pum.
Fíjate.
Me voy a demo.
Y en demo se ha quedado.
No está haciendo ninguna redirección.
En el servidor.
Y ha cambiado la URL.
Todo está ocurriendo en el cliente.
Por lo tanto.
Status code.
Siempre 200.
Si lo hacemos en el servidor.
Que creo que es una mejor señal.
¿Vale?
Porque el cliente siempre es un 200 y tal.
Creo que lo ideal en este caso sería hacerla en el servidor.
Que esto es uno de los típicos problemas que no se puede hacer.
Y esto no lo está haciendo.
Sería ponerlo aquí.
Lo quitamos de aquí.
Guardo los cambios.
Ahora me voy a demo.
Voy a quitar esto.
¿Vale?
Limpio la network.
Me voy a demo.
Me voy a entrar.
Y ves.
¿Qué pasa?
Ha entrado a esa ruta.
En el servidor se ha dado cuenta que no tiene la sesión iniciada.
Y ha dicho.
Che.
Fuera de aquí.
307.
Y ya está.
¿Cómo se llama la app del portapapeles?
Buena pregunta.
Es cara, ¿eh?
No os quiero engañar.
No os quiero engañar.
Es cara.
Coño, ¿cómo se llama?
Paste.
Paste.
Paste.
Es muy, muy, muy, muy, muy buena.
Lo cual es una putada porque me encantaría deciros.
Espérate.
Que os doy un...
¿Cómo se llama esto?
Un enlace de estos para que yo me lleve dinero.
Pero no.
O sea, no es que yo me lleve dinero.
O sea, no me llevo para nada de dinero.
No, este atajo, tened en cuenta que solo está para Mac.
Solo está para Mac esta.
Pero me encantaría pasaros un enlace y deciros.
Buah, es que registraros, comprarla, que no sé qué.
Pero no.
O sea, os la recomiendo porque de verdad es genial.
Y de verdad, esto no me lo comparéis a la de Windows porque no es...
Windows lo hace grande con Windows.
Pero no es lo mismo.
Pero es que fíjate lo que hace.
O sea, es que está genial.
Mira, te pega un enlace.
Te pone ahí el enlace súper genial.
Texto, pues un texto.
No solo enlaces, sino archivos, imágenes.
Es brutal.
No he visto la de Huawei.
Igual la de Huawei.
Además tiene un buscador.
Tú puedes buscar.
¿Ves?
Tienes un buscador.
Lo puedes poner por colores, categorías.
Es que es tremenda.
Es tremenda.
¿Ves?
Puedes buscar en tu correo.
Es muy, muy, muy, muy brutal.
Lo malo.
Ah, mira.
Snippets de código y todo.
Y además, si tú a veces pegas...
Bueno, de hecho es que lo habéis visto.
Ah, no.
Aquí no.
Pero hay veces que puedes tener snippets de código y tenerlos ahí y buscarlos directamente.
No sé.
Está genial.
A mí me gusta un montón.
Se sincroniza con el móvil también, si quieres.
Está muy chula.
Lo malo, pues que es cara.
Ahí está.
Es cara.
No os voy a engañar.
Iba a decir, no, está tirada.
No, es cara.
Si no te paras a mirarlo, ¿cuándo vas rápido?
Hombre, no te creas.
Muchas veces estoy aquí, me pongo a buscar ahí.
Ostras, que...
O a veces que he perdido algo.
¿Ves?
Y está genial que te dice de dónde la has copiado.
O sea, es que...
No sé.
Está brutal.
Está brutal.
Entonces, client rendering de W200 y server 307.
Efectivamente.
Desde el servidor, pues estamos haciendo el 307.
Estamos haciendo una redirección, como tiene que ser.
Vale.
Hasta aquí bien, pero ahora el problema, problema entre comillas que tenemos,
es que esta herramienta, bueno, esta librería, lo que nos da,
hasta ahora ha sido toda la gestión de saber si la sesión de Firebase está abierta.
Pero lo que nos falta sería iniciar la sesión.
Bueno, para eso, vamos a ir a saco y vamos a utilizar, seguro que lo ponemos aquí.
Hay un Firebase UI, Firebase UI, UI, Firebase, ¿cómo es?
Firebase UI, GitHub, web.
Esto creo que es.
Hostia, tres años.
Tres años.
Ah, no, pero eso...
Vale, instalación.
A ver si somos capaces de instalar esto.
Firebase UI, web.
A ver si es esto.
Firebase UI, web.
Oye, pues qué raro.
Pensaba que aquí explicarían también limitation, no sé qué.
Ta, ta, ta.
Troubleshooting.
Básicamente, lo que hay que tener en cuenta es que esto está bien para la sesión,
pero que no te hace el...
¿Sabes?
No te hace la UI y todo esto.
Entonces, eso es lo que necesitamos ahora.
Justamente que nos haga la UI.
Pensaba que habría algún...
Igual hay una demo, ¿no?
Y en la demo sí que hace el...
Get Firebase up.
Ah, mira, ¿ves?
No probé...
O sea, justamente el que he encontrado.
Firebase UI web.
Vale.
Pues eso.
Vale.
Vamos a instalarlo.
Firebase UI.
Venga.
Firebase UI.
Vamos a tal, tal.
Firebase UI.
Firebase UI.
Using.
No sé qué, no sé cuánto.
Hostia, Bower.
Pero si esto ya está eliminadísimo, Bower.
¿Qué me estás contando?
Venga, vamos a probar a hacer esto.
Firebase UI.
Firebase también habría que importarlo.
Me queda claro.
Sí, Firebase también habría que importarlo.
Firebase, Firebase, Firebase.
Hostia, me doy dos ejemplos.
Firebase UI NextDS.
Web React.
¡Ostras!
Hostia, pero cuatro años, tres años.
Ah, bueno.
Aquí parece que sí hay ejemplos de hace poco.
Firebase UI Auth.
Vamos a ver este.
Using style Firebase Auth.
Configuración.
Inicializar aplicación.
Lo que tengo dudas es si lo de inicializar la aplicación lo vamos a insertar.
UI config.
No sé qué.
Style Firebase Auth.
Es que hacer nosotros desde cero esto es un poco...
Ah, mira.
Server Render React y Firebase Web App.
Mira, esto es lo que estamos haciendo nosotros.
Esto es lo que estamos haciendo nosotros.
Lo que pasa es que lo han hecho de otra forma, ¿eh?
Ta-ta.
React Firebase.
Out.
No sé qué.
No sé cuánto.
No, yo solo lo he probado aquí.
Bueno, pues nada.
Vamos a probar este.
Vamos a probar este.
A ver si lo podemos utilizar.
Firebase.
No sé qué.
Ta-ta.
Venga.
Lo que pasa es eso.
Lo de Firebase yo no tengo muy claro que sea necesario.
O sea, claro, lo que podemos hacer por aquí.
Igual que hemos hecho aquí en la demo.
No.
Vale, a nivel de app ya se hace el initAuth.
Entonces, yo entiendo que no hay que inicializar otra vez la aplicación.
Entiendo yo.
Por lo tanto, ya en Auth, este config, initialize app, eso no hace falta.
Creo yo.
Creo yo.
Aquí el UI config, esto sí que tiene que ser necesario.
¿Vale?
Vamos a ponerlo por ahí.
Pop up.
Sign in.
Cuando haya ido bien.
Director after sign in.
Vale.
Vamos a ponerlo aquí.
You can provide sign in success.
Sign in.
Vamos a ver a una cosa.
Porque aquí tiene una demo.
Vamos a mirar la demo un momento.
Sí, el example app.
A ver cómo la han hecho ellos.
Porque igual la han hecho más fácil.
Hola, Damián.
¿Cómo estás?
Hola, Leito.
¿Cómo estáis?
Vamos a ver cuál ha utilizado esta gente.
Esta gente ha utilizado React Firebase UI.
Pues venga, vamos a utilizar Firebase Server UI y ya está.
No nos vamos a complicar.
¿Cómo han hecho esto?
Auth, Auth.
Este entiendo que es el de los estilos.
Sign in.
On the client side.
¿Ves?
Cuando está autenticado.
Si no, return null.
Si no, after unit.
Render.
Firebase out.
En los componentes, Firebase out.
Venga.
Vamos a ver su componente Firebase out.
Y este es el que nos vamos a copiar.
¡Pero saco!
¡A saco!
Porque este es el tema del IOI.
Vale.
Importa Firebase, Firebase out.
Vale.
Me parece bien.
Firebase out.
El tema de estilos, entiendo que lo hace por otro lado.
Me lo voy a copiar.
Claro.
Note that next Firebase out in its Firebase for us.
So we don't need to.
Vale.
Exacto.
Eso es lo que justamente estaba antes comentando.
Lo que no era necesario que nosotros inicialicemos otra vez Firebase.
¿Vale?
Dice, sign in flow, sign in options.
Vale.
Con el email provider por ahora.
Si ha ido bien, se va a la home.
Credential helper, no sé qué.
Callback.
Dice, no hagas automáticamente la redirección.
Vale.
Claro.
Esto es lo que yo tenía curiosidad, ¿no?
Porque si haces tú la redirección, si tú le dices que vaya a la redirección a algún sitio,
¿cómo sabe él que tiene que ir a la API que hemos creado antes, API login, para meter la cookie?
Pues claro.
Por eso te hace, te dice esto.
Te dice, callbacks.
Sign in success without result.
Y te dice, false.
¿Vale?
Te dice, no lo hace automáticamente.
Esa es la aplicación que quería y que necesitaba y que quería.
Do not ssr Firebase UI because it's no support.
Vale.
O sea que, básicamente, el Firebase Auth no se puede, este Firebase UI, no se puede renderizar en el servidor.
Bueno.
No hay problema.
No importa.
Así que lo que hacemos aquí es crear un estado que empieza por false y que creamos un efecto que cuando se monte, pues lo pasamos a true.
Ya está.
Simplemente.
Este type, esto, yo no sé.
Esto yo creo que no es necesario, pero bueno.
O sea, los efectos, bueno, a día de hoy, claro.
A día de hoy los efectos solo se pueden ejecutar en el cliente.
Si esto va a cambiar en el futuro, que no lo sé.
Puede ser.
En React 18.
No creo.
No habían dicho nada de esto.
Style Firebase UI.
Ah, coño, pero aquí esta gente ha utilizado este.
Vale.
Este es justamente el que hemos instalado.
React Firebase UI.
Vale.
Yo he tenido problemas con los efectos en el server y PETA.
Sí, tú dices.
Hostia, no sé.
A ver.
A no ser que dentro hagas algo raro.
Por eso lo de si existe Windows.
Pero es que no.
Lo que hace dentro de un efecto solo se ejecuta en el cliente.
No debería ejecutarse en el servidor.
A no ser que se me escape algo, vaya.
Pero no debería.
Vale.
Entonces, render out.
Entonces esto.
Firebase out.
No sé qué.
No sé cuánto.
Bueno.
Vamos a ver cómo queda esto.
Si es que queda de alguna forma.
Vale.
Is not defined.
Style Firebase out.
Vale.
¿Por qué no lo he importado?
De React Firebase UI barra Style Firebase out.
Vale.
Ahora sí que lo estamos importando.
Singing with email.
Venga.
Wilkio arroba general punto com.
Something went wrong.
Bueno.
Pues empezamos bien.
A ver.
400.
Configuration not found.
Es que a mí me parece.
Además esto lo comentaban aquí.
Este configuration not found.
O cómo era esto.
Decía.
A ver un momento.
Que el que he cerrado.
Era el que.
No.
No.
No.
Es el que queremos.
Esto fuera.
Creo que es el private key.
Que he hecho antes.
A ver.
Vamos a cerrar esto.
Lo vamos a volver a abrir.
Por si acaso.
Papá.
Vale.
Vale.
Vale.
Vale.
Me da.
Me da la sensación.
Que el tema.
Es que.
El private key.
Como está puesto.
No está bien del todo.
Me parece a mí.
Configuration not found.
Vale.
Tenemos aquí.
En init out.
La API key.
Bueno.
Pero esto.
Debe ocurrir.
No.
No.
Claro.
Pero esto debe ocurrir.
Solo en el.
En el cliente.
API key.
Project ID.
Database URL.
Messaging.
Storage bucket.
A ver.
Me lo voy a copiar todo.
No vaya a ser.
Porque.
Es verdad que.
Antes.
Cuando estaba en Firebase.
Me he copiado lo que me ha dado la gana.
O sea.
Me he copiado tres cosillas.
Y a lo mejor deberíamos copiarnoslo todo.
Aquí en menea dev.
Menea dev.
Esto.
La web.
Aquí.
Cloud messaging.
Agrega una app.
Todo esto.
A ver.
Pero.
Menea dev.
Es que todo lo demás.
Yo creo que no es necesario.
Pero bueno.
Vale.
Intento dos.
Va.
Y aquí también.
En el.
Auth.
Ta ta ta.
Provider.
Require display name.
Crenshaw helper.
A ver.
Aquí no hay que pasarle nada.
Firebase out.
Esto se pasa aquí.
Venga.
Intento.
Vamos a probar otra vez.
Nada.
Igual.
Aquí he visto algo sobre esto.
El trouble shooting.
Puede ser que he visto algo.
Some settings should not be available.
No.
Esto no lo hemos visto.
Invalid custom token.
Esto tampoco.
Pues no sale nuestro error.
Nos han engañado.
Nos han engañado aquí.
No sale nuestro error.
Tanto trouble shooting.
Bueno.
Vamos a buscarlo.
Configuration not found.
Firebase.
Ah.
Vale.
Espérate.
Claro.
Es que a lo mejor soy yo.
Que no hay.
Espérate.
En autenticación.
Yo no he activado los.
Claro.
¿Ves?
Está inhabilitado.
Es que lo tendría que habilitar.
Permite a usuarios si registran su dirección de correo electrónico o contraseña.
Nuestros SK también proporcionan verificación de correo electrónico o recuperación de contraseña digital.
¿Acceso sin contraseña?
¿Esto se puede?
¿Requiere realizar más pasos de configuración?
Vaya por Dios.
Bueno.
Vamos a dejarlo por ahora sí.
Pero es que no lo he activado.
O sea que pueden ir por aquí los tiros.
Dominios autorizados.
Localhost.
Menea.
Una cuenta por dirección de correo electrónico.
Vale.
¿Puede ser que vayan por aquí los tiros?
¿Pudiera ser?
Vale.
Hemos avanzado.
Hemos avanzado.
Vamos a poner Wilkio.
Que es mi otra cuenta.
Y vamos a poner aquí.
Vamos a poner.
Twitch.
De password.
Vale.
Save.
Vale.
Guardar.
Pero fíjate.
Que se me ha quedado en el out.
Este.
El cabrón.
A ver.
Si voy a demo.
No.
Me lleva a out.
¿Por qué?
Vale.
Al menos ya se ha registrado el usuario.
Eso bien.
Registrar.
Se ha registrado.
Este out.
Esto sería.
Provider.
ID.
Popup.
Una cosa que me sorprende.
De esto.
Es que aquí.
Cuando yo he hecho esto.
Solo sea sin GIN.
O sea.
El sin GIN es como sin GIN y LOGIN y todo a la vez.
O sea.
Vale.
Entonces aquí tenemos dos cosas que arreglar.
Primero.
Voy a ver si el usuario me lo ha creado.
Para empezar.
¿No?
O sea.
Si yo me voy a users.
Deberíamos ver.
Vale.
El usuario lo ha creado.
Hasta aquí bien.
O sea que.
Eso funcionar.
Funciona.
Hidratación.
Os paso otra vez el.
El repo.
Que hay gente que me lo está pidiendo por ahí.
En el callback.
Ponle true.
Ostras.
Sí.
Pero es que como en el callback aquí.
La gente está.
Esto no.
¿Ves?
Don automatically redirect.
We handle redirecting.
Based on out set.
Without component.
Amigo.
Espérate.
Without component.
Componen.
Claro.
Ya sé.
Ya sé.
Ya sé.
Ya sé.
Ya sé.
Si es que os lo he explicado.
Os lo he explicado.
Y no me escucho yo mismo.
No me escucho yo mismo.
Mira.
El tema.
Es que.
Para.
Que esto.
Rueda.
Bien.
Yo creo que tenemos que utilizar este.
Without user.
Claro.
Entonces.
En lugar de.
De ser.
Firebase.
El que hace la redirección.
Tenemos que ser nosotros.
Que en el out.
Aquí.
Hacemos un export default.
Without user.
Del componente out.
Without user.
Esto lo tenemos que utilizar.
Por aquí.
Esto.
Estaría bien que me detectase.
Without user.
Ahí está.
Me lo ha importado.
Perfecto.
Y yo aquí.
Le podría decir.
Donde me tiene que redirigir.
¿Sabes?
Le podría decir.
Vale.
Pues.
Without user.
Pues toma.
Te.
Te digo aquí.
Without user.
Tú.
Tú.
Tú.
Tú.
Tú.
Bueno.
Antes.
Antes lo hemos hecho.
Con esto.
¿No?
Más o menos.
Redirect to login.
Que en este caso.
Lo que podremos hacer aquí es.
App page.
When out.
Pues lo que le digo es.
Pues.
Out action.
Punto.
Redirect.
Ah.
No.
No le puedo decir redirect to.
Ah.
Sí.
Redirect to app.
Vale.
When out.
Redirect to app.
Y ya está.
¿No?
Redirect to app.
Cuando hayas inicializado.
Redirige a la aplicación.
Y ya está.
Y ya está.
Bueno.
Al menos.
Vale.
Vale.
Al menos.
Van por ahí las cosas.
Ahora me está dando un error 500.
Y este error.
Ahora sí.
Que tiene pinta.
Mira.
El ejemplo ha marcado lo siguiente.
Configuración.
When out.
Redirect to app.
Ahí está.
Vale.
Pues eso justamente es lo que he hecho.
¿No?
When out.
No sé qué.
Podría poner más.
When.
When out.
Bueno.
Un out no puede ser.
En este caso.
Lo que podríamos poner.
Es si ha habido algún problema.
Y tal.
Pero bueno.
Bien.
Me gusta.
Al menos.
Esto lo tenemos ya.
¿Vale?
O sea.
Ya tenemos que cuando el usuario.
Inicia sesión.
Y ahora ya está detectando.
Que la sesión del usuario.
Está iniciada.
¿Vale?
¿Qué problema hay?
¿Qué problemas está habiendo?
Y aquí es donde tenía el miedo.
Que no iba a funcionar lo que había hecho.
Por ahora está funcionando todo bastante bien.
O sea.
Tenemos ya.
El control de la sesión del usuario.
En XDS.
Con server-side rendering.
Tenemos ya.
Una UI.
Más o menos.
Que lo que hace es.
Pues mostrarnos.
Un inicio de sesión con mail.
Pero eso ya es muy fácil.
Que podamos hacerlo con otras cosas.
O sea.
Aquí una vez que tenemos el out.
Y tenemos este.
Singing.
Y aquí pone pop-up.
Aquí podemos ponerle.
Que sea de otra forma.
Y en single options.
Podemos poner GitHub.
Podemos ponerlos todos.
Y si los activas.
Ya funcionarían.
O sea que.
Fácil.
En ese aspecto.
Aquí ya.
Fácil.
El problema.
¿Dónde está?
¿Qué es lo que nos falta?
Todavía.
Y creo que está aquí el problema.
Justamente.
El problema.
Está en la API.
¿Ves?
Este login.
Este set out cookies.
Si yo pongo aquí.
Un console error e.
Yo me da a mí la sensación.
¿Qué ha pasado ahí?
Estoy haciendo out para.
Next is con Firebase.
A ver.
Tendría que ir a demo.
Vale.
¿Ves?
Me está petando.
Porque lo que me está petando.
Es el endpoint de login.
Cuando está intentando hacer el set out cookie.
Es donde me está petando ahí.
Me está petando ahí como un cochino.
Y no quiero que me pete.
Entonces.
Aquí he puesto un console log ahora.
Invalid credential.
Es que es esto.
Invalid format message.
El problema.
Fail to parse private key.
Es que este es el problema.
¿Cómo?
¿Cómo la formateo?
Es que cuando me he copiado la key del env.
A ver.
Voy a probar a copiarla otra vez.
Vale.
Un momento.
Yo es que creo que esto no funciona así.
Pero bueno.
Puedo probarlo.
Puedo probarlo.
Vamos a ver si cuando copio algo aquí.
Cómo mola esto.
No me podéis decir que no está guay.
Cuando copio algo aquí.
A ver si lo veis.
¡Ey!
¡Qué bueno!
Es que desaparece.
Podéis ver los saltos de línea.
Pero no podéis verlos.
¡Qué bueno es esto!
Esto para las keys.
Entonces.
Lo que tengo dudas.
Es que en una variable de entorno.
Se puedan poner las comillas.
Enf.
Local.
Enf.
Es que no me acuerdo.
Si se pueden.
¿Sabéis si se puede?
¿Sabéis?
Double quotes.
Es que no me acuerdo.
Es que no me acuerdo.
En el punto env.
Si se puede esto.
Claro.
Como siempre utilizamos.
Pues algunas fáciles.
Que son una sola.
¿Ves?
Aquí.
Yo diría que sí.
Claro.
Yo también diría que sí.
Pero.
Mira.
Este pobre hombre le han dado dos deditos para abajo.
Pobrecito.
Funciona igual.
Vale.
Vale.
Yo diría.
En los Yambl se puede.
Hostia.
Es que mira.
No me acuerdo.
No me acordaba.
Y.
Vamos a probar.
Vamos a probar ahora.
Sí.
No.
Las variables de entorno son stream básicamente.
Lo que me.
No recuerdo.
Si las comillas.
Las cuenta como un símbolo.
O entiende que es un stream.
Ahí lo tenemos.
Ahí lo tenemos.
Ahí lo tenemos.
Ya tenemos al usuario logueado.
Ya lo tenemos.
Logueado.
A ver.
Ahora ya.
Si vamos aquí.
Y vamos a demo.
Ya está.
Tenemos al usuario logueado.
Y con server server rendering.
Me gusta.
Me gusta.
Me gusta.
Buah.
Ya nunca me vais a poder hackear más.
Ja, ja, ja.
Ja, ja, ja.
Dios.
Como mola.
Sois lo mejor.
Sois los mejores.
Pero así no me podéis hackear.
Pero está súper bien esta extensión.
Las cosas como son.
Vale.
Entonces.
Entonces ya está.
O sea.
Es que esto está genial.
Esto está genial.
La otra opción era escapar las comillas.
Pero ya funcionó.
Sí.
Gracias.
Ya está.
O sea.
Ya tenemos al usuario.
Lo tenemos totalmente logueado.
Que yo aquí.
Y me imagino que podríamos.
¿Cómo se desloguea?
Por cierto.
¿Cómo se hace?
A ver.
React.
Firebase UI logout.
¿Sabes?
Hay un botón de logout.
O directamente le llevo a que haga una petición al logout y ya está.
Sync out.
Claro.
Es que solo es un clic.
Claro.
Ya me imaginaba que era así.
Pero.
¿Sería utilizando esto?
A ver.
Vamos a probarlo.
Vamos a probarlo.
¿Vale?
Cuando tenemos.
Vamos a decirle que cuando tenemos.
User.
User.
Cuando tenemos.
User.
A ver.
Cuando el usuario no está logado.
¿Qué nos devuelve este?
Es que tampoco he visto muy bien.
¿Qué tiene este?
Vamos a poner aquí un button.
Logout.
Y vamos a hacer un clic.
Y esto.
Que haga esto.
Firebase.
.out.
.logout.
Y el Firebase.
Que me lo importe.
A ver.
Export.
Firebase.
Firebase.
Joder.
¿Por qué no me importa?
Firebase.
From.
Firebase.
¿Vale?
Así nos vamos a cerrar la sesión.
Del usuario.
Vale.
Pero no hace.
De hecho.
De hecho esto.
Me está ignorando.
Pero obviamente.
Ah.
Es que creo que esto es una función.
¿No?
Si no recuerdo mal.
Vale.
No.
No es una función.
Es que es sync.
Out.
Yo he puesto logout.
Y me lo he inventado.
Yo he hecho ahí lo que me ha dado la gana.
Yo he dicho.
A mí me gusta logout.
A mí me gusta logout.
Pues hago logout.
No, no.
Es syncout.
¿Vale?
Venga.
A ver ahora.
Vale.
Esto es lo que pensaba.
Que iba a ocurrir.
Que no quería que ocurriese.
Pero bueno.
Claro.
Pero está muy bien.
Porque aún así.
No ha petado.
Ni nada.
Vamos a ver que tenemos la consola.
Con el usuario.
Ahora que he cerrado la sesión.
Ah.
Claro.
Claro.
Bueno.
No pasa nada.
Podemos ir a la portada.
Podemos ir a la portada.
Hacemos un export default.
Without user.
Y así también lo tenemos aquí.
Esto es necesario.
¿Por qué es necesario este higher del component?
Aparte de por qué le podemos pasar configuración y tal.
Esto es necesario para poder utilizar este hook.
Porque los higher del component normalmente lo que hacen es envolver el componente con algún provider.
Que seguro que lo hace en este caso.
Para poder leer de ese contexto.
Y poder utilizar dentro de un hook.
O lo que sea.
O que te llegue por props esa información.
Podría ser cualquier cosa.
Y de esta forma podríamos saber.
Podemos acceder al usuario.
Estoy bastante seguro.
¿Qué he hecho aquí?
Vale.
Esto ahora es así.
Perfecto.
Vamos a la home.
Vale.
Without users.
Not defined.
Claro.
Porque yo es que paso de importar las cosas.
Porque espero siempre que me las importe sola.
Y esto también.
Claro.
Porque.
Dios mío.
Estamos en el siglo XXI.
Déjame.
Déjame.
Que no quiero importar tanto.
Gracias Xpenco.
Por tu suscripción de dos meses ya.
Que llevas.
Muchas gracias.
Crack.
Te mando un abrazo enorme.
Gracias.
Muy bien.
Entonces.
Este es el usuario.
¿Vale?
Este es el usuario.
Esta es la información del usuario.
Claims.
Claims.
Vale.
ID.
Vale.
Si el ID es nul.
Menuda mierda también de objeto.
También te digo.
Y me llama Penco.
¿Cómo que Penco?
Xpencho.
Xpenco.
Xpencho.
Ah.
No sé lo que te he dicho.
Ya no soy tan crack.
Xpencho.
Perdóname.
¿Cómo te digo?
Xpencho.
Xpenco.
Xpencho.
Dime.
¿Cómo se pronuncia?
Lo intentaré lo mejor.
Pencho.
Venga.
Va.
Intentaré.
Pencho.
El objeto.
Sí.
Está bien que se tire por la ventana.
Pero yo creo que se tira por la ventana.
Y la ventana lo devolve.
Porque dice.
No me gustas.
A ver.
Es que ya que tienes un email verified.
Pues podrías decir.
Podría tener.
Islog.
O yo que sé.
Porque si no.
Lo que tenemos que mirar estos ratos.
Si tiene un user ID.
A ver.
No pasa nada.
Pues mira y ya está.
Pero.
Vale.
O sea.
Esto sería una página.
Imagínate.
Esto puede ser la interfaz.
De la parte del server.
O sea.
De tu cuenta.
¿No?
Y que digas.
Vale.
Pues aquí no puedes entrar.
A no ser.
O sea.
En esta página.
Claro.
En esta página.
No tiene sentido hacer un if.
Aquí no tiene sentido.
Y fuser no tiene sentido.
Ah.
Pero sí que tiene sentido.
Claro.
Es lo que ha pasado antes.
De hecho.
Es lo que ha pasado.
Que no me esperaba que pasase.
Al haber hecho.
Ese control.
En el servidor.
Fíjate en este detalle.
Detallazo.
Al estar.
Este control.
En el servidor.
Cuando voy a la ruta de demo.
Que es la que tiene el control.
En el servidor.
Fíjate.
Demo.
¿Qué pasa aquí?
Inlux.
Ah.
Calla.
Entonces.
Your email is wilkio.
Arroba gmail.com.
Perfecto.
Claro.
Cuando le doy a logout.
El problema.
Que al darle a logout.
Se queda en la página.
Porque el control del server.
Ya no está.
¿Ves?
Si le doy a logout.
Aquí me pondría.
Is undefined.
Así que aquí viene.
La duda.
Puede ser que si yo le pongo aquí.
Claro.
Ah.
Ahora lo he entendido.
Ahora lo he entendido.
Si.
Alex.
Me dice.
Utiliza Firebase Auth.
On AuthStateChange.
Podríamos hacer eso.
Pero.
La idea de esto.
Que estamos utilizando.
Justamente.
Es evitar.
O sea.
Es intentar.
Evitar el uso.
De ese tipo de.
De método.
Dentro de nuestros componentes.
Yo entiendo.
Que aquí.
Este.
When.
Un Auth.
After.
Init.
Este.
Va a hacer automáticamente eso.
Entonces.
Le podemos decir.
Vale.
Si yo.
Por lo que sea.
Después de inicializar.
Este componente.
Me deslogueo.
¿Sabes?
Entonces.
Te redirijo al login.
Vamos a probar.
Lo tomamos.
Venga.
Demo.
Le doy.
Ahí está.
Ya está.
Entonces.
Aquí puede.
Claro.
Son dos cosas.
Una.
Before init.
Que sería.
Antes de inicializar el componente.
After init.
Una vez que se ha inicializado el componente.
Cuando estés.
Que cierres sesión.
O sea.
Que no estés autenticado.
Redirect to login.
O sea.
Que es importante.
Tener las dos.
Una.
Para el servidor.
Para evitar que una persona entre.
Y otra.
Que si en esa página.
Por lo que sea.
Perdiese la sesión.
Pues le redirijas a otra página.
Interesante.
Me gusta.
Me gusta.
Me gusta.
Me gusta.
Muy bien.
Vale.
Pues ya tendríamos esto.
Ya tendríamos el tema del login.
Voy a activar.
Ya que estoy por aquí.
Vamos a activar.
Vamos a activar.
Singing method.
Voy a activar el de GitHub.
Vale.
Esto hay que hacer.
Una app.
De GitHub.
GitHub.
A ver.
Voy a enseñar.
Como se hace.
Midu Commerce.
Que es esto de Midu Commerce.
Ah.
Digo.
Midu Commerce.
Cuando he hecho yo este repositorio.
Y es el repositorio de Next.
Y es este que.
Que te copias.
Dándole a un botón.
Este al de deploy.
Vale.
Settings.
Y.
En Settings.
Applications.
Y en Applications.
Hostia.
Tengo aquí.
Netlify.
Yo tengo Netlify.
No sé dónde utilizo Netlify.
Hostia.
A ver un momento.
Password.
Vale.
Ya está.
Eh.
GitHub Codespaces.
Lighthouse.
Autocad.
Sentry.
Travis.
Mmm.
¿Dónde se hacía esto?
No.
Estos son aplicaciones.
O Auth.
No.
Stoll.
Developer Settings.
Ahí está.
GitHub Apps.
O Auth Apps.
Me nea dev.
Dev.
Lo va a petar fijo.
Pues creo que es esta.
¿No?
La podemos eliminar.
No la podemos eliminar.
Revoke.
Generate.
New.
Bueno.
Pues hacemos esta.
Eh.
Midu.
Tu vídeo comentando.
La next confs.
Quedó grabado.
Sí, amigo.
Egwin.
Berrones.
Ya le va a cagar.
Eh.
Ojalá.
Volamundo.
Este hombre que hace un vídeo cada día.
O sea.
No para.
No para este hombre.
Eh.
Middle Life.
Porque ayer.
¿Fue ayer?
No.
Antes de ayer.
Ah.
No me acuerdo.
Pero el otro día hicimos un directo.
Él y yo.
Vale.
Aquí lo tienes.
Middle Life.
Eh.
Next Conf.
más migrando a NextDS 11.
Fíjate.
Muy bien.
Tuvimos un momento aquí.
En el que participé en la.
Mira.
¿Ves?
Estuve participando aquí con ellos.
Hablando con ellos.
Estuvo súper genial, eh.
Web.
Estuvo muy bien.
Vale.
En Advanced posiblemente haya un sitio donde eliminar.
Muy bien.
Delete this application.
Lo que estoy pensando es que en lugar de eliminarlo.
No sé si podremos generar uno nuevo.
Ya está.
Homepage.
URL.
Vale.
A ver que necesita esto.
ID del cliente.
Secreto del cliente.
Para completar.
Esta es la URL.
Vale.
Pues vamos a cambiar la URL.
Vale.
Le vamos a poner esta.
Que nos dice.
Pam.
Homepage URL.
Entiendo que esto no es necesario.
Pero bueno.
Vamos a poner mnadef.
Y aquí le vamos a generar un nuevo client.
Un nuevo.
Bueno.
Ahora me doy cuenta que lo habéis visto todos.
Entonces voy a darle a Delete.
Delete.
Y ahora creo uno nuevo y ya está.
Generate.
New.
Copiar.
Delete.
Delete.
Momento.
Secreto.
Secreto ibérico.
Secreto.
Client ID.
Client ID.
Y guardar.
Venga.
Ya está.
Guardado.
Ya tenemos GitHub.
Habilitada.
Sí.
Habilitada.
Entonces.
Ahora.
Si nos vamos a.
A Auth.
Por aquí.
Auth.
Clock for Chrome.
Sí.
Me la quería.
No.
Hay una.
Hay una.
Nili.
Nihil.
Nihil.
Nihil.
Nihil.
Drama.
Hay una.
El mago revelando el secreto.
Hay una.
Hay una.
Lo que.
No me acuerdo.
Como se llama.
Pero el otro día.
La estuve viendo.
También.
Firebase.
Auth.
Punto.
GitHub.
Provider.
Punto.
Provider ID.
No sé si este.
Require.
Display.
Name.
Esto es necesario.
No tengo ni idea.
Vamos a ver si.
Esto.
Con esto solo.
Ya nos deja hacer las dos.
Mira.
Ya está.
Y ya.
Automáticamente.
Nos salen las dos opciones.
Le vamos a.
Sync in with GitHub.
A boolean.
Is being passed as fourth parameter.
The window open.
Ups.
Algo ha ido mal.
Ostras.
Es que todavía me está yendo a donde no es.
La madre que lo parió.
Ya sé lo que ha pasado.
Anda.
Ahí.
Todo el secreto.
Todo el secreto ibérico para mí.
Todo el secreto.
Me cago en Ross.
La leche.
Jo.
Peta.
Yo que esto ya lo tenía.
Es que no se había guardado la URL.
Venga.
He generado un nuevo.
Un nuevo secreto.
Porque como son gratis.
Pues estoy generando aquí secretos.
Como si hubieran mañana.
A ver si ahora soy capaz de no enseñarlo más.
Que no pasa nada.
Pero es que luego salgo en las noticias de.
Un chico revela un secreto.
Y.
Y hace no sé qué.
No sé cuántos.
Vale.
Ahora sí esto.
Ahora sí esto.
Ahora.
Vámonos para acá.
Yo no tengo secretos para ustedes.
Ya lo sabéis.
Solo alguno.
Solo alguno que me pueda salir caro.
Venga.
Ahora sí que parece.
Vale.
Vale.
Ahora sí.
Y si me voy a demo.
Ya está.
Ahora.
Lo que quería ver en demo.
Que tenemos del usuario.
A ver si tenemos algún tipo de información.
¿Alguna vez se te ha colado?
Sí.
Sí que se me ha colado.
Unas cuantas veces se me han colado cosas.
Vamos.
¿Ves?
Es que aquí hay más información.
Phone number.
Photo URL.
Aquí está la imagen.
Photo URL.
User.
Photo URL.
Photo URL.
Titing.
Ahí está.
Ahí tenemos mi imagen de GitHub.
Bueno.
Pues está bien.
Está bien.
Me gusta.
Me gusta el hecho de que.
Dentro de lo que cabe.
Ha sido bastante fácil.
¿No?
Y no hemos tenido.
Claro.
Si le doy a logout.
Debería sacarme.
Le doy a singing with GitHub.
Además.
Ya no debería pedir nada.
Entra.
Y ya está.
Y de una.
¡Wow!
¿Usa el image de Next?
Claro que sí, hombre.
Si es lo que quieres.
Lo malo es que tengo que ponerle el width.
20.
Bueno.
48.
Height.
48.
Image.
Joder.
Image.
Import.
Image.
From.
Next.
Image.
Y nos vamos a demo.
Y ahí debería aparecer.
Vale.
Hay que configurar.
En Next.
Esto si no.
Sabíais esto.
Bastante interesante.
Que para.
Poder utilizar.
Un host externo.
Tienes que configurarlo.
Si no.
Os dice eso.
Que acabamos de ver.
Entonces.
Vamos a.
Avatars.
Avatars.
Punto.
La leche.
Ahora.
Vale.
Hay que ponerle.
Los dominios externos.
A los que queréis utilizar la imagen.
¿Por qué es esto?
Porque la configuración.
El rendimiento.
Este.
Lo que hace esto.
La imagen.
Esto lo hace.
Lo hace.
Bajo demanda.
Las optimizaciones.
Entonces.
Tú imagínate.
Que no pusieras.
No controlases esto.
¿No?
Y tú lo haces.
Un millón de peticiones.
A un dominio externo.
Que tal.
Creo que lo hacen un poco por esto.
Pero vaya.
Es una tontería.
Porque al final.
Si lo puedes poner manualmente.
¿Qué más da?
Es una.
Una de tus páginas.
Pensaba que a lo mejor lo explicaban.
A ver.
External.
Incluso si está.
Hospedada.
En external.
¿Vale?
Dice.
Esto.
Es necesario.
Para asegurarse.
Que las urls externas.
No son abusadas.
Pero ya te digo.
Que si la ponen manualmente.
¿Qué más da?
¿Qué más da?
Si soy yo el que te lo va a poner.
No es que le voy a pedir permiso a GitHub.
Vale.
Tenemos que actualizar esto.
Y ahora.
Debería aparecer.
Ahora sí.
¿Veis?
Ahora sí que está optimizada.
Y sale ahí súper bonita.
Vamos a hacerla un poquito más grande.
¿Vale?
Y ya está.
Esa es la imagen.
Optimizada.
Optimizada.
Fíjate la de cosas que le mete.
Sí.
Alguien estaba preguntando.
¿Qué te ofrece el Next Image?
Buah.
Te ofrece un montón de cosas.
Creo que el playholder no se puede.
Sí.
Gracias.