react-material-amplify-authenticator

A basic aws amplify authenticator for reactjs built on material ui.

Install

npm install --save react-material-amplify-authenticator

Usage

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;