Function useLogin

This function is a react hook to help writing your own login screen.

Example

import * as React from 'react'
import { useHistory } from 'react-router-dom'
import { useLogin } from '@oneblink/apps-react'

function App() {
  const history = useHistory()

  const [username, setUsername] = React.useState('')
  const [password, setPassword] = React.useState('')
  const [newPasswordConfirmed, setNewPasswordConfirmed] = React.useState('')
  const [newPassword, setNewPassword] = React.useState('')
  const [code, setCode] = React.useState('')

  const onLogin = React.useCallback(() => {
    history.push('/')
  }, [history])

  const {
    // Login
    loginWithGoogle,
    loginWithUsernamePassword,
    isLoggingIn,
    // Reset Temp Password
    isPasswordTemporary,
    isResettingTemporaryPassword,
    resetTemporaryPassword,
    // MFA Password
    isMfaCodeRequired,
    isSubmittingMfaCode,
    submitMfaCode,
    // Login Errors
    loginError,
    clearLoginError,
    // Showing Forgot Password
    isShowingForgotPassword,
    showForgotPassword,
    hideForgotPassword,
    // Sending Forgot Password Code
    isSendingForgotPasswordCode,
    sendForgotPasswordCode,
    // Resetting Forgotten Password
    hasSentForgotPasswordCode,
    isResettingForgottenPassword,
    resetForgottenPassword,
    // Forgot Password Errors
    forgotPasswordError,
    clearForgotPasswordError,
    // Validation
    usernameValidation,
    passwordValidation,
    codeValidation,
    newPasswordValidation,
    newPasswordConfirmedValidation,
  } = useLogin({
    username,
    password,
    newPassword,
    newPasswordConfirmed,
    code,
    onLogin,
  })

  if (hasSentForgotPasswordCode) {
    return (
      <form
        onSubmit={(e) => {
          e.preventDefault()
          resetForgottenPassword()
        }}
      >
        <p>We have sent you a password reset code via email. Enter it below to reset your password.</p>

        <input
          type="password"
          placeholder="Code"
          value={code}
          onChange={(e) => setCode(e.target.value)}
        />

        <input
          type="password"
          placeholder="New Password"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
        />

        <input
          type="password"
          placeholder="Confirm Password"
          value={newPassword}
          onChange={(e) => setNewPasswordConfirmed(e.target.value)}
        />

        <button
          type="submit"
          disabled={isResettingForgottenPassword || codeValidation.isInvalid || newPasswordValidation.isInvalid || newPasswordConfirmedValidation.isInvalid}
        >
          Change Password
        </button>

        <p>Password Requirements</p>
        <p>Contains a lowercase letter: {validation.hasLowercaseLetter ? 'Yes' : 'No'}</p>
        <p>Contains an upper case letter: {validation.hasUpperCaseLetter ? 'Yes' : 'No'}</p>
        <p>Contains a number: {validation.hasNumber ? 'Yes' : 'No'}</p>
        <p>Contains a special character: {validation.hasSpecialCharacter ? 'Yes' : 'No'}</p>
        <p>Contains at least 8 characters: {validation.hasMinLength ? 'Yes' : 'No'}</p>

        {forgotPasswordError && (
          <p>{forgotPasswordError.message}</p>
          <button type="button" onClick={clearForgotPasswordError}>Clear Error</button>
        )}
      </form>
    )
  }

  if (isShowingForgotPassword) {
    return (
      <form
        onSubmit={(e) => {
          e.preventDefault()
          sendForgotPasswordCode()
        }}
      >
        <p>Enter your email address and we will send you a code to reset your password.</p>

        <input
          type="email"
          placeholder="Email Address"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />

        <p>
          <a onClick={hideForgotPassword}>Remembered your password?</a>
        </p>

        <button
          type="submit"
          disabled={isSendingForgotPasswordCode || usernameValidation.isInvalid}
        >
          Reset Password
        </button>

        {forgotPasswordError && (
          <p>{forgotPasswordError.message}</p>
          <button type="button" onClick={clearForgotPasswordError}>Clear Error</button>
        )}
      </form>
    )
  }

  if (isPasswordTemporary) {
    return (
      <form
        onSubmit={(e) => {
          e.preventDefault()
          resetTemporaryPassword()
        }}
      >
        <p>The password you entered was only temporary and must be reset for security purposes. Please enter your new password below to continue.</p>

        <input
          type="password"
          placeholder="New Password"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
        />

        <input
          type="password"
          placeholder="Confirm Password"
          value={newPassword}
          onChange={(e) => setNewPasswordConfirmed(e.target.value)}
        />

        <button
          type="submit"
          disabled={isResettingTemporaryPassword || newPasswordValidation.isInvalid || newPasswordConfirmedValidation.isInvalid}
        >
          Change Password &amp; Sign In
        </button>

        <p>Password Requirements</p>
        <p>Contains a lowercase letter: {validation.hasLowercaseLetter ? 'Yes' : 'No'}</p>
        <p>Contains an upper case letter: {validation.hasUpperCaseLetter ? 'Yes' : 'No'}</p>
        <p>Contains a number: {validation.hasNumber ? 'Yes' : 'No'}</p>
        <p>Contains a special character: {validation.hasSpecialCharacter ? 'Yes' : 'No'}</p>
        <p>Contains at least 8 characters: {validation.hasMinLength ? 'Yes' : 'No'}</p>

        {loginError && (
          <p>{loginError.message}</p>
          <button type="button" onClick={clearLoginError}>Clear Error</button>
        )}
      </form>
    )
  }

  if (isMfaCodeRequired) {
    return (
      <form
        onSubmit={(e) => {
          e.preventDefault()
          submitMfaCode()
        }}
      >
        <p>Enter the 6-digit code found in your authenticator app.</p>

        <input
          type="password"
          placeholder="Code"
          value={code}
          onChange={(e) => setCode(e.target.value)}
        />

        <button
          type="submit"
          disabled={isSubmittingMfaCode || codeValidation.isInvalid}
        >
          Sign In
        </button>

        {loginError && (
          <p>{loginError.message}</p>
          <button type="button" onClick={clearLoginError}>Clear Error</button>
        )}
      </form>
    )
  }

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        loginWithUsernamePassword()
      }}
    >
      <p>Sign in with your email address and password.</p>
      <input
        type="email"
        placeholder="Email Address"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />

      <input
        type="password"
        placeholder="New Password"
        value={newPassword}
        onChange={(e) => setNewPassword(e.target.value)}
      />

      <p>
        <a onClick={showForgotPassword}>Forgot your password?</a>
      </p>

      <button
        type="submit"
        disabled={isLoggingIn || usernameValidation.isInvalid || passwordValidation.isInvalid}
      >
        {children}
      </button>

      <p>or</p>

      <button
        type="button"
        onClick={loginWithGoogle}
      >
        <img
          alt="Google"
          src="google-sign-in.png"
        />
        <span>Sign in with Google</span>
      </button>

      {loginError && (
        <p>{loginError.message}</p>
        <button type="button" onClick={clearLoginError}>Clear Error</button>
      )}
    </form>
  )
}

const root = document.getElementById('root')
if (root) {
  ReactDOM.render(<App />, root)
}
Copy