A basic aws amplify authenticator for reactjs built on material ui.
npm install --save react-material-amplify-authenticator
More details to follow. This is still a work in progress.
Basic Usage:
import {...}
const theme = createMuiTheme({
palette: {
primary: {
main: process.env.REACT_APP_PRIMARY_MAIN || customTheme.palette.primary.main,
light: process.env.REACT_APP_PRIMARY_LIGHT || customTheme.palette.primary.light,
dark: process.env.REACT_APP_PRIMARY_DARK || customTheme.palette.primary.dark,
contrastText: process.env.REACT_APP_PRIMARY_CONTRAST_TEXT || customTheme.palette.primary.contrastText
},
secondary: {
main: process.env.REACT_APP_SECONDARY_MAIN || customTheme.palette.primary.main,
light: process.env.REACT_APP_SECONDARY_LIGHT || customTheme.palette.primary.light,
dark: process.env.REACT_APP_SECONDARY_DARK || customTheme.palette.primary.dark,
contrastText: process.env.REACT_APP_PRIMARY_TEXT || customTheme.palette.primary.contrastText
}
}
});
const REACT_APP_AWS_AUTH_REGION = process.env.REACT_APP_AWS_AUTH_REGION;
const REACT_APP_USER_POOL_ID = process.env.REACT_APP_USER_POOL_ID;
const REACT_APP_CLIENT_APP_ID = process.env.REACT_APP_CLIENT_APP_ID;
Amplify.configure({
Auth: {
region: REACT_APP_AWS_AUTH_REGION, // REQUIRED - Amazon Cognito Region
userPoolId: REACT_APP_USER_POOL_ID, // OPTIONAL - Amazon Cognito User Pool ID
userPoolWebClientId: REACT_APP_CLIENT_APP_ID, // User Pool App Client ID
},
});
class AppWithAuth extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
renderApp: false
};
}
render() {
return (
<MuiThemeProvider theme={theme}>
<Router>
<Authenticator
hideDefault={true}
hide={[MainLayoutWrapper]}
awsAuthRegion={REACT_APP_AWS_AUTH_REGION}
userPoolId={REACT_APP_USER_POOL_ID}
clientAppId={REACT_APP_CLIENT_APP_ID}
>
<MainLayoutWrapper/>
</Authenticator>
</Router>
</MuiThemeProvider>
);
}
}
const MainLayoutWrapper = (props) => {
return (
<DrawerLayout {...props} title={appName}>
<Route
path="/dashboard"
component={DashboardContainer}
icon={<Dashboard/>}
title="Dashboard"
/>
</DrawerLayout>
);
};
const WithProvider = () => (
<AppWithAuth/>
);
export default WithProvider;