This is a user login/register React component that includes options to use an authentication provider. It is styled in Material Design using Material UI and the forms are powered by Formsy.
yarn add react-mui-login-register
or
npm i --save react-mui-login-register
This is example of using the
import LoginRegister from 'react-mui-login-register';
class Demo extends Component {
render() {
const header = (
<AppBar position="static">
<Toolbar>
<Typography variant="title" color="inherit">Welcome</Typography>
</Toolbar>
</AppBar>
);
const footer = (
<div className={classes.footer}>
<Typography variant="caption" align="center">v0.9</Typography>
</div>
);
return (
<div>
<LoginRegister header={header} footer={footer}
onLogin={this.handleLogin}
onLoginWithProvider={this.handleLoginWithProvider}
onRegister={this.handleRegister}
onRegisterWithProvider={this.handleRegisterWithProvider}
/>
</div>);
}
handleLogin = content => {
alert(`Logging in with content '${JSON.stringify(content)}'`);
};
handleLoginWithProvider = providerId => {
alert(`Logging in with provider '${providerId}'`);
};
handleRegister = content => {
alert(`Registering with content '${JSON.stringify(content)}'`);
};
handleRegisterWithProvider = providerId => {
alert(`Registering with provider '${providerId}'`);
};
}