Always a 401 res in useOpenWeather() - react-open-weather lib

Question

I want to add weather widget to my react app, I'm trying to use React-Open-Weather lib. But the function that fetches the data useOpenWeather() always responses with a 401, I've confirmed my api-key is valid by putting it in the URL that is given in the documentation of react-open-weather. But I don't know what is wrong `

Error: GET http://api.openweathermap.org/data/2.5/onecall?appid={apikey}&lang=en&units=metric&lat=48.137154&lon=11.576124 401 (Unauthorized)

My Code

import React from 'react'
import ReactWeather, { useOpenWeather } from 'react-open-weather';

const Weather = (props) => {
    const { data, isLoading, errorMessage } = useOpenWeather({
        key: 'myapikey',
        lat: '48.137154',
        lon: '11.576124',
        lang: 'en',
        unit: 'metric', // values are (metric, standard, imperial)
    });


    return (
        <div>
            <ReactWeather
                isLoading={isLoading}
                errorMessage={errorMessage}
                data={data}
                lang="en"
                locationLabel="Munich"
                unitsLabels={{ temperature: 'C', windSpeed: 'Km/h' }}
                showForecast
            />
        </div>
    )
}

export default Weather

I tried re-installing the React-Open-Weather lib but that doesn't fix the problem

The URL that I used to confirm my api key: http://api.openweathermap.org/data/2.5/forecast?id=524901&appid={apikey}

5px · Accepted Answer · 2023-08-17T09:02:10.707

0

According to https://openweathermap.org/api/one-call-api, onecall returns all possible functions:

The One Call API 2.5 provides the following weather data for any geographical coordinates:

Current weather
Minute forecast for 1 hour
Hourly forecast for 48 hours
Daily forecast for 7 days
National weather alerts
Historical weather data for the previous 5 days

Some of the features, like forecast, are not allowed for free accounts. By running weather instead of onecall, you only get the current weather:

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

and with your parameters, it displays the data correctly.

edited Aug 17 '23 at 09:02

answered Aug 17 '23 at 08:57

5px

131
9

Thanks but it's not a simple fetch req, the function `useOpenWeather()` is making the call so what can I do?? – Quiet Coder Aug 17 '23 at 09:06
@QuietCoder You could use another weather provider supported by the library like WeatherBit or fork the code and modify the backend so it will ignore the forecast code (you'll also have to remove the showForecast in your own code). It's actually a reported issue on GitHub: https://github.com/farahat80/react-open-weather/issues/15 but it looks like it didn't get fixed. – 5px Aug 17 '23 at 09:10
Also, you might want to redact your API keys... Even though it's the free plan, these can still be rate limited or your openweathermap account could be shut down if it's used for spam. – 5px Aug 17 '23 at 09:31
1

Thanks, I was gonna remove it but forgot, thanks for the reminder – Quiet Coder Aug 17 '23 at 18:14

Always a 401 res in useOpenWeather() - react-open-weather lib

1 Answers1