Adding a Login Page

Based on a custom authProvider that accepts anyone via storage of username and password in local storage

Author: victorkane

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Admin, Resource } from 'react-admin';
 import Dashboard from './Dashboard';
+import authProvider from './authProvider';
 import { PostList, PostEdit, PostCreate } from './posts';
 import { UserList } from './users';
 import jsonServerProvider from 'ra-data-json-server';
@@ -9,7 +10,7 @@ import UserIcon from '@material-ui/icons/Group';
 
 const dataProvider = jsonServerProvider('http://jsonplaceholder.typicode.com');
 const App = () => (
-    <Admin dashboard={Dashboard} dataProvider={dataProvider}>
+    <Admin dashboard={Dashboard} authProvider={authProvider} dataProvider={dataProvider}>
        <Resource name="users" list={UserList} icon={UserIcon} />
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
     </Admin>

src/authProvider.js

@@ -0,0 +1,29 @@
+export default {
+    // called when the user attempts to log in
+    login: ({ username }) => {
+        localStorage.setItem('username', username);
+        // accept all username/password combinations
+        return Promise.resolve();
+    },
+    // called when the user clicks on the logout button
+    logout: () => {
+        localStorage.removeItem('username');
+        return Promise.resolve();
+    },
+    // called when the API returns an error
+    checkError: ({ status }) => {
+        if (status === 401 || status === 403) {
+            localStorage.removeItem('username');
+            return Promise.reject();
+        }
+        return Promise.resolve();
+    },
+    // called when the user navigates to a new location, to check for authentication
+    checkAuth: () => {
+        return localStorage.getItem('username')
+            ? Promise.resolve()
+            : Promise.reject();
+    },
+    // called when the user navigates to a new location, to check for permissions / roles
+    getPermissions: () => Promise.resolve(),
+};