API Integration with Axios - Username and Password PopUp Showing Up

Question

I've been assigned a task to do with integrating APIs. I've been able to fetch information from the API, but there's a popup showing up, asking me to submit username and password. I have the username and password, but the idea is to log in without the necessity of that popup showing up.

Here's the code:

const getPlate = () => {
        let licensePlate = document.getElementById('licensePlate');
        let licensePlateNumber = licensePlate.value;
        if (licensePlate.value === "") {
            alert('¡Debe introducir el número de matrícula para poder avanzar!');
        } else {
            Axios.get( * URL GOES HERE * ).then((response) => {
                let plate = response;
                console.log(plate.data[i].make);
                });
            }
    }

<div id="carDataContainer">
     <div id="licensePlateContainer">
          <input type="text" name="licensePlate" id="licensePlate" placeholder="Matrícula - ej. 001 BNDO"></input>
          <button type="button" id="plateBtn" onClick={ getPlate }>Search</button>
     </div>
</div>

Looks like the resource is expecting a Basic authorization header. — Ariel, Jul 21 '21 at 15:33
the alert is being displayed because the `if` is being satisfied also Axios should `axios.get`; can you explain `I have the username and password` part. — Chinmay Dali, Jul 21 '21 at 15:33
Sure. I have the credentials to access the API and submitting that in the popup works fine. The idea is for that popup not to show up. It's a paid API and my company has asked me to integrate it in the application. — Michael Haydn, Jul 21 '21 at 15:37

score 0 · Accepted Answer · answered Jul 21 '21 at 15:37

You should provide the user/password to axios (looks like Basic auth is expected). Try adding that info to your request:

Axios.get( * URL GOES HERE *, {
                  auth: {
                       username: "your-username",
                       password: "your-pass",
                  }
            } ).then((response) => {
                let plate = response;
                console.log(plate.data[i].make);
                });
            }

score 0 · Answer 2 · answered Jul 21 '21 at 15:38

0

You need Basic Auth

see: https://stackoverflow.com/a/44239543/7662325

Also if this does not work you can use this: https://stackoverflow.com/a/53939140/7662325

answered Jul 21 '21 at 15:38

muhammed ikinci

667
2
6
18

1

Thanks for your help, Muhammed, already solved it with Ariel's help. Anyways, I checked it for further understanding. – Michael Haydn Jul 21 '21 at 16:50

API Integration with Axios - Username and Password PopUp Showing Up

2 Answers2