Feat: Login and signup functionality

[harshbhar0629]

There is no login and signup functionality in your website.

Please assign this issue to me under label gssoc-ext, hacktoberfest-accepted, level-3.

[harshbhar0629]

labels are: gssoc-ext, hacktoberfest-accepted, level-3 Because it required alot of code please apply all the labels:)

[harshit1142]

@harshbhar0629 how you are going to implement it ?

[harshbhar0629]

🚀 Feature Request
📝 Feature Description
We want login and signup feature it depends on email and password no two account exist for same email with the error handling.

🔧 How Will This Enhance the App?
If login and signup functionality integrate then no same account is occur and only valid account is occur which is stored in db: Database.

🎯 Use Cases
You can easily implement authentication and authorization using login and signup.

📦 Suggested Implementation

Folder Structure
BACKEND
Backend: It contains the whole backend of login and signup functionality.
Config: It connect the node environment to the database with dbConnect() function.
Controllers: In controllers there is a auth.js which is related to the authentication with all validation and i also used hashing(Bcrypt package) for to secure the password and also used Json-Web-Token for validation of token. No same user can create an account on this platform via same email address.
Models: There is only one model which is User model contains ["Firstname", "Lastname", "Email", "Password", "image-url", "token"].
.env file: In this file there are 3 deafult value you can add or edit accordingly
MONGODB_URL = mongodb://127.0.0.1:27017/ It req database url
JWT_SECRET = "MYSECRET" Select your token
PORT = 4000 Enter your port number

Index.js: There is basic setup of express and also used middlewares for parsing data.

UI
Components/Auth : There are 3 components are there Template.js LoginForm.js, SignupForm.js On the basis of condition I render Login and signupform respectively! There is simple setup for login and signup using tailwindCSS.
SignupForm : When user click on create account we call to backend for creating a user and also show toast for interactive UI.
LoginForm : When user click on Sign in we call to backend for checking this user exist or not and also hashed their password for matching this is same passsword or not.

Reducer: We combine all the reducer or slices which is used in login and signup functionality.
Slices: We create two slices 1. authSlice which mainly holds token and profileSlice contains the user data for future purpose like for creating a dashboard of user then data will be required so I secured all data for now!.
Services/operations: Inside operations there is one file authAPI which connects or call the backend from the client side and send response accordingly, There are 3 main functions are there LOGIN, SIGNUP, LOGOUT, In login and signup we take data from client side and make a call to apiConnector to pass the given data and show response accordingly!

Services/apiConnector.js: In this file it only recieve the given data from client side and return an axios instance with taking the method of call, data, url, headers, params

Services/api.js: In this file I'm mentioning the all routes of backend which is used in login and signup functionality!.

App.js: In App.js I'm creating a home page so every listing and everything lie on Home page and also create a route for login and signup.

Index.js: I just wrapped the App component in Provider of react-redux.
.env: It having REACT_BASE_URL you can edit acccordingly!

I also setup for tailwindCSS.

Now executable command is changed so Enter: npm run dev so that backend and frontend starts immediately! Please remeber the commands:) and also updates in readme.md file.

[harshit1142]

@harshbhar0629 But, it's a pure frontend website

[harshbhar0629]

@harshit1142 No issue with that I will also connect the frontend to backend for implementing login and signup.

[harshbhar0629]

Please assign to me with level-3, gssoc-ext, hactoberfest-accepted, we want all 3 labels because it required alot of code inside it:)