React Application error "The server responded with error 401 (unauthorized) "-CodePudding

I am working on a user registration project on ReactJS and got stuck on a problem when I try to activate the user account. The backend server is giving me the error 401: Failed to load resource: the server responded with a status of 401 (Unauthorized). What might be the problem here, I was not able to find out any solution related to my code, can anyone help ??

Here is my code for Activation.jsx:

import React, { useState, useEffect } from 'react';
import authSvg from '../assests/welcome.svg';
import axios from 'axios';
import jwt_decode from 'jwt-decode';
import {  isAuth } from '../helpers/auth';
import {  Navigate , useParams} from 'react-router-dom';

const Activate = ({ match }) => {
  const [formData, setFormData] = useState({
    name: '',
    token: '',
    show: true
  });

  match = useParams();

  useEffect(() => {
    let token = match.token;
    console.log(token);
    let { name } = jwt_decode(token);

    if (token) {
      setFormData({ ...formData, name, token });
    }

    console.log(token, name);
  }, [match.params]);
  const { name, token, show } = formData;

  const handleSubmit = e => {
    e.preventDefault();

    axios
      .post(`${process.env.REACT_APP_API_URL}/activation`, {
        token
      })
      .then(res => {
        setFormData({
          ...formData,
          show: false
        });

        console.log(res.data.message);
      })
      .catch(err => {
        
        console.log(err);
      });
  };

Here is the code from activation controller :

const User = require('../models/auth.model');
const expressJwt = require('express-jwt');
const _ = require('lodash');
const { OAuth2Client } = require('google-auth-library');
const fetch = require('node-fetch');

const { validationResult } = require('express-validator');
const jwt_decode = require('jwt-decode')
const { errorHandler } = require('../helpers/dbErrorHandling');
const nodemailer = require('nodemailer')


exports.activationController = (req, res) => {
  const { token } = req.body;

  if (token) {
    jwt_decode.verify(token, process.env.JWT_ACCOUNT_ACTIVATION, (err, decoded) => {
      if (err) {
        console.log('Activation error');
        return res.status(401).json({
          errors: 'Expired link. Signup again'
        });
      } else {
        const { name, email, password } = jwt_decode(token);

        console.log(email);
        const user = new User({
          name,
          email,
          password
        });


        user.save((err, user) => {
          if (err) {
            console.log('Save error', errorHandler(err));
            return res.status(401).json({
              errors: errorHandler(err)
            });
          } else {
            return res.json({
              success: true,
              message: user,
              message: 'Signup success'
            });
          }
        });
        const apiKey = user._id;
        user.apiKey = apiKey
        user.save((err) => {
          console.log(err);
        })
      }
    });
  } else {
    return res.json({
      message: 'error happening please try again'
    });
  }
};

CodePudding user response：

As you have said in the comments , I think you have apiKey and path as an object properties in your user model which are not filled , and also the problem is you are using jwt_decode for verify and sign purposes which is wrong , the purpose for jwt_decode here is for decoding the token and nothing else , so use jsonwebtoken library for verfication and sign purposes .

Also remove the api key generation code , as what are you doing you are calling user.save() method 2 times in a row so the first one hasn't even finished saving before the 2nd one gets called .