NextJs Form Validation Example
This app can be an introduction to privacy awareness / OSINT or as an example of data validation.
Highlights
- NextJs, ChakraUi and React Hooks
- Read your browser informations and display some of them
- Phone and email checking
- Simple strengh password check (to be improved)
Prerequisite
Need node or yarn installed on your machine
- API KEY for Mapbox
- API KEY for astroip
- API KEY for numverify
- API KEY for whoisxmlapi
Create a file
.next.config.js
at your root level with this content
module.exports = {
env: {
MAPBOX_KEY: "your_api_key_here",
ASTROIP_KEY: "your_api_key_here",
NUMVERIFY_KEY: "your_api_key_here",
MAILVERIFY_KEY: "your_api_key_here",
},
};
Install
npm install
npm run dev
# or
yarn install
yarn dev
Usage
While loading the first page
- Check your broswer parameters and connection informations.
- A map will display your ip geolocation.
Clicking on the submit button will refresh your informations.
What's the Phone input is doing?
- retrieve an example of the phone format from your country IP location and put it in the placeholder.
- Checking and identify any national and international.
what's the email input doing?
- Verify existence, validity and quality of any email address.
- Get the domain logo from their twitter profile picture.
what's the password is doing?
- Check how many number, uppercase, lowercase and special characters
- It check how many bit there are inside the password