A simple login page developed at b2bit selective process using NextJS, TypeScript and Styled Components for styling. This app contains an authentication page that uses a JWT token to get user info from the server and display it on next page.
The main focus was to implement authentication and get data from an API provided by the company.
When the user clicks in the "Sign in" button, the application must send a request to the API with the information given by the user. If the request is successful, the user must be redirected to a page only accessible by authenticated users.
2. As a user, I want to keep me signed in, so I don't need to put my credentials every time I open the system
When the user clicks in the "Sign in" button, the application must send a request to the API with the information given by the user. If the request is successful, the user tokens must be persisted in the LocalStorage.
⚠️ WARNING: store the user's token in LocalStorage is not the best of the practices. That said, use this only for this challenge 🙂
3. As a user, I want to have a feedback if I fill the wrong credentials, so I know that I did something wrong and can fix it
When the user clicks in the "Sign in" button, the application must send a request to the API with the information given by the user. If the request fails, the user must be prompted with a message saying that the request has failed.
4. As a user, I want to have a home page with my personal information, so I can see my personal info
This is the page with the user information. Use the jwt access token you have received in the login page to fetch the user's info from the server. When your request succeeds, display the image just like the mockup presented above.
In the upper right corner of the page, you will see a "Logout button". This button will remove any user credentials from Local Storage and redirect her to the original sign-in page.
- ReactJS as library
- NextJS as framework
- TypeScript as programming language
- Styled Components for styling
- React Hook Form for forms
- Yup for form validation
- React Toastify for the warnings
You can access the application layout in the Figma prototype.
The application can be accessed here.
To run this project in the development mode, you'll need to have:
On terminal, clone de repository and go to the directory
$ git clone https://github.com/igoormichaeel/b2bit-selective-process.git
$ cd b2bit-selective-processAnd execute the following command to install all de dependencies:
$ yarnThen, to runs the app in the development mode, execute:
$ yarn devOpen http://localhost:3000 to view it in the browser.