How To Use Google reCAPTCHA v3 in Next.js 14 With Server Actions?
Hello, my friends and fellow developers!
In this video, we cover how you can use Google's reCAPTCHA v3 in your Next.js 14 project and how you can use it with server actions!
I also explained how it works behind the scenes and we don't use any external library for this use-case
Let me know in the comments below if you want more Next.js content or something else.
Links mentioned in the video:
GitHub Repo:
reCAPTCHA V3 Docs Client Side:
reCAPTCHA V3 Docs Server Side:
Google Sheets Tutorial:
Timestamps:
00:00 - Intro
00:15 - Register in admin console
01:56 - Starter project walkthrough
03:03 - How reCAPTCHA works
05:27 - Environment variables
07:06 - grecaptcha types package
07:39 - Adding reCAPTCHA script
09:55 - Generate reCAPTCHA token in client side
17:44 - Verify reCAPTCHA token in server action
23:17 - Creating types for token verification response
25:25 - Continue server action
27:14 - Show success or error on frontend
27:46 - Adding types for error codes
28:22 - Test handling of errors
28:55 - Conclusion
Other Tutorials:
️ React and Material UI Todo App:
Other JavaScript videos:
Visual Studio Code videos:
Build a Battery App in JS:
Connect :
Twitter:
Facebook:
Github:
VS Code Theme used: Default Dark Modern
Suggest, ask doubts in the comments and share these videos to help!
Thanks for Watching!
Watch video How To Use Google reCAPTCHA v3 in Next.js 14 With Server Actions? online without registration, duration 29 minute 37 second in high hd quality. This video was added by user Max Programming 07 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2 thousand once and liked it 57 people.