Practical Exercise-Alyah Software-Developers: Role-Based User Registration,

Login, and Navigation System

Overview:

As part of your role as a React Developer at Alyah Software, you are tasked with implementing
a Role-Based User Registration and Login System with secure authentication and dynamic
navigation. The backend of this system will be built with Laravel and MySQL, while the
frontend will be implemented using React. The system should allow users to register, log in, and
be redirected to personalized dashboards based on their assigned roles. Access to specific
features should be restricted based on the user’s role.

Requirements:

1. User Registration:
o Implement a registration form where users can provide their username, email
address, password, and select their role (e.g., Admin, User, Manager).
o Passwords should be securely hashed using Laravel’s built-in bcrypt before being
stored in the MySQL database.
o The role selected during registration should be stored in the database and should
dictate the user's access level within the application.
2. User Login:
o Design a login form that allows users to enter their username/email and
password.
o Implement proper error handling for invalid login attempts and ensure meaningful
error messages are displayed when fails (e.g., incorrect credentials or missing
fields) login.
o Upon successful authentication, users should be redirected to their appropriate
dashboard based on their role.
o Use Laravel’s built-in authentication (e.g., Sanctum or Passport for API-based
authentication) to securely manage user sessions or JWT tokens for
authentication.
3. Role-Based Navigation:
o After logging in, users should be redirected to their dashboard, which should be
tailored based on their role:
 Admin Dashboard: The Admin should have access to features like user
management, system configuration, and viewing system logs.
 Manager Dashboard: The Manager should be able to manage projects,
reports, and operational data.
 User Dashboard: The User should have access to their personal profile,
tasks, or basic system information.
o The navigation menu should adapt dynamically, showing only the relevant
options based on the logged-in user’s role. Unauthorized access to restricted areas
should result in a redirect to the appropriate error page or denial with a proper
message.
4. Access Control:
 o Implement role-based access control (RBAC) using Laravel's Gate or Policies
to ensure that users only have access to their respective resources or pages:
 An Admin should have access to all areas, including other users' data.
 A Manager should have access to management tools, but should be
restricted from accessing Admin-level resources.
 A User should only have access to their personal data and non-
administrative sections.
o Unauthorized attempts to access protected routes or pages should result in a
proper redirect to an error page or a denial with an appropriate message.
5. UI/UX Design:
o Design intuitive and responsive forms for both registration and login, with clear
validation messages and error handling.
o Ensure that the dashboard views are responsive and user-friendly, providing a
seamless experience across various screen sizes.
o Implement a logout feature that clears the session or JWT token and redirects the
user back to the login page.
6. Security & Best Practices:
o Use Laravel’s built-in authentication features (e.g., Sanctum for API token
authentication or Laravel Passport for OAuth).
o Secure the passwords using bcrypt or argon2, ensuring that they are stored
securely in the database.
o Ensure that JWT tokens or session cookies are securely stored and transmitted to
protect against common security vulnerabilities like CSRF and XSS.
o Implement CSRF protection in forms, particularly when performing user
registration or login.
o Ensure proper error handling to avoid exposing sensitive information in the case
of login failures or unauthorized access attempts.

Tools & Technologies:

 Frontend: React.js for the user interface, managing registration and login forms, and
role-based navigation.
 Backend: Laravel 8+ with Sanctum or Passport for authentication, and MySQL as the
database.
 Authentication: Use Laravel’s authentication system (Sanctum/Passport) to manage
user sessions and JWT tokens.
 Database: MySQL for storing user credentials, roles, and other necessary data.
 State Management: React Context API or Redux to manage the user’s authentication
state and role.

Deliverables:

1. A fully functional registration form with user role selection, secure password hashing,
and data storage in the MySQL database.
2. A login form with user authentication, JWT token or session-based management, and
proper error handling for failed login attempts.
 3. Dynamic role-based navigation menus that adapt to the logged-in user's role.
4. Role-based dashboard pages tailored to each user role (Admin, Manager, User).
5. Secure access control mechanisms ensuring users only have access to the appropriate
areas.
6. Responsive UI/UX design for forms and dashboards.
7. Logout functionality that properly clears session data or JWT tokens.
8. Proper security practices for password handling, session management, and API
authentication.

Expected Outcome:

The final implementation should provide a role-based authentication system, ensuring that users
can securely register, log in, and access specific pages or features based on their assigned roles.
The system should adhere to best practices in security, usability, and responsiveness.