https://github.com/itzg/react-mui-login-register

A user login/register React component styled with Material UI that includes options to use an authentication provider
https://github.com/itzg/react-mui-login-register

login-forms material-ui react

Last synced: over 1 year ago
JSON representation

A user login/register React component styled with Material UI that includes options to use an authentication provider

• Host: GitHub
• URL: https://github.com/itzg/react-mui-login-register
• Owner: itzg
• License: mit
• Created: 2018-04-15T15:30:22.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-10-27T00:29:37.000Z (over 2 years ago)
• Last Synced: 2025-02-27T12:44:46.266Z (over 1 year ago)
• Topics: login-forms, material-ui, react
• Language: JavaScript
• Homepage: https://react-mui-login-register.surge.sh/
• Size: 2.07 MB
• Stars: 44
• Watchers: 5
• Forks: 14
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          

[![](https://img.shields.io/circleci/project/github/itzg/react-mui-login-register/master.svg)](https://circleci.com/gh/itzg/react-mui-login-register/tree/master)

[![](https://img.shields.io/npm/v/react-mui-login-register.svg)](https://www.npmjs.com/package/react-mui-login-register)

[![](https://img.shields.io/badge/demo-surge-blue.svg)](https://react-mui-login-register.surge.sh/)

[![](https://img.shields.io/github/stars/itzg/react-mui-login-register.svg?label=Stars&style=social)](https://github.com/itzg/react-mui-login-register)

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](https://material-ui-next.com/)

and the forms are powered by [Formsy](https://github.com/formsy/formsy-react).

## Screenshots

![](docs/screenshot-login.png)

![](docs/screenshot-register.png)

## Interactive Demo/Editor

[Demo of latest release](https://react-mui-login-register.surge.sh/)

[![Edit try-react-mui-login-register](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/cold-sound-0fxqs?fontsize=14)

## Install

```

yarn add react-mui-login-register

```

or

```

npm i --save react-mui-login-register

```

## Quick Start

This is example of using the 

```javascript

import LoginRegister from 'react-mui-login-register';

class Demo extends Component {

  render() {

    const header = (

        

          

            Welcome

          

        

    );

    const footer = (

        


          v0.9

        

    );


    return (

        


          

        
);

  }


  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}'`);

  };

}

```