Modificando nuestro Layout

Quedan muchas dudas, párese mas una clase de programación de NODE, se perdió la esencia de lo que es la AUTH, y si ahora es C++ o python, creo que no voy a tener muchas librerías

En ningun lado del curso hablas de como se debe implementar este flujo en el backend… Ni das informacion detallada de como es eso en el backend… Simplemente estas usando el api de spotify y ya ellos tienen todos esos flujos en su backend listos.

Aún no tengo claro como generar estos flujos a nivel de backend para crear mi propio servidor de autenticación. Bien por las integraciones con Spotify pero no sabemos aún como generar las diferentes partes necesarias para completar los flujos.

Hola a todos.
Este curso está increíble. Les dejo unos commits que realicé en mi repo ya que actualicé next y react a su última versión y no me corría correctamente la implementación de Implicit Grant. Espero les sea de utilidad:
Nombre del modulo AppLayout (más por que se llame igual que el archivo)
AppNavbar convertido en clase de JS

Copia y pega, copia y pega, porque del resto… es la hora y todavia no se como implementar OAuth en mi propio backend

Estoy atascado en la redireccion del loggin.
Me aparece el error Invalid_Client: invalid redirect uri

Por mi parte he portado el codigo a react hooks. Al principio creia que seria algun fallo en la portabilidad. Ya que la direccion en el .env es la que se indica por Guillermo en el final del video.
Despues de revisar la documentacion de Spotify y hacer varias pruebas, no he conseguido nada.
Entonces decido bajarme el proyecto de archivos completo y instalarlo con las dependencias que utiliza Guillermo de hace 2 años. Que estan llenas de vulnerabilidades actualmente, pero pensaba que habria alguna diferencia, pero nada sigue dandome el mismo error.

SPOTIFY_REDIRECT_URI=http://localhost:3001/callback

Utilizo esta direccion, no se si estoy poniendola mal, o es algo de Spotify…
algun consejo o ayuda?

Como puedo implementar todo esto en Angular 8 y usando Typescript?

¿Es recomendable guardar texto plano en local storage?

El botón login tiene un onclick que nos sirve para llamar a la función login donde se crea la url con los parámetros para ir a la página de autorización incluyendo el estado.

La función login redirige a la persona para que autorice a nuestra aplicación el acceso a los recursos dentro de Spotify

Spotify redirige hacia nuestro callback con unos query params

Sacamos de la url los parámetros del query que corresponden al token, el estado y la fecha de expiración del token
guardamos el token y los demas parametros en memoria (en este caso el localstorage aunque no es recomendado pero se hace por practicidad)

Utilizamos, en un request posterior, el token en el header de autorizacion para traer la información de nuestro usuario de spotify

En conclusion, a diferencia del Authorization Code Grant Flow, el Implicit Grant lo que hace es devolvernos el token inmediatamente en una petición tipo get, sin necesidad de realizar un segundo request para ahi si obtener el token, ademas no utilizamos el client secret. Es mas rapida y fue la solucion mas sencilla en los tiempos que se implementaba

Recomiendo: What’s going on with the OAuth 2.0 Implicit flow?
ahi explican mas a detalle los riesgos concretos de usarlo.

Las partes de músicas abruman con la información, deberían de llevar más tiempo en la explicación.

Sigo sin entender en donde debemos almacenar el JWT en el lado del cliente, lo único que dijo fue que no lo hiciéramos en localstorage aunque él lo hizo ahí 😕