Refresh Token Angular 16🤖

🤗Puedes invitarme un café 🥤:

𝗟𝗶𝗻𝗸 𝗱𝗲𝗹 𝗥𝗲𝗽𝗼𝘀𝗶𝘁𝗼𝗿𝗶𝗼

𝗦𝘂𝘀𝗰𝗿𝗶́𝗯𝗲𝘁𝗲 𝗮 𝗺𝗶 𝗰𝗮𝗻𝗮𝗹 𝗱𝗲 𝗧𝘄𝗶𝘁𝗰𝗵 😎

𝗦𝗶́𝗴𝘂𝗲𝗺𝗲 𝗲𝗻 𝗺𝗶𝘀 𝗿𝗲𝗱𝗲𝘀:

0:00 Lógica de Refresh Token
7:12 Mostrando proyecto Angular y NestJS
16:07 HTTP Interceptor Functions
22:04 ¿Cómo funciona un Interceptor Angular? El orden importa
28:25 Explicando el flujo de Refresh Token
43:02 Implementando la lógica en los interceptores -RXJS
1:10:59 Preguntas y despedida

#angular #webdevelopment #javascript #frontend #programaciónweb #frontenddeveloper #webdevelopment #desarrolloweb #typescript #transloco #angularforbeginners #angularcourse #angular_js #angulartraining #cleancode #ngrx #microfrontends #webpack #cleanarchitecture #cursoangular #environment #logidev #cleanarchitecture

[angelolugo]

Gracias bro, espero el curso ansioso del proyecto desde 0 y luego con conceptos avanzados con hexagonal arch al final

[scubacode]

Había revisado aproximadamente 5 videos sobre como manejar el refresh token y ninguno funcionó excepto este, gracias ahora soy tu fan.

[davidandresgarzonsanchez]

Magistral explicacon teorica y practica. Eres un crack. Saludos desde Colombia.

[marcosjrs]

Muchas gracias, Jimy. Explicación muy completa, genial, como siempre.

[yoanestradablanco]

COmo siempre dando lo mejor a la comunidad gracias hermanito

[danielchirinosr]

Excelente clase máster.. si seria bueno el curso de cero con todo lo nuevo 💪🏻💪🏻gracias

[mugatu]

Excelente contenido, los interceptores conptualmente funcionan como los midleware en el mundo de node, basicamente es una capa por donde pasan las peticiones, en la firma tienen el objeto next para pasar la request a la siguiente capa o al siguiente midllware, son usados para autenticar, loguear, o hacer cualquier logica que se nos imagine

[alegeomx]

Gracias Jimmy como se ha comentado este tutoría está excelente explicando el caso de uso y su implementación, sin embargo, algún día, puedas completarlo, de forma que las peticiones subsecuentes no se cancelen, sino queden encoladas esperando el nuevo access token y continuar su flujo, tengo el caso de uso donde una página carga varios combos(selects) por medio de peticiones http y cuando toca que se da el refreshToken solo se carga uno o dos dependiendo el tiempo, el resto se quedan vacíos.

[lizethmdzt]

Buen contenido, me gustaría ver un video para ver cómo sería la autenticación con JWT vs JWS para entender como funcionan, gracias

[magadiflo-dev]

Excelentísimo contenido estimado Jimy. Te comento que seguí tus pasos realizando un proyecto nuevo, todo funcionaba igual hasta que llegué al punto en el que el refreshToken, cuando expira y realizas una solicitud, lo normal sería que redireccione al login, pero eso no estaba ocurriendo, se quedaba en un bucle infinito haciendo petición tras petición, una vez cancelada el backend recién redireccionaba al login. Descargué tu proyecto y lo ejecuté (sin el delay(5000)) y efectivamente estaba ocurriendo lo mismo, se queda en ese bucle. Así que para solucionarlo tuve que agregar un contador para determinar el número de veces del Unauthorized y luego lanzar un throwError(() => error). Solo quería comentarte lo que ocurre también en tu repo y cómo lo solucioné. Por lo demás, son excelentes tus contenidos, siempre me doy un tiempo para verlos. ¡Saludos!

[zerilanka]

@LogiDev gracias como siempre gracias por tus videos, hablando de angular avanzado tienes videos o haz trabajado con formularios Dinámicos donde todos los controles se pinten dinámicamente en el Html y seteandolos con sus respectivas propiedades ejemplo si el tipo es String, Datetime, Number etc.. y que esta configuración venga de alguna base de datos ?

[kirargomedo]

Una consulta, cómo puedo definir una ruta y donde crecer profesionalmente? . En un principio solo trabaja con Angular, pero al no encontrar trabajo solo de frontend tuve que migrar a ser full stack . Actualmente, estoy en una empresa con c# creando apis, pero me quieren pasar a hacer apps de escritorio con visual basic. Veo que JS esta demasiado saturado por los bootcamps, en cambio con c# y java a pesar de ser alguien junior te dan un sueldo bastante bien (Mínimo 4k soles ).

[Anonimo-gtbi]

es totalmente seguro guardar tu acces token en el localStorage?

[mugatu]

buen contenido aunque cuando hay mucha logica o logica que pueda dar pie a confusion, lo ideal o lo que yo hago es crear en la parte superior del script un pequeno guion o comentario del flujo, podrias utilizar un spinner mientras todas esas transacciones asincronas esten sucediendo

[RrenzOS]

La siguiente versión de de Angular va cambiar totalmente la manera como se usa el framework. Inclusive recomiendan empezar los proyectos con la nueva forma o como dices la nueva experiencia del programador. Para un junior que recién está empezando. Recomiendas esperar para aprender desde esta nueva perspectiva de desarrollo en Angular, o recomiendas aprender la manera tradicional.

[rolygonz]

Hola amigo exelente tema el que tocaste en este video Bro por alguna razon analizando la explicacion que diste con los graficos me doy cuenta que de la manera que se implemento el ErrorInterceptor en el momento en que falle el refreshToken request va a entrar en un bucle pues cuando se llama al refreshtoken (imaginando que ya este tambien aya vencido ) como es una nueva peticion se ejecuta el primer interveptor el cual solo le asigna el header y como se vencio el refreshtoquen el Error interceptor cachea ese error pero no en el cathc del refreshToken si no en el cath de nivel superior lo que hace un bucle infinito cuando el refresh token expira en mi caso haciendo el ejercicio usted modifique el codigo del errorIntyerceptor a :

export function errorApiInterceptor(
req: HttpRequest<unknown>,
next: HttpHandlerFn
): {
const authService = inject(AuthService);
const router = inject(Router);



return next(req).pipe(
catchError((e: HttpErrorResponse) => {
if (e.status === HttpStatusCode.Unauthorized) {
if (req.url == API_URLs.REFRESH_TOKEN) {
console.log('redirect to sign-In');
authService.isRefreshing = false;

return EMPTY;
}
authService.isRefreshing = true;
return
finalize(() => (authService.isRefreshing = false)),
switchMap((response: any) => {
const newSession: ISession = {
accessToken: response.accessToken.token,
refreshToken: response.refreshToken.token,
};


const reqClone =
return next(reqClone);
}),
este Catch no entra
catchError((e: HttpErrorResponse) => {
console.log('redirect to sign-In');
authService.isRefreshing = false;

return EMPTY;
})
);
}
return throwError(() => e);
})
);
}

[mugatu]

un curso de cero lo veo absurdo desde mi punto de vista, hay miles de canales que ensenan lo basico, pero canales de medio alto nivel hay pocos, por mi sigue en la misma linea ensenanado ese 5% de contenido que te haga diferenciarte del resto