amplify-material-ui

amplify-material-ui

A Material-UI based implementation of aws amplify

Install

// with npm
npm install amplify-material-ui

// with yarn
yarn add amplify-material-ui

How to use

import React from 'react';
import Amplify from 'aws-amplify';
import { withAuthenticator } from 'amplify-material-ui';

import awsconfig from './aws-exports';
import logo from './logo.svg';
import './App.css';

Amplify.configure(awsconfig);

const App: React.FC = () => (
    <div className="App">
        <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
                Edit <code>src/App.tsx</code> and save to reload.
            </p>
            <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
            >
                Learn React
            </a>
        </header>
    </div>
);

export default withAuthenticator(App);

Hide default components

You can hide default components of your Authenticator.

withAuthenticator(App, {
    hide: [Greetings],
});

Hide links in default components

You can disable sign up if you do not allow users to sign up themselves.

withAuthenticator(App, {
    hide: [SignUp],
    hideSignUpLink: true,
    //hideForgotPasswordLink: true,
});

Customize initial authState

You can change the initial auth state for your Authenticator. By default the initial state is signIn which will shows the signIn component.

withAuthenticator(App, {
    initialAuthState: 'signUp',
});

License

MIT