Flujo de login

Clase 2 de 20 • Curso de Autenticación con Angular

Elcira Ibarra

student•

Estos son shorts, lo podemos configurar desde el tsconfig.json, en paths:

    "paths": {
      "@models/*": [
        "./src/app/models/*"
      ],
      "@shared/*": [
        "src/app/modules/shared/*"
      ],
      "@auth/*": [
        "src/app/modules/auth/*"
      ],
      "@boards/*": [
        "src/app/modules/boards/*"
      ],
      "@environments/*": [
        "./src/environments/*"
      ],
      "@guards/*": [
        "./src/app/guards/*"
      ],
      "@interceptors/*": [
        "./src/app/interceptors/*"
      ],
      "@services/*": [
        "./src/app/services/*"
      ],
      "@utils/*": [
        "./src/app/utils/*"
      ]
    },

Para después importarlos así con el arroba en lugar de las rutas relativas:

import { environment } from '@environments/environment';

José Nicolás Aristizabal Ramírez

student•

Hola chic@s para que puedan continuar usando la colección de postman y hacer los request deben:

crear un nuevo usuario con el request

POST - Register 
{{url}}/auth/register

para probar el endpoint de login deben tener cuidado porque hay un error en la ruta del mismo, en la colección dice que el request se hace a la url: {{url}}auth/login lo cual es incorrecto, deben agregar un "/" al path, así:

POST LOGIN
{{url}}/auth/login

En el login ingresan con los datos registrados en el register, espero y les sirva

Brenda Sutara

student•

ufff me salvaste, no sabía por qué me saltaba error si no hubiera visto tu comentario. Me faltaba el /

Cesar Augusto Acjota Merma

student•

SI quieren trabajar 100% desde su Visual Studio para realizar peticiones pueden usar la extención Thunder Client

ENLACE DE LA EXTENCIÓN

Deiby Daniela Rique Porras

student•

Para los que tuvieron problemas con el login deben crear un usuario nuevo, y hacer el login con el siguiente body y con los datos del nuevo usuario

Brenda Sutara

student•

Hay que registrar primero el usuario y después ir a login. Les dejo los pasos en postman

Y después el login, verifiquen que tengan todos los "/" en la url

Reinaldo Mendoza

student•

Buena información

Eduardo Lemus Zavala

student•

Una pregunta, toda esta aplicación es desarrollada desde cero en el curso de cdk y Tailwind? Apenas comence a aprender angular y hay muchas cosas de este codigo que no entiendo.....

Brenda Sutara

student•

Si, empezamos desde cero toda la app pero le han agregado cosas, te dejo el link del curso. Yo estoy pensando en hacer el fork del proyecto de ellos porque la verdad no se cuanto pueda llevarme hacer los cambios que hicieron.

Yo estoy siguiendo la ruta de Frontend con Angular, esa está buena

Brenda Sutara

student•

Aca te dejo mi proyecto lo estoy actualizando para empezar este curso. Te hago un listado de lo que faltaba en el otro curso (pero igual la info está en el primer curso, asi que veo los videos y lo hago)

-RouterLink -Rutas anidadas -Reorganización de carpetas y componentes -Vista: Forgot password -Vista: Recovery password -Vista: Register

Retos que nos pusieron en el otro curso por hacer, que si no lo has hecho, esta bueno agregarlo, es un buen proyecto al porfolio

Estilos Scrool
Añadir nueva tarjeta, funcionalidad
Que toda una tarjeta (lista) se pueda mover)
3 puntitos, overlays

Cristian Danilo Motta Herrera

student•

No entiendo por que no me sirve, intenté en postman y en Thunder Client pero igual me devuelve en ambas

{
  "path": "/api/v1/auth/login",
  "timestamp": "2023-02-12T01:00:05.809Z",
  "name": "EntityNotFoundError",
  "message": "Could not find any entity of type \"User\" matching: {\n    \"email\": \"nicolas@mail.com\"\n}"
}

el body

{
	"email": "nicolas@mail.com",
	"password": "changeme"
}

Sergio Castillo

student•

tengo exactamente el mismo error, sin eso no se puede continuar el curso

Brandon Argel Verdeja Domínguez

student•

👋 ¡Hola! Este error aparece es porque el usuario aún no estaba registrado en la API. El profesor lleva el curso con un usuario que se registró antes, tal vez se borró al actualizar la API. Acabo de crear el mismo usuario que utiliza el profesor, pero como la API es pública, cualquier estudiante lo puede editar de tener la contraseña. 😅

Les recomiendo crear un usuario de prueba para que puedan llevar el curso, desde Postman o Insomnia pueden crearlo desde el endpoint register, solo le cambian el usuario que quieran crear para que lo puedan utilizar a lo largo del curso sin inconvenientes. 😉

{
	"email": "minombre@gmail.com",
	"password": "test1234",
	"name": "Mi nombre"
}

Sergio Castillo

student•

Property 'post' does not exist on type 'HttpClient'.ts(2339), me esta apareciendo este error

Brandon Argel Verdeja Domínguez

student•

👋 ¡Hola, @Sergio! ¿Me compartes una captura de tu código para revisarlo, por favor?

Sergio Castillo

student•

si eso lo hice, el npm i, lo solucione al quitarle l modo estricto a tailwind, en tsconfig.json, colocarle false en strict:, pero ¿porque pasa eso?

Sergio Castillo

student•

Cannot find module '@angular/core' or its corresponding type declarations. ¿Como podria solucionar eso?

Brandon Argel Verdeja Domínguez

student•

👋 ¡Hola, @Sergio! ¿Al clonar el repositorio instalaste las dependencias? Esta podría ser una causa, intenta ingresar el siguiente comando en tu terminal, ubicado en la carpeta raíz de tu proyecto: npm i.

Sergio Castillo

student•

si eso lo hice, el npm i, lo solucione al quitarle l modo estricto a tailwind, en tsconfig.json, colocarle false en strict:, pero ¿porque pasa eso?

Rosiris Romero Moreno

student•

Considero necesario una lista detallada de los cambios que habría que hacer para iniciar este curso en caso de querer conservar el código que traemos del curso anterior (maquetación con CDK y Tailwind), puede el team platzi hacerlo?

James Diaz Lopez

student•

Creo que no sería necesario, ya que estás a la capacidad de leer y entender el código completamente 😎...

Flujo de login

Introducción: requisitos y proyecto del curso

Cómo aprender Autenticación con Angular

Login

Flujo de login

Conectar login a API

Flujo de registro

Validar Usuario

Optimizando el flujo de registro

Flujo de recuperación de contraseñas

Implementación del password recovery

Cambio de módulo

Proteger el Acceso

¿Dónde guardar el Token?

Redirects para recuperar sesión

Obtener users

Obtener el perfil

Reactividad en profile

Interceptor

¿Cómo cerrar sesión cuando expire el token?

Implementando el cierre de sesión

¿Qué es el refresh token?

Interceptor con el refresh token

Próximos pasos

Toma el curso práctico