This provides a data-provider
and an auth-provider
for the your react admin app connecting it to a feathersjs 4 app.
THIS PACKAGE IS NO LONGER BEING MAINTAINED
Note however, that it can be used even without react-admin.
This is an NPM package. Run the command below for your React Admin app folder
npm install --save ra-feathersjs-oauth
Your feathersjs server should be running on version 4 and above.
import React from "react";
import {
Admin, Resource,
AUTH_CHECK,
AUTH_ERROR,
AUTH_GET_PERMISSIONS,
AUTH_LOGIN,
AUTH_LOGOUT,
CREATE,
DELETE,
DELETE_MANY,
GET_LIST,
GET_MANY,
GET_MANY_REFERENCE,
GET_ONE,
UPDATE,
UPDATE_MANY
} from "react-admin";
import { UserList, UserEdit, UserShow } from "./resources/users";
import { PostEdit, PostCreate, PostList, PostShow } from "./resources/posts";
import GoogleLogin from "./components/screens/GoogleLogin";
import {createFeathersDataProvider, createFeathersAuthProvider, createFeathersClient} from "ra-feathersjs-oauth";
import PostIcon from "@material-ui/icons/Send";
import UserIcon from "@material-ui/icons/Group";
const apiUrl = "http://localhost:3030";
const feathersClient = createFeathersClient(apiUrl, {
storageKey: "a-unique-storage-key"
});
const dataProvider = createFeathersDataProvider(feathersClient, {
uploadsUrl: `${apiUrl}/uploads`,
multerFieldNameSetting: "files",
resourceUploadsForeignKeyMap: { posts: "_id", uploads: "url" },
resourceUploadableFieldMap: { posts: "image", uploads: "url" },
defaultPrimaryKeyField: "_id",
CREATE,
DELETE,
DELETE_MANY,
GET_LIST,
GET_MANY,
GET_MANY_REFERENCE,
GET_ONE,
UPDATE,
UPDATE_MANY
});
const authProvider = createFeathersAuthProvider(feathersClient, {
permissionsField: "permissions",
oauthStrategy: "google",
AUTH_CHECK,
AUTH_ERROR,
AUTH_GET_PERMISSIONS,
AUTH_LOGIN,
AUTH_LOGOUT
});
const App = () => (
<Admin
dataProvider={dataProvider}
authProvider={authProvider}
loginPage={GoogleLogin}
>
<Resource
name="users"
list={UserList}
edit={UserEdit}
show={UserShow}
icon={UserIcon}
/>
<Resource
name="posts"
list={PostList}
create={PostCreate}
edit={PostEdit}
show={PostShow}
icon={PostIcon}
/>
</Admin>
);
export default App;
It uses the react-google-login package
import React from "react";
import { connect } from "react-redux";
import { userLogin } from "react-admin";
import ReactGoogleLogin from "react-google-login";
import Grid from "@material-ui/core/Grid";
const googleClientId = "<the google client id for your app>";
const GoogleLogin = ({ userLogin }) => {
const handleResponse = response => {
const access_token = response.getAuthResponse().access_token;
if (access_token) {
userLogin({ access_token });
}
};
return (
<Grid
justify="center"
alignItems="center"
container
style={{ minHeight: "100vh" }}
>
<Grid item>
<ReactGoogleLogin
clientId={googleClientId}
buttonText="Login With Google"
onSuccess={handleResponse}
onFailure={handleResponse}
/>
</Grid>
</Grid>
);
};
export default connect(
undefined,
{ userLogin }
)(GoogleLogin);
For more details of each class, interface, enum etc, visit the TypeDoc generated docs site.
Ra-data-feathers was a big motivation.
Copyright (c) 2019 Martin Ahindura Licensed under the MIT License