arpitbhalla/react-mui-auth-page

React Login/SignUp components Library backed by Material UI for fast Development

react-mui-auth-page

Getting Started 🚀

npm i react-mui-auth-page

Demo

Web Demo

CodeSandbox

Usage

import { DialogAuth } from "react-mui-auth-page";

Example

import React from "react";
import { DialogAuth } from "react-mui-auth-page";

const MyDialogAuthComponent = () => {
  const handleSignIn = ({ email, password }) => {
    console.log({ email, password });
  };
  const handleSignUp = async ({ email, name, password }) => {
    await doSomethingAsyn();
  };
  const handleForget = ({ email }) => {
    console.log({ email });
  };

  const handleSocial = {
    Google: () => {},
    Github: () => {},
  };

  return (
    <DialogAuth
      open={true}
      textFieldVariant="outlined"
      onClose={handleClose}
      handleSignUp={handleSignUp}
      handleForget={handleForget}
      handleSignIn={handleSignIn}
      handleSocial={handleSocial}
    />
  );
};

export default MyDialogAuthComponent;

Props

Prop Name	Type	Required	Default Value
hideTabs	Boolean	Yes	False
textFieldVariant	"outlined" or "filled" or "standard"	No	filled
open	Boolean	Yes
onClose	Function	Yes
logoName	string
logoComponent	React Children
handleSignUp	Function	Yes
handleForget	Function	Yes
handleSignIn	Function	Yes
emailValidator	Function
passwordValidator	Function
handleSocial	Social Object

Social Object

Prop Name	Type
Google	Function
Linkedin	Function
Github	Function
Facebook	Function
Twitter	Function

Local Run

npm install

npm run dev

ScreenShots

With Tabs

WithOut Tabs

Get Involved!

• Pull requests are welcome!
• Submit github issues for any feature enhancements, bugs or documentation problems

Maintainer

arpitBhalla

react-mui-auth-page's Issues

handleSignup not working

The signature of handleSignin and handleSignup are exactly the same but handleSignup doesn't even execute when I register (signup) by entering the input in signup fields.

The handleSignin works just fine (prints the console log in the handleSignin. But there's something wrong with the handleSignup because it doesn't even console log the entered input fields (name, email, password).

  const handleSignIn = async ({ email, password }) => {
    try {
      await login(email, password);
    } catch (error) {
      alert('Login Error');
    }
    console.log({ email, password });
  };

  const handleSignUp = ({ name, email, password }) => {
    console.log('It doesn't even print this log');
}

fixthisshit.mp4

Inversed Eye for password displaying

Hi,

Great work, i just suggest you to change the eye toggling for password it is inversed ^^

Good luck,