Overview

Welcome!

  • Thank you for purchasing React Authentication Sign in & Sign up form Script product.
  • Welcome to our forms script, designed for seamless integration into your React applications.
  • This innovative solution allows you to effortlessly reuse and customize forms across your projects, boosting efficiency and consistency.
  • Below, you'll find comprehensive documentation to help you get started and maximize the potential of React Authentication Sign in & Sign up form Script .

Change Log

    :: VERSION 2.0 RELEASED ::

  • Unified Form Management: Now, manage all your forms (sign-in, sign-up, and forgot password) with a single, versatile template.
  • New Admin Dashboard: Introducing a feature-rich and visually appealing Admin Dashboard to streamline your form management and monitoring.

  • :: VERSION 1.0 WAS RELEASED ::

  • Initial Release: The first version of React Authentication Sign in & Sign up form Script providing essential form templates for your React applications.


Source & Credits

  • We are thankful to Favicon for providing the widest range of favicon icons and with that favicon icons we could create this favicon icons.
  • We are grateful to Google Web Font for providing the widest range of font-family and with this font-family we have been able to add this Roboto, sans-serif font-family.
  • We are thankful to React Icons for providing the most complete collection of free font icons, through which we have been able to include these React Icons icons.
  • We are grateful to freepik for providing the broadest range of royalty-free images and with those images we were able to add this.
Note:- Any media - Images, icons or logos used in previews are not included in this item and you need to contact authors to get permission in case you want to use them in your commercial or non-commercial projects. Read help file for more details after you purchase the product.


Requirements

Backend Requirement:

Frontend Requirement:

  • Technology:- React.Js
  • Technology Version:- 18

Getting Started

Follow these steps to set up your environment and start using React Authentication Sign in & Sign up form Script:

  • Extract the contents of the downloaded file to your desired directory.
  • downloaded-folder
  • Navigate to the React Authentication Sign in & Sign up form Script directory.
  • Inside this directory, you will find two folders as illustrated in the image below.
  • files

Use & Installation

    First, make sure you have installed Node.js and MongoDB before getting started. If not, please install them first.

  • To check if Node.js is installed successfully, open your system's terminal or command prompt and run the command node -v. This will display the installed version of Node.js.
  • User name setup

    Server or API Setup:

  • Navigate to the /backend folder, Inside this folder, you will find several files and subfolders, as shown in the illustration below:
  • api-folder
  • Open your terminal or command prompt. For this documentation, we will use Command Prompt (cmd) for the commands.
  • Type `cmd` in the folder's address bar, as shown below, and press Enter.
  • api-cmd
  • Once the command prompt is open in the /backend folder, run the npm install command to install the necessary packages for API setup:
  • Wait for the command to execute successfully and for all dependencies to be installed.
  • api-install
  • After the packages are installed, start your API server by running the npm run dev command
  • You should see the server running successfully on http://localhost:1010/.
  • api-rundev
    🎉Congratulations! your backend server setup is completed now go to the /frontend folder.

    Frontend Setup:

  • Navigate to the /frontend folder within the React Authentication Sign in & Sign up form Script directory.
  • ui-cmd
  • Next, run the same commands you used to start the /backend server. First, run npm install to install the necessary packages.
  • ui-install
  • Now to start your frontend development server, run the command npm run dev. After executing this command, you should see the URL http://localhost:3001 displayed, indicating that your development server is running.
  • ui-rundev
  • Now, copy the URL http://localhost:3001 and paste it into the address bar of your preferred browser. Press enter, and you will see the product running successfully!
  • browser address bar
  • 🎉Congratulations your both Backend and Frontend setup are done successfully!.

Customization

  • If you want to customize your form designs, navigate to the /frontend folder, then go to the /src/components/Forms directory. Inside this directory, you will find all the forms used in our prolist-react-form-script product.
  • forms

API & Email Integration

    API Integration:

  • We recommend using a secure and well-formatted API to manage your form data and for email verifications. If you want to use their pre-build API then remember that you will need to customize some form fields and code as per your needs, in this product we have included input fields on our form templates like name, email, password and confirm password is used.
  • Before integrating existing APIs, familiarize yourself with our backend and frontend connectivity. Understand how we have used the name attribute for input fields. This will help ensure smooth integration and functionality.
  • Email Integration:

  • To send an email verification link during user registration or a password reset link, you need to integrate an email sending service with your application. Follow these steps to implement email functionality effectively:
  • Ensure you have valid SMTP credentials, including:
    • Hostname: The address of your SMTP server (e.g., smtp.gmail.com).
    • Port: The port used by your SMTP server (e.g., 587 for TLS or 465 for SSL).
    • Username: The email address or username associated with your SMTP account.
    • Password: The password or app-specific password for your SMTP account.
  • Now, navigate to the /backend/controller/Auth.js file and customize the code by replacing the SMTP credentials with your actual SMTP credentials as shown in the image below.
  • Email Setup
  • Navigate to /backend/controller/UserController.js file and replace 'username' with your actual username as shown in the image below.
  • User name setup
  • By following these steps, you can effectively implement email functionality in your application for sending verification and password reset link."

Supports

Need support?

We will be happy to talk to you, do not hesitate to mail us if there is any problem with our products or you just want to chat. You may reach us at support@designcollection.in

Support requests are being processed on business days Monday to Friday 10:30 to 18:00 (GMT +5:30) up to 2 business days.


Item support policy:

  • Team-viewer, AnyDesk, Skype, Phone Calls, Signal, and Whatsapp supports are not available.
  • Support Via E-Mails and Support requests are being processed on business days Monday to Friday 10:30 to 18:00 (GMT +5:30) for up to 2 business days.
  • Support Subscription Must be active to available support.
  • Installation and Updation services are Not Free
  • after taking customization either self or from other developers then we will not able to provide support.
  • Offline Installation and Updation services are Not possible for us.
😊

Thanks & Support

We appreciate your support and interest in our project! If you have any questions, suggestions, or need further assistance, please feel free to reach out.