{"id":15155587,"url":"https://github.com/gr7800/simplifii_assinment_login_flow","last_synced_at":"2026-03-05T18:41:45.273Z","repository":{"id":253585987,"uuid":"842363690","full_name":"gr7800/Simplifii_Assinment_Login_Flow","owner":"gr7800","description":"This project is a user authentication system built with React, Redux, and Node.js. It includes features for user registration, login, OTP (One-Time Password) handling, and JWT (JSON Web Token) authentication.","archived":false,"fork":false,"pushed_at":"2024-08-21T14:44:50.000Z","size":613,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T01:07:43.291Z","etag":null,"topics":["css","express-js","github-config","ht","html","html5","javascript","jwt","mongodb","mongoose","nodejs","nodemailer","npm-package","react-router-dom","reactjs","redu","redux","redux-toolkit","restful-api"],"latest_commit_sha":null,"homepage":"https://simplifii-guddu.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gr7800.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-14T07:44:18.000Z","updated_at":"2024-08-21T14:44:54.000Z","dependencies_parsed_at":"2024-09-26T18:40:56.817Z","dependency_job_id":"d5d78254-01b9-4afd-b049-d97bf1e5efa2","html_url":"https://github.com/gr7800/Simplifii_Assinment_Login_Flow","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.125,"last_synced_commit":"16b641bbaf24b1c16deebb155dcac573c7d56a32"},"previous_names":["gr7800/simplifii_assinment_login_flow"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr7800%2FSimplifii_Assinment_Login_Flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr7800%2FSimplifii_Assinment_Login_Flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr7800%2FSimplifii_Assinment_Login_Flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr7800%2FSimplifii_Assinment_Login_Flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gr7800","download_url":"https://codeload.github.com/gr7800/Simplifii_Assinment_Login_Flow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237964458,"owners_count":19394402,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","express-js","github-config","ht","html","html5","javascript","jwt","mongodb","mongoose","nodejs","nodemailer","npm-package","react-router-dom","reactjs","redu","redux","redux-toolkit","restful-api"],"created_at":"2024-09-26T18:40:49.383Z","updated_at":"2025-10-24T12:30:39.911Z","avatar_url":"https://github.com/gr7800.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\n\n# Login Flow\n\nThis project is a user authentication system built with React, Redux, and Node.js. It includes features for user registration, login, OTP (One-Time Password) handling, and JWT (JSON Web Token) authentication.\n\n## Features\n\n- **User Registration**: Allows new users to register with email and receive an OTP for verification.\n- **User Login**: Enables users to log in using their email and OTP.\n- **OTP Management**: Send and resend OTPs to users via email.\n- **JWT Authentication**: Secure user authentication using JWT tokens.\n- **Responsive Design**: User interface built with React and styled with Tailwind CSS.\n\n## Installation\n\n### Frontend\n\n#### Deployed Url:- `https://simplifii-guddu.netlify.app`\n\n1. **Clone the Repository**\n\n   ```bash\n   git clone https://github.com/yourusername/login-flow.git\n   cd login-flow\n   ```\n\n2. **Install Dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Start the Development Server**\n\n   ```bash\n   npm start\n   ```\n\n### Backend\n\n#### Deployed Url:- `https://simplifii-assinment-login-flow.onrender.com`\n\n\n---\n\n## Overview\n\nThis project is a Node.js application using Express for the backend with JWT authentication and OTP-based user registration. It also uses Nodemailer for sending OTPs via email.\n\n## Technologies Used\n\n- **Node.js**: JavaScript runtime for server-side development.\n- **Express**: Web application framework for Node.js.\n- **Mongoose**: MongoDB object modeling tool.\n- **JWT**: JSON Web Token for authentication.\n- **Nodemailer**: Module for sending emails.\n- **dotenv**: Module to load environment variables from a `.env` file.\n- **CORS**: Middleware for enabling Cross-Origin Resource Sharing.\n\n## Setup\n\n1. **Install Dependencies**\n   ```bash\n   npm install\n   ```\n\n2. **Configure Environment Variables**\n   Create a `.env` file in the root directory and add the following variables:\n   ```\n   EMAIL=your_email@gmail.com\n   PASSWORD=your_email_password\n   JWT_SECRET=your_jwt_secret\n   PORT=8080\n   ```\n\n3. **Start the Server**\n   ```bash\n   npm start\n   ```\n\n## Routes\n\n### 1. Register User\n\n- **Endpoint**: `/user/register`\n- **Method**: `POST`\n- **Description**: Registers a new user after validating the OTP.\n- **Request Body**:\n  ```json\n  {\n    \"email\": \"user@example.com\",\n    \"name\": \"User Name\",\n    \"mobile\": \"1234567890\",\n    \"isd\": \"+1\",\n    \"otp\": \"123456\"\n  }\n  ```\n- **Responses**:\n  - `201 Created`: Successfully registered.\n  - `404 Not Found`: User already registered.\n  - `400 Bad Request`: Invalid OTP.\n  - `500 Internal Server Error`: Server error.\n\n### 2. Get OTP\n\n- **Endpoint**: `/user/getotp`\n- **Method**: `POST`\n- **Description**: Sends an OTP to the specified email.\n- **Request Body**:\n  ```json\n  {\n    \"email\": \"user@example.com\"\n  }\n  ```\n- **Responses**:\n  - `200 OK`: OTP sent successfully.\n  - `409 Conflict`: Email already registered.\n  - `500 Internal Server Error`: Server error.\n\n### 3. Resend OTP\n\n- **Endpoint**: `/user/resendotp`\n- **Method**: `POST`\n- **Description**: Resends a new OTP to the specified email.\n- **Request Body**:\n  ```json\n  {\n    \"email\": \"user@example.com\"\n  }\n  ```\n- **Responses**:\n  - `200 OK`: OTP resent successfully.\n  - `404 Not Found`: User not found.\n  - `500 Internal Server Error`: Server error.\n\n### 4. Login User\n\n- **Endpoint**: `/user/login`\n- **Method**: `POST`\n- **Description**: Logs in a user after verifying the OTP.\n- **Request Body**:\n  ```json\n  {\n    \"email\": \"user@example.com\",\n    \"otp\": \"123456\"\n  }\n  ```\n- **Responses**:\n  - `201 Created`: Login successful with JWT token.\n  - `404 Not Found`: User not found.\n  - `400 Bad Request`: Invalid OTP.\n  - `403 Forbidden`: User is locked out.\n  - `500 Internal Server Error`: Server error.\n\n### 5. Get User Details\n\n- **Endpoint**: `/user/singleuser`\n- **Method**: `GET`\n- **Description**: Retrieves user details based on JWT token.\n- **Headers**:\n  - `token`: JWT token (required)\n- **Responses**:\n  - `200 OK`: User details retrieved successfully.\n  - `403 Forbidden`: Unauthorized (Invalid token).\n  - `404 Not Found`: User not found.\n  - `401 Unauthorized`: Invalid token.\n\n## Middleware\n\n### 1. Verify Token Middleware\n\n- **Path**: `Middleware/Authentication.Middleware.js`\n- **Description**: Verifies the JWT token provided in the request headers. Adds user information to the request object if valid.\n\n### 2. OTP Limit Middleware\n\n- **Path**: `Middleware/LoginAttempt.Middleware.js`\n- **Description**: Limits the number of OTP attempts. Locks the user out for 30 minutes after 5 incorrect attempts.\n\n## User Model\n\n- **Schema Fields**:\n  - `name`: User's name (required).\n  - `email`: User's email (required, unique).\n  - `mobile`: User's mobile number (required).\n  - `isd`: International dialing code (required).\n  - `otp`: OTP for verification (default: \"1234\").\n  - `otpAttempts`: Number of OTP attempts (default: 0).\n  - `lockoutUntil`: Date until which the user is locked out (default: null).\n\n---\n---\n\n## Technologies Used\n\n- **Frontend:**\n  - **React:** For building user interfaces.\n  - **React Router DOM:** For routing and navigation within the application.\n  - **Tailwind CSS:** For styling and layout.\n  - **Redux:** For state management.\n  - **React-Toastify:** For displaying notifications.\n\n- **Backend:**\n  - **Node.js** (Assumed): For handling server-side logic (details not provided).\n\n## Routing Details\n\n### MainRoutes Component\n\n- **Location:** `src/Routes/MainRoutes.js`\n- **Description:** Defines the main routes of the application.\n\n#### Routes\n\n1. **Home Route**\n   - **Path:** `/`\n   - **Component:** `PrivateRoute` wrapped around `Home`\n   - **Description:** Accessible only for authenticated users. Redirects to login if the user is not authenticated.\n\n2. **Register Route**\n   - **Path:** `/register`\n   - **Component:** `Signup`\n   - **Description:** Allows users to register by providing their details and receiving an OTP for verification.\n\n3. **Login Route**\n   - **Path:** `/login`\n   - **Component:** `Login`\n   - **Description:** Provides a login form for users to access their accounts.\n\n### PrivateRoute Component\n\n- **Location:** `src/Routes/PrivateRoute.js`\n- **Description:** Protects routes that require authentication. Checks if the user is authenticated and handles token verification.\n\n#### Key Points\n\n- **Authentication Check:** Uses Redux to check if the user is authenticated.\n- **Token Handling:** Retrieves token from local storage and verifies user status.\n- **Loading State:** Displays a loading indicator while checking authentication status.\n- **Redirect:** Redirects unauthenticated users to the login page.\n\n### Signup Component\n\n- **Location:** `src/Page/Signup/Signup.js`\n- **Description:** Handles user registration, including form validation, OTP handling, and user registration.\n\n#### Key Features\n\n- **Form Fields:**\n  - Salutation\n  - Name\n  - Country Code\n  - Mobile Number\n  - Email\n  - OTP (conditionally shown based on button state)\n  \n- **Button States:**\n  - **\"Get OTP on email\":** Initiates OTP request.\n  - **\"Submit\":** Submits registration details and OTP for verification.\n\n- **OTP Handling:** Manages OTP request and submission with a timer for re-sending OTP.\n- **Validation:** Validates form inputs and OTP before submission.\n\n### Home Component\n\n- **Location:** `src/Page/Home/Home.js`\n- **Description:** Displays a welcome message to authenticated users.\n\n#### Key Features\n\n- **User Greeting:** Displays the logged-in user's name and a welcome message.\n- **Navbar:** Includes a navigation bar component for user interactions.\n\n---\n\n## Contributing\n\n1. Fork the repository.\n2. Create a new branch for your feature or fix.\n3. Commit your changes and push to your branch.\n4. Open a pull request.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n---\n\nFeel free to modify or add any specific details based on your actual project setup!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgr7800%2Fsimplifii_assinment_login_flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgr7800%2Fsimplifii_assinment_login_flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgr7800%2Fsimplifii_assinment_login_flow/lists"}