screen-capture.webm
You will need to have an Amazon Cognito Userpool and a DynamoDB created prior to this.
If you do not want to use Github and or Google Signin, you can disable this in the .env by setting the enabled flags to 0.
This project shows how to create a web application which utilizes next auth as an authentication layer.
The ability of signing in and registering etc is using a Cognito Userpool and amazon-cognito-identity-js.
The app does make use of other providers from NextAuth such as github and google, these can be controlled using env variables.
Using cognito, users are able to signin, signup, confirm account, forgot password and change password all using a custom journey.
There are two applications in this project called 'main' and 'members', main is the signin, signup etc application.. whereas members is a protected area only accessible once logged in.
Once users are signed in, they're put into a very simple user table in DynamoDB.
So if you come across a bug, raise a PR!, if you think there is a better way of doing something, raise a PR!
This entire project is supposed to aid folk in building a protected area using AWS Cognito and next auth, by all means copy this repo and code, but if you can improve it and help others please do so.
This project uses the following NextJS features:
For styling/Components Material UI for the layout and overall design these are all taken from: Free Material UI templates all components are examples from Material uis component library.
For tests this project uses Jest, React testing library and Cypress for acceptance criteria.
Zustand - Used for client side calls and maintaining state.
Material-ui - Components general styling.
Isomorphic-dompurify - Sanitizing query strings that come into the API/severside.
uuid - Used to inject an uuid into a cookie, so you can protect endpoints for only those who have a session, this also enables you to track a user through a frontend and backend calls.
zod - Schema validation for the endpoints
Navigate to the relevant app so 'main' or 'members'
To install run in each of the projects:
yarn installYou will need to set up a .env file taken from the .env.example in each project.
Once you have installed simply run in each of the projects, main will run on port 3000 and members will run on 3001
npm run devTo run:
npm run test:jest
# or
npm run test:cypressWhy did I make this? funsies...
Why stick users in a Dynamo DB? Soooo the DynamoDB is just used as a way to store a user, don't worry no credentials are stored, it's just a means to associate a user to a registered account with a unique ID, you could tie this into your own system, such as an ordering system, booking system etc....
Okay but why dynamoDB as its none relational? Because I'm cheap and this is a demo app...
Why use API endpoints instead of server side actions in NextJS? I basically prefer it, easier to detach. I usually prefer a client side action to a server side endpoint, easier on the ui for spinners, potential for code base to be separate and detachable, for example you could just delete the api endpoints and create an express app that handles those calls, API gateway with lambda association.... anything
Why no <SessionProvider>? So it's not really needed when doing the App directory route, that would just call the session callback method in NextAuth which I don't have because im doing everything for sessions severside and using the JWT strategy.
Who are ya? ME!