AxiosError: Request failed with status code 401 in ReactJS

Ahmed Al Meshaal — Tue, 24 Oct 2023 11:37:37 +0000

I am working on React authentication app, but cannot login successfully or and cannot generate access token.

could you help me please I didn't found any solution on the internet.

Chack my code
The Login Service

import axios from 'axios';
const API_BASE_URL = 'http://accrdet.localhost';

export default class LoginServices {
    login(username, password) {
        return axios.post(`${API_BASE_URL}/api/auth/login`, {
            username,
            password
        },
        {
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        }
            ).then(response => {
            if (response.data.accessToken) {
                localStorage.setItem('user', JSON.stringify(response.data));
            }
            return response.data;
        });
    }

    logout() {
        return axios.post(`${API_BASE_URL}/api/auth/logout`, {}).then(response => {
            if (response.data.accessToken) {
                localStorage.removeItem('user', JSON.stringify(response.data))
            }
            return response.data;
        })
    }

    geCurrentUser(){
        return JSON.parse(localStorage.getItem('user'));
    }
}

The Login Component is

import React, { Component } from 'react';
import LoginService from '../../services/LoginServices';

const auth_service = new LoginService()

class Login extends Component {
    constructor(props) {
        super(props);

        this.handleLogin = this.handleLogin.bind(this);
        this.onChangeUsername = this.onChangeUsername.bind(this);
        this.onChangePassword = this.onChangePassword.bind(this);

        this.state = {
            username: "",
            password: ""
        };
    }

    onChangeUsername(e) {
        this.setState({
            username: e.target.value
        });
    }

    onChangePassword(e) {
        this.setState({
            password: e.target.value
        });
    }

    // Login handler
    handleLogin(e) {
        e.preventDefault();

        auth_service.login(this.state.username, this.state.password).then(
            (response) => {
                const token = response.key;
                const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
                localStorage.setItem('token', token);
                localStorage.setItem('expirationDate', expirationDate);
                console.log(`Token: ${token}`);
            }, error => {
                console.log(`Eoor -> ${error}`);
            }
        )
    }


    render() {
        return (
        <>
            <form onSubmit={this.handleLogin} className="form-signin mt-3">
                <div className="from-control">
                    <label htmlFor="usenrame">Username</label>
                    <input type="text"
                           value={this.state.username}
                           onChange={this.onChangeUsername}
                           name="usenrame"
                           id="username"
                           className="form-control mb-2"
                           placeholder="username"
                    />
                </div>
                <div className="from-control">
                    <label htmlFor="password">Password</label>
                    <input type="password"
                           value={this.state.password}
                           onChange={this.onChangePassword}
                           name="password"
                           id="password"
                           className="form-control mb-2"
                           placeholder="********" required
                    />
                </div>
                <button className="btn btn-sm btn-primary mr-5 mb-1" type="submit">Sign in</button>
           </form>

        </>
        );
    }
}

export default Login;

DEV Community: Ahmed Al Meshaal

AxiosError: Request failed with status code 401 in ReactJS