I am trying to fetch Users data using Context in react here is my code

import { createContext,useState } from "react"

const GithubContext = createContext()

const GITHUB_URL = process.env.REACT_APP_GITHUB_URL

const GITHUB_TOKEN = process.env.REACT_APP_GITHUB_TOKEN

export const GithubProvider = ({children}) => {
    const [users,setUsers] = useState([])
    const [loading,setLoading] = useState(true)
    const fetchUsers = async () =>{
    const response = await fetch(`${GITHUB_URL}/users`,{
            headers:{
                Authorization:`token ${GITHUB_TOKEN}`
            }
        })

        const data = await response.json()

        console.log(data)
    }
    return <GithubContext.Provider value = {{
        users,
        loading,
        fetchUsers,
    }}>
        {children}
    </GithubContext.Provider>
}   

export default GithubContext

Here GITHUB_URL AND GITHUB_TOKEN are stored under .env file and they are correct And I am Using this context into my another function

import {useEffect,useContext} from 'react'
import GithubContext from "../../Context/Github/GithubContext"

function UserList(){

    const {fetchUsers} = useContext(GithubContext)

    useEffect (() =>{
        fetchUsers()
    },[])   
return(
    <div>
    </div>
)
}
export default UserList

I was Expecting to get this response upon hitting the endpoint. This as my Json output but rather I am getting this error message which says bad credentials

https://api.github.com/users

When I test this token in POSTMAN It is giving accurate response, But in the React Application it is giving me error message.

{message: 'Bad credentials', documentation_url: 'https://docs.github.com/rest'}
documentation_url
: 
"https://docs.github.com/rest"
message
: 
"Bad credentials"

Here is my error message in Chrome Console

0

There are 0 best solutions below