Build your own Captcha with Next.js/React [Tutorial]

Published: 31 October 2022
on channel: Coding With Dawid
14,755
252

In this tutorial we are going to build our own and custom captcha with Next.js/React.js, cookies and session. The captcha is going to protect our contact form from spamming.

Demo: https://nextjs-captcha.vercel.app/
Code and images: https://github.com/dejwid/nextjs-captcha

Timestamps:
00:00:00 - Intro and demo
00:00:54 - Next.js setup and html structure
00:04:39 - Building captcha component
00:12:09 - Captcha image api endpoint
00:17:50 - Adding session (iron-session)
00:23:44 - Saving random images to session
00:33:42 - Selecting captcha images functionality
00:40:13 - Sending form functionality
00:45:27 - /send api endpoint
00:48:32 - validating captcha
00:57:18 - reseting captcha images and selection
01:07:56 - Outro


Watch video Build your own Captcha with Next.js/React [Tutorial] online without registration, duration hours minute second in high quality. This video was added by user Coding With Dawid 31 October 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 14,755 once and liked it 252 people.