How to pass auth token that I can access API?(react question) - reactjs

Question

I am making a simple app for lending phones with this api but I am unable to access the phone items as the request requires auth token. So I am trying to output this
import React from 'react'
import { MobileContext } from './MobileContext';
import { useContext } from 'react';
import Mobile from './Mobile';
import Navbar from './Navbar';
function MobileList() {
const { mobiles } = useContext(MobileContext);
return (
<div>
<Navbar/>
{mobiles.map((item) => (
<Mobile
vendor={item.vendor}
/>
))}
</div>
)
}
export default MobileList
but after correct login getting this without the phones
this is how my context api is set up but apparently I am unable to access the phones
import React, { useState, useEffect, createContext
} from 'react';
import axios from 'axios';
export const MobileContext = createContext({
mobiles: [],
setMobiles: () => {},
updateMobiles: () => {},
});
export default function MobileProvider(props) {
const [mobiles, setMobiles] = useState([]);
const updateMobiles = (id) => {
axios
.get('https://js-test-api.etnetera.cz/api/v1/phones')
.then((res) => setMobiles(res.data));
};
useEffect(() => {
axios
.get('https://js-test-api.etnetera.cz/api/v1/phones')
.then((res) => setMobiles(res.data));
}, [] );
return (
<MobileContext.Provider value={{ mobiles, setMobiles, updateMobiles}}>
{props.children}
</MobileContext.Provider>
);
}
then there is the login page you have to get through if you want to get to the phones page
import React from 'react'
import axios from 'axios';
import { useState } from 'react';
import { useHistory } from "react-router-dom";
function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
let history = useHistory()
const onSubmit = (e) => {
e.preventDefault();
const getIn = {
"login":email,
"password":password,
};
axios
.post('https://js-test-api.etnetera.cz/api/v1/login', getIn,
{
headers: {
'content-type': 'application/json',
}
}).then((res) => {
console.log(res.data);
history.push("/phones");
})
.catch((error) => console.log(error));
};
return (
<div>
<form >
<label>email</label> <input value={email}
onChange={(e) => setEmail(e.target.value)} type="text"/>
<label>password</label> <input type="text" value={password}
onChange={(e) => setPassword(e.target.value)}/>
<button onClick={onSubmit}>login</button>
</form>
</div>
)
}
export default Login
apreciate any advice of how to pass the auth tokens as I have never done this here is the full code

Answer 1

The idea of tokens is that once a user successfully logs in (the POST request), he receives a token from the server (the login's response).
Once a user has his token (stored preferably in a browser's localStorage, to keep it regardless the browser's refresh), he passes this token along with every request to the server that needs authentication.
I.e., for JWT tokens that header is:
Authorization: Bearer [token]