score:16
It is possible of course. You just have to make fetch
use cookies.
react-admin
uses fetch
to send http requests to your back-end. And fetch does not send cookies by default.
So to make fetch
send cookies, you have to add the credentials: 'include'
option for every fetch
call the app makes.
(if your admin and api are not on the same domain, you will have to enable CORS on your back-end.)
See react-admin
's doc for how to customize requests on the dataProvider
here: https://github.com/marmelab/react-admin/blob/master/docs/Authentication.md#sending-credentials-to-the-api
import { fetchUtils, Admin, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';
const httpClient = (url, options = {}) => {
if (!options.headers) {
options.headers = new Headers({ Accept: 'application/json' });
}
const token = localStorage.getItem('token');
options.headers.set('Authorization', `Bearer ${token}`);
return fetchUtils.fetchJson(url, options);
}
const dataProvider = simpleRestProvider('http://localhost:3000', httpClient);
const App = () => (
<Admin dataProvider={dataProvider} authProvider={authProvider}>
...
</Admin>
);
You'll have to customize this to add options.credentials = 'include'
like so :
const httpClient = (url, options = {}) => {
if (!options.headers) {
options.headers = new Headers({
Accept: 'application/json'
});
}
options.credentials = 'include';
return fetchUtils.fetchJson(url, options);
}
You will have to do the same thing for the authProvider.
Something like
// in src/authProvider.js
export default (type, params) => {
// called when the user attempts to log in
if (type === AUTH_LOGIN) {
const { username, password } = params;
const request = new Request(`${loginUri}`, {
method: 'POST',
body: JSON.stringify({ username: username, password }),
credentials: 'include',
headers: new Headers({ 'Content-Type': 'application/json' }),
});
return fetch(request)
.then(response => {
if (response.status < 200 || response.status >= 300) throw new Error(response.statusText);
localStorage.setItem('authenticated', true);
});
}
// called when the user clicks on the logout button
Source: stackoverflow.com
Related Query
- Cookie-based authentication via REST API in react-admin
- .Net Core 2.1 with IdentityServer4 Cookie and API JWT based authentication for the same app
- Looping through post categories via WordPress REST API - React
- I want a simple authentication with bearer token and rest api which should be stored in local storage and be refresh in given time in REACT
- How to allow express backend REST API to set cookie in a react frontend which is using axios?
- Django Rest Framework & React Js ( Axios API Request ): After Incorrect authentication attempt, api returns 400
- How to submit post/put request to Django rest API via React front end?
- How to sign a cookie on a rails API based on a parameter sent by a react front end app?
- Call Rest API based on the tab selected using react
- React simple REST API using basic authentication
- How to integrate azure ad into a react web app that consumes a REST API in azure too
- CORS error while consuming calling REST API with React
- Cross-Domain Session Cookie (Express API on Heroku + React App on Netlify)
- Update React Context using a REST Api call in a functional component
- Authentication cookie disappears in react SPA after some time
- Django Rest Framework + React - token vs session authentication
- Insufficient Permission: Request had insufficient authentication scopes in google directory API when logging through admin
- Standalone REST API & Standalone React SPA vs Django and React combined
- MSAL authentication and authorization from React to Web API
- How to send CSRF Cookie from React to Django Rest Framework with Axios
- Isomorphic React + Flux + REST API
- How to keep rest api calls in different file in react js
- React JS: Use environment variables to specify two API urls based on production vs development
- Deploying React w/ WordPress as Backend using WP Rest API
- Active Directory Authentication with .NET Core Web API and React
- Next Js combined with an external REST API Authentication and atuhorization
- React + Wordpress + Woocommerce REST API 401 - get products without AUTH
- how to properly iterate through array of post objects retrieved through Wp Rest Api in react js
- Express does not receive parameters via POST from React using Fetch API
- Admin On Rest Framework or React drop zone, Issue in uploading a file to firebase
More Query from same tag
- React frontend, node backend CORS issue
- How to insert a new row in react-tabulator
- How to import file from outside /components in react
- React-trancition-group. Transition does not work after migration from .v1 to .v2
- React deploy error = Assertion `args[1]->IsString()'
- Why ReactJs Draw the entire component when a partial state change?
- I need to render a JSX element in Material-ui DataGrid
- Multiple react-table instances on same page
- Momentjs is not converting certain Spanish months to UTC
- How can I pass my JSON from SearchBar to the ApartmentByCity and display the needed data from there. How can I do this in ReactJs?
- calling child component from parent component in electron-es6-react
- React: store uploaded array into global variable?
- anchor tag (a tag) onclick event handler not working
- In Relay how should I get from global Id to local Id on client?
- Firebase V9 Online Status
- Bold active menu after refreshing the page
- How to store download urls and retrieve them from a collection
- Rendering React/Redux app multiple times on a single page?
- This.setState ignoring
- How can I return combined reducers in react-redux?
- React-router allow user access a url in the domain that is in the server and nt a part of the SPA
- Getting "Objects are not valid as a React child" when using Gatsby wrapRootElement TypeScript
- modify an upcoming boolean inside an array in the if statement in React
- React native textDecoration properties not working on Android
- FirebaseError browserErrorMessage: "Failed to register a ServiceWorker: ServiceWorker script evaluation failed"
- Material UI Stepper using custom icon deletes the step number. how to add the number or random text back with a custom icon?
- How to prevent re-rendering of components that have not changed?
- Overlaying or adding a view on top of another : React Native
- How to mock in JEST document html elements like webview or iframe?
- How to output only one value of an array within an array of a state in React?