React Hooks: JWT Authentication (without Redux) example - BezKoder

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>

# AWS : aws-cli > 2.0

# CREATE AUTHORIZER !!!
# authorizer-name: Assign an authorizer name
# api-id: Http APIGateway ID
# audience: audience specified by the authorizer
# Issuer: Authorizer URL
aws apigatewayv2 create-authorizer \
    --name authorizer-name \
    --api-id api-id \
    --authorizer-type JWT \
    --identity-source '$request.header.Authorization' \
    --jwt-configuration Audience=audience,Issuer=https://cognito-idp.us-east-2.amazonaws.com/userPoolID


    # ADD LAMBDA (CUSTOM) AUTHORIZER TO ROUTE !!!
# api-id: Http APIGateway ID
# route-id: Gateway Route ID
# authorizer-id: You authorizer ID created by above command    
aws apigatewayv2 update-route \
   --api-id $api_id  \
   --route-id $route_id  \
   --authorization-type "CUSTOM" \
   --authorizer-id $auth_id    

   
# ADD JWT AUTHORIZER TO ROUTE !!!
# api-id: Http APIGateway ID
# route-id: Gateway Route ID
# authorizer-id: You authorizer ID created by above command
# authorization-scopes: if authorizer requires extra scopes
aws apigatewayv2 update-route \
   --api-id api-id  \
   --route-id route-id  \
   --authorization-type JWT \
   --authorizer-id authorizer-id \
   --authorization-scopes user.email   

  const getMovies = async (url) => {
    setError(null);
    try {
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error("Something went wrong!");
      }

      const data = await response.json();
      
      if (data.results.length === 0) {
        throw new Error("Sorry, no movies were found.");
      }
      
      const transformedMovies = data.results.map((movie) => {
        return {
          id: movie.id,
          title: movie.title,
          description: movie.overview,
          rating: movie.vote_average,
          genres: movie.genre_ids,
          poster_path: movie.poster_path,
          backdrop_path: movie.backdrop_path,
          year: movie.release_date
        }
      })
      setTotalPages(data.total_pages);
      setMovies(transformedMovies);
      chooseMovie(transformedMovies);
    } catch (errorThrown) {
      setError(errorThrown.message);
    }
  }

  def search
    baseurl = "https://api.themoviedb.org/3/discover/movie?api_key=#{ENV['REACT_APP_TMDB_API_KEY']}&language=en-						US&sort_by=popularity.desc&with_watch_monetization_types=flatrate&include_adult=false&include_video		=false&page=${moviePageIndex}";
    urladdon = params[:urlAddon]

    require 'uri'
    require 'net/http'

    uri = URI("#{baseurl}#{urladdon}")
    res = Net::HTTP.get_response(uri)

    if res.is_a?(Net::HTTPSuccess)
      render json: res.body
    else
      render json: res.body, status: :bad_request
    end
  end

const rootDomElement: any = document.getElementById('root');
const newBlock = (
      <div>
        <p>The New Content</>
      </div>
  );
ReactDOM.createPortal(newBlock, rootDomElement);


// you can return it too
// return ReactDOM.createPortal(PDFPopup, RootDomElement);