Committed Auth Components

Committed Auth Components

React components commonly needed for authentication.

This project was bootstrapped with TSDX.

Getting Started

Install the library from npm. Committed Components and Material UI should also be installed if they have not been already:

# yarn
# install these if you don't have them already
yarn add @material-ui/core @material-ui/icons @material-ui/lab @committed/auth-components
yarn add @committed/auth-components

# npm
# install these if you don't have them already (npm 7+ will install them for you)
npm install --save @material-ui/core @material-ui/icons @material-ui/lab @committed/auth-components
npm install --save @committed/components

Login Component

A login form following best practices.

It uses built in browser validation of emails and passwords with type="email" and type="password".

The sign in button is disabled while sign in is taking place to prevent accidental multiple login attempts.

The form is mobile friendly. type=email is used to bring up the correct keyboard.

The typed in password can viewed with the show password button to make sign in easier.

Accessibility is considered. aria-label and aria-describedby is used for password inputs.

import React from 'react'
import { Login } from '@committed/auth-components'
import { ThemeProvider } from '@committed/components'

export const MyLoginPage: React.FC = () => {
  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')
  return (
    <ThemeProvider>
      <Login
        onChangeEmail={(e) => setEmail(e.target.value)}
        onChangePassword={(e) => setPassword(e.target.value)}
        email={email}
        password={password}
        onSignIn={() => {
          # make a call using email and password e.g.
          # login(username, password)
        }}
      />
    </ThemeProvider>
  )
}

The passwordRules prop optionally displays the password rules for easier sign in.

The errorMessage prop can be used to display errors related to sign in.

Registration Component

import React from 'react'
import { Login } from '@committed/auth-components'
import { ThemeProvider } from '@committed/components'

export const MyRegistrationPage: React.FC = () => {
  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')
  const [confirmPassword, setConfirmPassword] = React.useState('')
  return (
    <ThemeProvider>
      <Registration
        email={email}
        password={password}
        confirmPassword={confirmPassword}
        onChangeEmail={(e) => setEmail(e.target.value)}
        onChangePassword={(e) => setPassword(e.target.value)}
        onChangeConfirmPassword={(e) => setConfirmPassword(e.target.value)}
        onSignUp={() => {
          if (password === confirmPassword) {
            # make a call using email and password e.g.
            # registerUser(username, password)
          }
        }}
      />
    </ThemeProvider>
  )
}

Developing

See development.