Login App - Create login form in ReactJS using secure REST API - Part 3 - Clue Mediator

import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import user from '../models/user';

export const signin=async (res,req)=>{
 const {email,password} =req.body;
 try {
    const existingUser=await userfindOne({email: email});
    if(!existingUser) return res.status(404).json({message: 'user doesnot exist'});
    const isPasswordCorrect=await bcrypt.compare(password,existingUser.password);
    if(!isPasswordCorrect) return res.status(400).json({message: 'invalid credintials'});
    const token=jwt.sign({email:existingUser.email,id:existingUser._id},process.env.SECRET,{expiresIn:'1h'})
    res.status(200).json({result:existingUser,token})
 } catch (error) {
    res.status(500).json({message:'something went wrong'})
 }
}
export const signup=async (res,req)=>{

}

import jwt from 'jsonwebtoken'
const auth=async (req,res,next)=>{
    try {
       const token=req.headers.authorization.split(''[1]);
       const isCustomAuth=token.length<500;
       let decodedData;
       if(token && isCustomAuth){
               decodedData=jwt.verify(token,process.env.SECRET);
              req.userId=decodedData?.id;
       }
       else{
        decodedData=jwt.decode(token);
        req.userId=decodedData?.sub;
       }
       next();
    } catch (error) {
        console.log(error);
    }
}

///eta bahire\\\
function useQuery(){
    return new URLSearchParams(useLocation().search)
}
/// then vitore\\\
const query=useQuery();
    const page=query.get(page)
    /// page name e kono query thakle tar value dibe\\\

//backend
//api

export const getPostsBySearch=async  (req,res)=>{
    const {searchQuery , tags}=req.query; 
    try {
       const title=new RegExp(searchQuery,'i');
       const posts=await PostMessage.find({$or:[{title},{tags:{$in:tags.split(',') }}]})
       //here we get tags as an array so finding the specific tag by spliting tags using array, because we get the array as an object here using ",". or = search by title or tags .RegExp = regex.

       res.json({data:posts})
    //    i for ignoring case 
    } catch (error) {
        
    }
}
//actions
 
export const getPostsBySearch=(searchQuery)=>async(dispatch)=>{
    try {
        
        const {data:{data}}=await api.fetchPostsBySearch(searchQuery);
        console.log(data);
    } catch (error) {
       console.log(error); 
    }
}
//action in front end

export const getPostsBySearch=(searchQuery)=>async(dispatch)=>{
    try {
        const {data:{data}}=await api.fetchPostsBySearch(searchQuery);
        console.log(data);
    } catch (error) {
       console.log(error); 
    }
}

 const {page}=req.query;
    console.log(page);
    try {
        const LIMIT=6; 
        // limit can be used dynamically
        const startIndex=(Number(page)-1 )* LIMIT;//getting the starting index of all the posts
        // converting page to Number because we get string as query

        const total=await PostMessage.countDocuments({});
        const posts = await PostMessage.find().sort({_id:-1}).limit(LIMIT).skip(startIndex); //skipping all the previous pages from loading
        
        res.status(200).json({data:posts,currentPage:Number(page),numberOfPages:Math.ceil(total/LIMIT)});
    }
    catch (error) {
        res.status(404).json({ message: error.message });

    }

 <Button component={Link} to='/auth' variant='contained'color='primary'>SignIn</Button>

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))

 	
	const fetchData = async () => {
        navigator.geolocation.getCurrentPosition(function(position) {
            /**
             * update in usestate array 
             */
            setLat(position.coords.latitude);
            setLong(position.coords.longitude);
        });

Client Side Code Test.jsx --
import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from 'firebase/auth';

// Firebase config - replace with your own config
const firebaseConfig = {
  apiKey: "AIzaSyCb9uireOMfRCFfJpWWr1WmKdP629rNcCk",
  authDomain: "trial-34ed7.firebaseapp.com",
  projectId: "trial-34ed7",
  storageBucket: "trial-34ed7.appspot.com",
  messagingSenderId: "71628620493",
  appId: "1:71628620493:web:7c44729da8f9c541e55f84",
  measurementId: "G-N9GPF8ZQMZ"
};

// Initialize Firebase App
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

function Test() {
  const [mobile, setMobile] = useState('');
  const [otp, setOtp] = useState('');
  let confirmationResult = useRef(null);

  useEffect(() => {
    configureCaptcha();
  }, []);

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name === 'mobile') {
      setMobile(value);
    } else if (name === 'otp') {
      setOtp(value);
    }
  };

  const configureCaptcha = () => {
    window.recaptchaVerifier = new RecaptchaVerifier(auth, 'sign-in-button', {
      'size': 'invisible',
      'callback': (response) => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        onSignInSubmit();
      }
    }, auth);
  };

  const onSignInSubmit = async (e) => {
    e.preventDefault();
    const phoneNumber = "+91" + mobile;
    console.log(phoneNumber);
    const appVerifier = window.recaptchaVerifier;
    try {
      confirmationResult.current = await signInWithPhoneNumber(auth, phoneNumber, appVerifier);
      console.log("OTP has been sent");
    } catch (error) {
      console.error("SMS not sent", error);
    }
  };

  const onSubmitOTP = async (e) => {
    e.preventDefault();
    try {
      const result = await confirmationResult.current.confirm(otp);
      const user = result.user;
      console.log(JSON.stringify(user));
      alert("User is verified");
    } catch (error) {
      console.error("User couldn't sign in (bad verification code?)", error);
    }
  };

  return (
    <div>
      <h2>Login Form</h2>
      <form onSubmit={onSignInSubmit}>
        <div id="sign-in-button"></div>
        <input type="text" name="mobile" placeholder="Mobile number" required onChange={handleChange} />
        <button type="submit">Submit</button>
      </form>

      <h2>Enter OTP</h2>
      <form onSubmit={onSubmitOTP}>
        <input type="text" name="otp" placeholder="OTP Number" required onChange={handleChange} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default Test;