Authenticate a react admin CMS with cognito user pools.
With npm do:
npm install ra-cognito --save
ra-cognito provides a custom AuthProvider and login page for integration into
a react-admin app. For example, in your main App.js:
import React from 'react';
import { Admin, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';
import { AuthProvider, Login } from 'ra-cognito';
import { PostList } from './posts';
const App = () => (
<Admin
authProvider={AuthProvider}
dataProvider={simpleRestProvider('http://path.to.my.api')}
loginPage={Login}
>
<Resource name="posts" list={PostList} />
</Admin>
);
export default App;The reason that ra-cognito exposes its own login page is because it is designed
to handle the NEW_PASSWORD_REQUIRED authentication challenge from Cognito.
A recently registered user may only access your resources once they have
provided a new password. This is slightly different to the default react-admin
authentication flow which assumes that a user is successfully authenticated
at login time.
If you would like to provide custom styling for the login page, you may import the Login class without the Material UI styles, and then export this with your own styling:
import { withStyles } from '@material-ui/core/styles';
import { Login } from 'ra-cognito/dist/Login';
import pageStyles from './pageStyles';
export default withStyles(pageStyles)(Login);And in ./pageStyles.js:
const pageStyles = theme => ({
main: {
display: 'flex',
flexDirection: 'column',
minHeight: '100vh',
height: '1px',
alignItems: 'center',
justifyContent: 'flex-start',
background:
'linear-gradient(to top, hsla(210, 20%, 95%, 1), hsla(210, 20%, 90%, 1))',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
},
card: {
minWidth: 300,
marginTop: '6em',
},
avatar: {
margin: '1em',
display: 'flex',
justifyContent: 'center',
},
icon: {
backgroundColor: theme.palette.secondary[500],
},
});
export default pageStyles;MIT © The Distance
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent