Integración del inicio de sesión

SI ESTÁS TRABADO, LEE ESTO QUE A LO MEJOR TE APORTA EL GRANITO DE ARENA QUE NECESITÁS
.
Bueno, luego de estar todo el día literalmente rompiéndome la cabeza, pude entender el proceso paso por paso de lo que ocurre en el SIGN-IN y el SIGN-UP.
.
Intentaré explicar todo para dar una mano si alguien si sintió tan atascado como yo.
.

.
CANTIDAD DE SERVIDORES ANDANDO Y COMPORTAMIENTO
.
Actualmente en este curso se están utilizando dos servers… uno de Server Side Rendering (SSR) y otro que es una API.
.
El SSR lo tiene andando en localhost, pero el API lo tiene subido a Now.
.
Si quieres, puedes subir tu API a Now o puedes hacerla andar en paralelo en otra terminal en tu propio ordenador (yo primero lo hice local, y luego lo subí para entenderlo 100% y poder hacer pruebas)
.

Si bien tenemos dos BasicStrategies en este proceso (una en SSR y otra en la API), el procesamiento de la autentificación la hace el servidor de la API.
.
Vale la pena destacar que no nos comunicamos en forma directa con el servidor de la API desde el Cliente o las Acciones de React, sino que el SSR es el que envía las peticiones a la API.
.
El flujo sería:
Cliente (Acciones de React) > SSR > API > SSR > Cliente (Acciones de React)
.
PROCESO DE AUTENTIFICACIÓN
.
Reitero, las acciones de React no se comunican con la API, sino que se comunican primero a una ruta del SSR (notarás la ruta “/auth/signup”, que es totalmente local), y esta ruta del SSR esta scripteada para enviar un request a la API (notarás la ruta “${apiURL}/api/auth/signup”, que hace referencia a la URL remota, con código totalmente distinto a la local).
.
Dependiendo de si es SIGN-UP o si es SIGN-IN, el comportamiento entre SSR y API son distintos.
.
DESGLOSE DEL PROCESO DESDE QUE EL USUARIO INGRESA SUS DATOS
.

1. Action de React/Cliente
   Llama a “/auth/sign-up” [servidor local] y le pasa lo que hay en el form.
   .
2. Request de SSR
   Se desencadena al entrar a “/auth/sign-up”, gracias a “app.post(’/auth/sign-up”)".
   Dependiendo de cada caso, aquí el SSR hará cosas distintas.
   .
   ► Si es un SIGN-UP simplemente le pasará la data ‘email’, ‘name’ y ‘password’ a la API para que ejecute el servicio createUser(). Una vez creado el usuario, se devuelve el createdUserId en el data. Esto actualmente no lo usamos para nada, pero se dispatchea en el cliente.
   .
   ► Si es un SIGN-IN ejecutará la BasicStrategy de autenticación desde el lado del SSR, que es en sí un request a la API pasándo el ‘email’, el ‘password’ y la ‘API_KEY_TOKEN’ que tenemos de variable de entorno. Si, nada más. El resto del proceso lo hace la API.
   .
   La API recibe el request en “/api/auth/sign-in” y ejecuta la BasicStrategy de autenticación desde el lado de la API.
   .
   Lo que hará la API es usar el API_KEY_TOKEN para obtener una API_KEY alojada en su propia base de datos, y luego utilizarla para poder generar un JSON WEB TOKEN (que no es lo mismo que API_KEY_TOKEN, NI API_KEY) que es el que efectivamente vuelve al SSR adentro de req.login(data) para generar la famosa cookie.
   .
   El SSR es el que se encarga de tomar el JSON WEB TOKEN que entrego en el response la API y generar una cookie mediante ‘res.cookie’, devolviendo status(200).
   .
   Esto no termina acá… el data que nos devolvió la API, con el JSON WEB TOKEN vuelve hacia el Action de React para popular el document.cookie y finalmente dispatchear el data.user.

.
Con esta data deberías poder debuggear tu proyecto. La manera en la que pude terminar de entenderlo, es generar console.logs en cada uno de los pasos y a prueba y error ir verificando en que punto el programa se colgaba.
.
Éxitos!

Buenas tardes compañeros de nuevo yo, la verdad ya no se que hacer, use el api url del profesor ya que mi vercel no me funciono y dejo resgistrar, pero ya me sale en esta parte un error 500, tome la carpeta de movies-api de passport la ejecuto en una terminal y ejecuto la de este curso a la vez, y luego le pongo de api url la de movies-api localhost:3000 y tampoco, me sale error 500 y en la consola me sale esto, vengo luchado con esas validaciones desde lo de backend he usado todo los aportes de los compañeros no se si por eso es que no me funciona lo de vercel en fin. me podrian asesorar que puedo hacer. me sale ese error en la parte d ela api

