Issue with Unauthorized 401 Error while Fetching Data from RapidAPI with Redux

Other Questions RapidAPI
1

I’m trying to retrieve data from RapidAPI for cryptocurrencies using Redux, but I keep receiving a 401 unauthorized error in the console. It seems that my request is being sent, but the API responds with an unauthorized message. I suspect there might be a problem with my headers or the API key.

Here’s my Redux store configuration:

import { configureStore } from "@reduxjs/toolkit"
import { cryptoApi } from "../services/cryptoApi"

export default configureStore({
    reducer: {
         [cryptoApi.reducerPath]: cryptoApi.reducer,
    },
})

API service setup:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"

const headers = {
    'X-RapidAPI-Host': 'coinranking1.p.rapidapi.com',
    'X-RapidAPI-Key': 'your-api-key'
}

const apiBaseUrl = 'https://coinranking1.p.rapidapi.com/coins'
const buildRequest = (url) => ({ url, Headers: headers })

export const cryptoApi = createApi({
    reducerPath: "cryptoApi",
    baseQuery: fetchBaseQuery({ baseUrl: apiBaseUrl }),
    endpoints: (builder) => ({
        getCryptos: builder.query({
            query: () => buildRequest("/markets")
        })
    })
})

export const { useGetCryptosQuery } = cryptoApi;

Using it in a component:

import { useGetCryptosQuery } from "../services/cryptoApi"

const { data, isLoading } = useGetCryptosQuery();
console.log(data);

What might be the reason for this authorization issue?

2

Yeah, that typo’s part of the problem, but there’s another issue. You’re passing headers through buildRequest but fetchBaseQuery doesn’t know about them since you’re only setting the baseUrl. You need to put the headers in your base query config instead.

Try this:

export const cryptoApi = createApi({
    reducerPath: "cryptoApi",
    baseQuery: fetchBaseQuery({ 
        baseUrl: apiBaseUrl,
        prepareHeaders: (headers) => {
            headers.set('X-RapidAPI-Host', 'coinranking1.p.rapidapi.com');
            headers.set('X-RapidAPI-Key', 'your-actual-api-key');
            return headers;
        }
    }),
    endpoints: (builder) => ({
        getCryptos: builder.query({
            query: () => '/markets'
        })
    })
})

This way the headers actually get attached to every request. I had the same auth issues with RapidAPI until I fixed the header handling like this.

3

also check if ur rapidapi subscription expired - i got the same 401 errors last week when my free tier hit the request limit. double-check ur using /coins not /markets for the coinranking api endpoint.

4

Found your problem right away. You’ve got a typo in buildRequest - you wrote Headers with a capital H instead of headers. That’s why your auth headers aren’t getting sent and you’re getting the 401 error. Change Headers: headers to headers: headers and you should be good. Also double-check you actually replaced ‘your-api-key’ with your real key from the RapidAPI dashboard. I made this exact same mistake last month and wasted hours debugging before I caught the capitalization error. Fix that typo and your requests will authenticate properly.