useFetchClient API Calls Returns 401 and Logs out Admin

Community Packages Plugins
1

I’m building a plugin for the Admin Panel and trying to make an API call from my React component to my Strapi API.

I’m using the useFetchClient module to make an API request when a button is clicked, like so:

import React, { useEffect } from 'react';
import { Button } from '@strapi/design-system';
import { useFetchClient } from '@strapi/helper-plugin';

const SyncAction = () => {
    const { put } = useFetchClient()

    const syncPush = async () => {
        try {
            const response = await put(`/api/cms-sync/push/1`)
            console.log(response)
        } catch (error) {
            debugger
            console.log(error)
        }
    }

    return (
        <Button onClick={syncPush} variant='success-light'>
              Sync Push
        </Button>
    );
};

export default SyncAction;

Whenever the button is clicked, a 401 error code is returned and the logged in Admin is redirected to the Strapi Admin login page (session terminated).

Based on all the code samples I see, this should work. I’m logged in as a Super Admin user. I can also confirm that the same Bearer Token being used for my active session is being submitted as an authorization header with the request.

Does anyone know what may be happening here?

4 Likes
2

I got the same issue, did you find a way to solve it? I’m completely desperate

3

I got exactly the same problem. Is there already a way to solve it?

4

I ran into the same issue, I was able to solve it by not including ‘api/’ in my request url. Still unclear on why that worked, but might be worth a shot.

5

I have the exact same issue, and using the fix proposed by @CAubrey4 does not work

6

I know this is VERY late, but hopefully this helps the next dev.

The reason for this error is that Strapi has two separate API services, which isn’t documented well anywhere I could find.

There is an “Internal admin API” for plugin-specific or core admin api calls. You can use fetchRequest library because these calls are expected to be used by Admin Users.

There is also a “Content API/ External API” which is the APIs that are auto-generated for each content type as well as anything in the top level src/api folder. These are intended to be used by end users, and have a separate auth JWT token system.

Calling an external API with an Admin User JWT (which is what useFetchClient uses) will result in a 401 because the JWT is invalid for that API’s token service.

As for how to fix this, I have been moving my APIs into a plugin (I just made a “common” plugin), which allows for Admin User access. You could also allow public access to the API in question and use fetch instead of useFetchClient if access isn’t an issue.

1 Like
7

From AdminPanel you should use the content-manager api, not “/api”.

const { get } = useFetchClient();
const { data } = await get('/content-manager/collection-types/api::post.post');
2 Likes
8

I was creating all simple requests in a new controller, service, etc. Just to avoid the 401.
Thank you so much!