TypeError: authProvider.checkAuth is not a function

What you were expecting:

login page

What happened instead:

TypeError: authProvider.checkAuth is not a function

Steps to reproduce:

Only added App.js and authProvider.js

Related code:

import * as React from "react";
import authProvider from './authProvider';
import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';


const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider}>
        <Resource name="users" list={ListGuesser} />
    </Admin>
);

export default App;

Other information:

Environment

• React-admin version:^3.8.2
• Last version that did not exhibit the issue (if applicable):
• React version:^16.13.1
• Browser:Chrome
• Stack trace (in case of a JS error):

(anonymous function)
E:/code/my-app/node_modules/ra-core/esm/auth/useCheckAuth.js:49
  46 | if (params === void 0) { params = {}; }
  47 | if (logoutOnFailure === void 0) { logoutOnFailure = true; }
  48 | if (redirectTo === void 0) { redirectTo = defaultAuthParams.loginUrl; }
> 49 | return authProvider.checkAuth(params).catch(function (error) {
     | ^  50 |     if (logoutOnFailure) {
  51 |         logout({}, error && error.redirectTo
  52 |             ? error.redirectTo

[artemkozlenkov]

I can confirm this happens by following the Authentication tutorial.

Apparently the code provided for the authProvider is incomplete (missing checkAuth):

// in src/authProvider.js
const authProvider = {
    login: ({ username, password }) =>  {
        const request = new Request('https://mydomain.com/authenticate', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(auth => {
                localStorage.setItem('auth', JSON.stringify(auth));
            });
    },
    // ...
};

export default authProvider;

yes you’re right, the sample code is incomplete, probably intentionally since it would be pretty obvious; you may overcome this with looking at the type of AuthProvider in node_modules/ra-core/src/types.ts, there you will see minimum amount of methods necessary for good working authenticator, however, experience proves, you need only 3 of those:

login, checkAuth and getPermissions, so for the other use temporary work around to see the direct output:

// in src/authProvider.js
export const authProvider = {
    login: ({username, password}) => {
        const request = new Request('https://mydomain.com/authenticate', {
            method: 'POST',
            body: JSON.stringify({username, password}),
            headers: new Headers({'Content-Type': 'application/json'}),
        });
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(auth => {
                localStorage.setItem('auth', JSON.stringify(auth));
            });
    },
    checkAuth: (...params) => {
        return Promise.resolve();
    },
    getPermissions: () => {
        return Promise.resolve();
    }
};

please, note, that in order to build fully functioning, secure authenticator you may need to fully implement all those functions. Regards.

[djhi]

We would gladly accept a PR to fix it 😃