This is a small project with a login system, with Next-Auth technology. At first the project started as just a login layout and was gaining proportions. The project consists of several strategies like custom Hook to validate text fields, organized folder structure and much more.
Users should be able to:
- See the optimal layout for the site, depending on the screen size of your device
- See all interactive elements on the page
- You can register
- If you are registered, you can then login
- See all the possible validation errors.
- Node.js 12.22.0 or later
- MacOS, Windows (including WSL), and Linux are supported
Get the code by either cloning this repository using git
git clone https://github.com/smartinsdev/simple-system-signin-signup
... or downloading source code code as a zip archive.
Once downloaded, open the terminal in the project directory, and install dependencies with:
npm install
or
yarn
Configure your local environment:
cp .env.local.example .env.local
Then start the example app with:
npm run dev
or
yarn dev
The app should now be up and running at http://localhost:3000 🚀
The project was started in order to learn even more about session strategies, tokens, text field validations, email and password. I found some difficulties in the beginning because I'm still getting to know the Next-Auth tool proposal. The field validations I found the best way to do is to make a custom hook and this saves me time in the development. All the functions and variables are typed with TypeScript.
I implemented redirect routes if the user doesn't have a session yet and also when the user does his registration he will be redirected to the login page.
The whole project was styled with Tailwindcss
- Next.js - The React Framework for the Web
- Next-Auth - Authentication for Next.js
- Prisma - for ORM database
- TypeScript - For types
- Tailwindcss - For styles
- Heroicons - For Icons
- Bcryptjs - For Password encryption
- Developing a custom hook
- Text, email and password validations
- Session Strategies
- Tokens and cookies strategies
- Route Redirections
- Rest API
- Extending the types of Next-auth to customize
- Linkedin - @martinssjunior
- Twitter - @smartinsdev