DEV Community

loading...

Mi error al usar Cognito (AWS).

jesuscovam profile image jesuscovam ・2 min read

TL;DR: no uses window.localStorage.clear()

He invertido mucho tiempo en un proyecto con GraphQL donde la autenticación es manejada con Cognito, pero la base del proyecto solo se fundamentó en usar login con correo, nunca me tomé la molestia de hacer OAuth (porque nunca lo había hecho y ya tuve bastantes batallas con la documentación de Amplify por mi propia cuenta siendo primerizo con este backend).

Usar autenticación con Cognito y GraphQL es excelente si utilizas la API de App Sync también, te permite ponerle un candado personalizado a la API por default, luego escogiendo cuales tablas de la base de datos tienen acceso público y cuáles tienen acceso solo con login.

Como lidiar con OAuth y Cognito

Como todo el tiempo de desarrollo previo no tuve la necesidad de usar un link que sacará a los usuarios del proyecto, nunca me vi en la necesidad de usar la localStorage, con GraphQL me bastaba conseguir la información que necesitaba para que la página en ruta funcionara. Pero cuando agregué OAuth con Google, el usuario sale de tu proyecto y luego regresa a tu ruta inicial /, (al menos porque el URI de return según Google, no puede tener un /, es decir esto www.ejemplo.com/checkLogin ❌, solo esto www.ejemplo.com)

Entonces antes de hacer el login con google, el programa escribe window.localStorage.setItem('social', 'SignUp')
y cuando regresa al landing page, revisa si hay un usuario conectado && window.localStorage.getItem('social') === 'SignUp') cambia al usuario de ruta para que termine de crear su perfil.

El Problema (O mi novatada)

Si esta evaluación sobre 'social' === 'SignUp' es falsa, estaba ejecutando window.localStorage.clear() y esto elimina el usuario de Amazon Cognito del navegador 😅

Conclusión

No escribas window.localStorage.clear() mejor reemplaza el valor como window.localStorage.setItem('social', 'INIT') porque no sabes que otros paquetes de npm están usando la localStorage.

Discussion (0)

pic
Editor guide