User or pass wrong message in service api

I have this two codes

import React, { useState, useEffect, createContext } from "react"; 
import { useNavigate } from "react-router-dom";
import { api, createSession } from "./Services/api"

export const AuthContext = createContext();

export const AuthProvider = ({children}) => {
    const navigate = useNavigate();
    const [user, setUser] = useState();
    const [loading, setLoading] = useState(true)
 
    useEffect(() => {
        const recoveredUser = localStorage.getItem("user")
        if(recoveredUser){
            setUser(JSON.parse(recoveredUser))
        }
        setLoading(false);
    }, []); 

    const refreshPage = ()=>{
        window.location.reload();
     }

    const login = async (username, pass) => {
        const response = await createSession(username, pass);
        
        const loggedUser = response.data.user;
        const token = response.data.jwt;

        localStorage.setItem("user", JSON.stringify(loggedUser))
        localStorage.setItem("token", token)
        
        api.defaults.headers.Authorization = {
            "identifier": username,
            "password": pass
        }

        setUser(loggedUser)
       
        navigate("/");       
    };

    const logout = () => {
        localStorage.clear();
        api.defaults.headers.Authorization = null;
        setUser(null);
        navigate("/login")
        refreshPage();
    };

    return(
        <AuthContext.Provider value={{authenticated: !!user, user, login, logout, loading}}> {children} </AuthContext.Provider>
    )
}

and this

import axios from "axios";

export const api = axios.create({
    baseURL: "https://communicationadmin.grupostra.com",
});

export const createSession = async(identifier, password) => {
    return api.post('/auth/local', {identifier, password});
}

and this is my login screen

import Input from '../components/Input';
import styles from './Login.module.css';
import { useState, useContext } from 'react';
import { AuthContext } from '../Auth'
import logo from '../img/grupostra_horizontal.png'
import openEye from '../img/eye.png'
import closedEye from '../img/closedeye.png'

function Login(){
    const { login } = useContext(AuthContext);
    const [eyeImg, setEyeImg] = useState(openEye);

    function handdleClick(){    
         if(eyeImg === openEye){
            setEyeImg(closedEye);
            document.querySelector('input:nth-child(4)').type = "";
        } else {
            setEyeImg(openEye)
            document.querySelector('input:nth-child(4)').type = "password";
        } 
    } 

    function handleSubmit(e){
        e.preventDefault();
        login(user, pass); 
    }

    const [user, setUser] = useState('');
    const [pass, setPass] = useState('');

    return(
        <div className={styles.container}>
            <div className={styles.form_container}>
                <img src={logo} alt="group" srcset="" />
                <p>Welcome</p>
                <form onSubmit={handleSubmit}>
                    <label htmlFor="username">Usuário</label>
                    <Input type="text" name="username" id="username" placeholder="User" setProps={setUser} value={user}/>
                    <label htmlFor="password">Senha</label>
                    <Input type="password" name="password" id="password" placeholder="Pass" setProps={setPass} value={pass}/>
                    <span onClick={handdleClick}><img src={eyeImg} className={styles.eyeImg} /></span>
                    <Input className="btn-hover" type="submit" name="submit" id="submit" value="Enter" />
                </form>
            </div>
        </div>
    )
}

export default Login

My question is how can or where a write an alert to show to users when your credentials are wrong? I tried some things, but i don’t have sucess . (I want to show in a login screen) …………………………………………………………………………….

>Solution :

If the server handle the "wrong credentials" as an HTTP Code 4XX or 5XX then you can just catch the exception an do something about it

async handleSubmit(e){
   e.preventDefault();
   await login(user, pass).catch(exp => alert("Something happened, maybe invalid credentials"))
}