DEV Community: Ahmet Akinsel

Integrating Google reCAPTCHA

Ahmet Akinsel — Thu, 16 Nov 2023 11:08:23 +0000

To integrate Google reCAPTCHA in your project, you need to perform the following steps for both the API and frontend:

1-Set up reCAPTCHA API:

Go to the Google reCAPTCHA website (https://www.google.com/recaptcha).
Sign in with your Google account. (youremail@gmai.com)
Register your website and obtain the reCAPTCHA Site Key and Secret Key.

2-Install the necessary dependencies:

Install the react-google-recaptcha package for the frontend using npm or yarn.

3-Frontend Integration:

Import the required components from the installed package: ReCAPTCHA from "react-google-recaptcha".
Create a reference using useRef to access the reCAPTCHA component.
Set up the necessary states to manage the form data, validation, and reCAPTCHA token.
Render the reCAPTCHA component using the obtained Site Key from the API.
Implement event handlers to handle form submission and user actions (e.g., toggling password visibility).
Validate the form fields and display error messages if necessary.
Use the getValue() method of the reCAPTCHA reference to get the user's response and set the token state.
Pass the obtained token along with other form data to your API request.

4-Backend Integration:

Implement an API endpoint to receive the form data and reCAPTCHA token.
Verify the reCAPTCHA token using the reCAPTCHA Secret Key obtained in step 1.
If the token is valid, proceed with processing the form data. Otherwise, return an error.
Please note that the provided code is only the frontend part and assumes you have implemented the backend API separately.
Remember to replace the placeholder "REACT_APP_GOOGLE_RECAPTCHA_SITE_KEY" with the actual Site Key obtained from the Google reCAPTCHA website.
Make sure to handle the API request to postUser on your server-side code. You can find the integration example on your-platform-api and your-platform-fe

How to create a delete endpoint with node.js and MySql

Ahmet Akinsel — Thu, 31 Mar 2022 07:40:27 +0000

Define your endpoint on routes.js file.

router.delete( "/delete-user/:userId", authentication, authorise({ roles: [ADMIN] }), deleteUserById );

In this endpoint we use url, middlewares and controller.

First define your url,
Check if the user logged in, (authentication)
Authorise if user is admin, guest what so ever. (authorise- OPTIONAL)
define the controller.

Our endpoint deletes user records by user id.That means it checks user's id from req.params, validates it with yup then removes user with action function then it gives the response.

const removeUserById = require("~root/actions/users/removeUserById");
const handleAPIError = require("~root/utils/handleAPIError");
const deleteUserByIdSchema = require("./schemas/deleteUserByIdSchema");

const deleteUserById = async (req, res) => {
  const { userId } = req.params;

  try {
    await deleteUserByIdSchema.validate(
      { userId },
      {
        abortEarly: false
      }
    );

    await removeUserById({
      userId
    });

    res.status(200).send();

  } catch (err) {
    handleAPIError(res, err);
  }
};

module.exports = deleteUserById;

Quick tip: Controller:"delete" (Controllers always named as CRUD operations. Thats why controllers always named as delete,put,post,get etc.) => Action:"remove"

After creating your controller create your action. Action is an async function. It has userId as parameter and it returns {deleteUser}.

const deleteUserById = require("./queries/deleteUserById");

const removeUserById = async ({ userId }) => {
  const deletedUser = await deleteUserById({ userId });
  return { deletedUser };
};

module.exports = removeUserById;

Once you create your action you need a query for it. Create a queries folder inside your removeUserById folder. We are using MySQL for this project. Basically we need to tell our database that "find the user record associated with user_id from users table".

const { submitQuery } = require("~root/lib/database");

const deleteUserById = ({ userId }) => submitQuery`
  DELETE FROM users   
  WHERE user_id = ${userId};
`;

module.exports = deleteUserById;

After creating your query we can validate the process with yup. Create a schemas folder inside deleteUserById folder. You can validate if user_id is number,required?, positive(!-), integer? or has a label("").

const yup = require("yup");

const deleteCuttingToolByIdSchema = yup.object().shape({
  userId: yup
  .number()
  .required()
  .positive()
  .integer()
  .label("User ID")
  .typeError("User ID must be a number.")
});

 module.exports = deleteCuttingToolByIdSchema

After this process your need to play with projects database-schema. In this scenario we have a parent table which is users table. Also there are 2 child tables. That's why we can use ON DELETE CASCADE command from MySql. This command deletes the record for every records that includes ON CASCADE DELETE command. It follows. That's why we put that command to FOREING KEYs. Below changes should be made to any table which references user_id column.

FOREIGN KEY (user_id) REFERENCES users(user_id) ON DELETE CASCADE

Test it on Postman by making a call to DELETE /delete-user/1

Git/Github workflow and Tips

Ahmet Akinsel — Fri, 25 Feb 2022 08:52:10 +0000

This post is written to guide and help the junior software developers. I want to share the useful tips and information I learned about Git/Github during my first 3 months of experience.

Before starting to work, always pull the latest from the master.
Always work on a separate branch.
Prevent direct commits, don't git push straight to the master.
All commits should be pushed to the master through "pull requests".
Pay attention to branch naming conventions.
Write meaningful commit messages. You can use “verb + context” pattern when commenting on descriptions in PRs. e.g: fixed card width.
Make sure to write a PR description about the work you have done or the problems you encounter.
Track the PRs that you created. Don’t forget to check all the changes requested and pipelines. Make sure all checks have passed.
Avoid committing large files. Optimum commit is between 300-500 lines of code.
Delete outdated branches.
Always check your github notifications.

Some useful git commands:

git diff (shows unstaged changes since last commit)
git reset (undoes git add before commit)
git log (shows a list of all the commits made to a repository)
git push –no-verify (uploads local repository content to a remote repository without verification)
git status (gives all the necessary information about the current branch)
git branch (viewing branches)
git branch -r (shows your remote branches)
git checkout -b <branch-name> (creates a new branch)
git checkout - (switches back to previous branch)
git checkout -- . (cancels all changes for the current branch you're working on)
git reset --hard origin/master (this commands basically forgets everything on your current local branch and makes it exactly the same as the origin/master)

How to merge your current branch with another branch?

Step 1: Commit and push your changes to your current branch.
Step 2: Switch from your current branch to the branch you want to merge.
Step 3: git pull. Make sure the branch you want to merge has the latest version before you merge your branches, otherwise you may face conflicts or other problems.
Step 4:git merge <branch-name> you can merge your feature branch into the branch you want to merge.
Step 5: push your changes.

How to resolve conflicts?

Step1: To resolve a conflict git checkout master and pull the latest.
Step2: git checkout <target branch>.
Step3: git merge master

After this process if everything is fine no error message will appear. If it's not, a message will appear that says "This branch has conflicts that must be resolved". In this stage you'll need to fix the conflict manually in Github or your code editor. Open your code editor and accept the current changes (what's on your branch), incoming changes (master) accept one of these options or both according to your needs.