AWS Cognito React UI

#react #aws #cognito #ui

Motivation

My purpose for programming is to eventually build something that can be used. Even if it is a simple Hello World! Hopefully a little more complicated.
Recently I've released 3 packages, one package that the other two depend on. I've open-sourced it so that I can receive feedback and hope for constructive dialog and put me on the path to a software developer career. So if your hiring, I'm interested.

Journey

I've been using AWS and React for a while. The only way you can put what you know to the test is to create something. If you run into obstacles along the way, you adapt and move on.

While I was reading Amplify library for Authentication docs, I also remember using Amplify Authenticator (@aws-amplify/ui-react) library to test my terraform Cognito. What I remember about the Authenticator library was that the UX was very restrictive a long time ago (A LONG time ago in the same galaxy).

I love AWS Amplify, it's very opinionated in certain things and it has to, for it to work. Too much customization and you have to code much of it yourself. That's when I came up with the thought, what if I gave UX designers the control. That's the problem I was going to solve.

First I didn't know how to approach the problem. I've been coding portions of the Amplify Auth library, never fully understanding it (can't say I do now either, but I read enough). I just know if the Authenticator library can do it, I can create it too, at least my way. I read the Cognito docs. I think the most important part was the User Pool Authentication Flow and happens to be written in the most obtuse way. I had re-read and re-read several times and some github issues to come to grasp with it. Tip Github issues may have solutions to the problems your thinking of. Sadly in this case, YouTube wasn't very helpful.

Understanding Cognito was one part of the pie. React was the other half. I definitely watched enough React videos on YouTube, did I understand enough to create my own NPM package? So over a 3 day weekend, I've coded up a working skeleton of it. While most of the coding was done over a weekend, the amount of knowledge was accumulated over a much longer time frame. Ran into a few hiccups as I wanted it done with TypeScript.

Once I had a MVP (minimum viable product), I had to figure out how to transform this into a package. Not a lot of tutorials/YouTube on the subject. There seems to be a way to go about it with Webpack and Babel and I had to learn what roles they filled. Then I've came across Rollup, which seem to work right out of the box. After a while, then I came across TSdx (The same guy that develop Formik, Jared Palmer)!!!

Once I was able to package it, I had to figure out how I could make a React and React Native package without duplicating the code. That's when I came up with the core package.

Perfection is the enemy of progress.
I kept on tinkering on how I could make this better before releasing it. So once I wrote the documentation on how to use it, I just published it to NPM without further delay.

npm publish  # Ahhhh!!!

I also dabble a little with sindresorhus/np before I ended up using npm publish.

So what is this NPM package?
aws-cognito-core-ui is the main package that handles all the decisions. The other two is framework specific placeholder, that comes with default UX. The idea is the Designer would come up with their own UX meeting the necessary requirements and pass it into AuthProvider. The Higher Order Component wraps around your App. Password protecting your App, through AWS Cognito.

Feel free to git clone it, add Formik, maybe a little Material UI, your special sauce, package it yourself and then publish to NPM.

Things I'm planning to work on:
UX design
Testing, a mix of React-testing Library and Cypress.
?Continuous Integration
Probably a few other things...

If clarifications are needed, please find me on Discord or leave a comment.