React-admin: Authentication won't work:

[stanisfun]

By having next setup:

import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_CHECK } from 'admin-on-rest';

export const authClient = (type, params) => {
    if (type === AUTH_LOGIN) {
        const { username, password } = params;
        localStorage.setItem('username', username)
        localStorage.setItem('token', btoa(username + ":" + password));
        return Promise.resolve();
    }
    if (type === AUTH_LOGOUT) {
        localStorage.removeItem('username');
        localStorage.removeItem('token');
        return Promise.resolve();
    }
    if (type === AUTH_CHECK) {
        return localStorage.getItem('username') ? Promise.resolve() : Promise.reject();
    }
    return Promise.reject('Unkown method');
};

And :

const httpClient = (url, options) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    const token = localStorage.getItem('token')
    options.headers.set('Authorization', `Basic ${token}`);
    return fetchUtils.fetchJson(url, options);
}
const restClient = simpleRestClient('http://localhost:30120/api', httpClient);

class App extends Component {
  render() {
    return (
      <Admin  authClient={authClient} dashboard={Dashboard} restClient={restClient}> 
...

Getting 401 error every-time during call to API

[djhi]

Have you checked that the token is passed in your requests headers with the chrome devtool ?

[stanisfun]

I've checked.
So the token is formed and header is setup.
But seems simpleRestClient doesn't set the headers.
These are headers for request:

Host: localhost:30120
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Access-Control-Request-Headers: authorization, content-type
Accept: */*
DNT: 1
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-GB,en;q=0.8,en-US;q=0.6,ru;q=0.4

[fzaninotto]

If your API is on another domain than the admin, you're using CORS. To pass authorization headers in CORS, your server must set the Access-Control-Allow-Credentials header to true, and probably Access-Control-Allow-Headers to Content-Type,Authrorization.

I'm not sure about the details, but I'm pretty sure this is an issue with your server, not the httpClient.

[stanisfun]

Actually doing calls to the server directly it works.
And even more if I open same API URLs into browsers then browser asks for creds.

Also all calls works with same details when I do calls from Postman.

So I guess is something on framework part

[fzaninotto]

When you call the server directly, your request doesn't include an origin header, so the CORS isn't triggered.

Believe me: you have to enable CORS headers on the server side if the API is on a different domain than the admin.

[pyroflies]

Hello,

Just wanted to leave a comment that I've been trying to figure out how to enable the CORS to get cross domain API calls to work and ended up finding multiple threads like this one where the response is a general "you just have to enable CORS to fix your problem" but no concrete answer on how to actually do that / fit that in to any of the demos/repos. Unfortunately for me as a web developer coming into the demo with little react/server experience, this leaves me stuck.

I think if you can include this in an example for your documentation, this could help people get past a common problem. Thanks!

Another ex: https://github.com/marmelab/admin-on-rest/issues/176

[fzaninotto]

The CORS headers must be set on your API endpoint. There is nothing specific to admin-on-rest here that we could document, because admin-on-rest only deals with the client side.

If you want instructions on how to do that, just google "setup cors headers".

[djhi]

Please use StackOverflow. As we use our library on many projects with authentication, the issue must come from your code

[louizaOU]

Hello guys, i have some issues when i try to connect to a real API REST, it shows this message "Failed to fetch,
Provisional headers are shown
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: GET
Origin: http://localhost:3000
Referer: http://localhost:3000/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.80 Safari/537.36

[fzaninotto]

@louizaOU we don't provide support via GitHub issues, please post your question on StackOverflow.