el de este modulo me corrre bien y me compila bien

<Error: Schema can only contain plain objects
    at new module.exports (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\hoek\lib\error.js:23:19)
    at module.exports (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\hoek\lib\assert.js:20:11)
    at Object.internals.schema (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\compile.js:88:5)
    at Object.exports.schema (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\compile.js:17:26)
    at internals.Base.$_compile (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\base.js:631:24)
    at E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\types\keys.js:255:92 
    at Object.exports.tryWithPath (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\common.js:173:16)
    at internals.Base.method [as keys] (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\types\keys.js:255:32)
    at Object.internals.schema (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\compile.js:90:25)
    at Object.exports.schema (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\compile.js:17:26) {
  path: '$_root._types'
}
Error: Schema can only contain plain objects
    at new module.exports (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\hoek\lib\error.js:23:19)                                                                                                           es-api\node_modules\@hapi\hoek\lib\
    at module.exports (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\hoek\lib\assert.js:20:11)                                                                                                              pi\node_modules\@hapi\hoek\lib\asse
    at Object.internals.schema (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\compile.js:88:5)                                                                                                      \movies-api\node_modules\@hapi\joi\
    at Object.exports.schema (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\compile.js:17:26)                                                                                                       ovies-api\node_modules\@hapi\joi\li
    at internals.Base.$_compile (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\base.js:631:24)                                                                                                      T\movies-api\node_modules\@hapi\joi
    at E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\lib\types\keys.js:255:92                                                                                                                           @hapi\joi\lib\types\keys.js:255:92 
    at Object.exports.tryWithPath (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\jORT\movies-api\node_modules\@hapi\joi\lib\common.js:173:16)
    at internals.Base.method [as keys] (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hPASSPORT\movies-api\node_modules\@hapi\joi\lib\types\keys.js:255:32)
    at Object.internals.schema (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\\movies-api\node_modules\@hapi\joi\lib\compile.js:90:25)
    at Object.exports.schema (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Integración de Backend y Frontend - Platzi\Platzivideos\PASSPORT\movies-api\node_modules\@hapi\joi\liovies-api\node_modules\@hapi\joi\lib\compile.js:17:26)>

ayuda!!! por favor

✌

Me pasa algo raro, si presiono enter en los formularios hace todo lo que debería hacer (se crea el usuario en la db, me redirige al sign in y de ahí al home) pero si presiono el botón de Registrarme o Iniciar sesión nada mas me devuelve al home y el usuario no se crea en la db

Me pasa algo raro, si lleno los formularios presiono enter hace todo lo que debería hacer (se crea el usuario en la db, me redirige al sign in y de ahí al home) pero si hago click en el boton de Registrarme o Iniciar sesión nada mas me devuelve al home y el usuario no se crea en la db

Hola Oscar,

Tengo una duda, se esta guardando dos veces el token dentro de las cookies?

Veo que en los actions y en el server.js linea 111 se esta guardando este token.

Gracias

Casi que no completo esta clase pero al fin!!! 😄

export const loginUser = ({ email, password }, redirectUrl) => {
  return (dispatch) => {
    axios({
      url: '/auth/sign-in',
      method: 'post',
      auth: {
        username: email,
        password,
      },
    })
      .then(({ data }) => {
        document.cookie = `email=${data.email}`;
        document.cookie = `name=${data.name}`;
        document.cookie = `id=${data.id}`;
        dispatch(loginRequest(data));
      })
      .then(() => {
        window.location.href = redirectUrl;
      })
      .catch((error) => dispatch(setError(error)));
  };
};

Me salia un error de token undefined, lo que pasa es que en el .env el PORT y la API_URL deben ser diferentes, no puedes poner puerto 4000 y url localhost:4000, deben ser diferentes. Tambien necesitan correr los dos puertos, yo lo hice con dos terminales diferentes

tengo una duda , a usted si les inicio sesion de verdad ? , a mi no porque al parecer cuando se redirecciona el estado , ya no tiene la informacion del user al recargar en el store , o al menos eso me pasa a mi , y a oscar cuando esta en el final del video , cuando se redirecciona se ve el logo que es por defecto de no logueado

Es la hora y no entiendo porque hay que tener un server intermedio que se comunica con la API, porque el cliente no se comunica directamente con la API que ya esta hecha? Me es un poco confuso el hecho que el cliente hace una petición a un server, y este server a su vez hace otra petición hacia la API, Porque se hace de esa manera?

A mi me anda el sign up y el sign in (Se me guardan los datos en la db y todo) pero me redirige al NotFound en vez de al Home. A qué se pued edeber?

Genial!!!