FunctionuseLogin

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 (
      
 {
          e.preventDefault()
          resetForgottenPassword()
        }}
      >
        
We have sent you a password reset code via email. Enter it below to reset your password.

         setCode(e.target.value)}
        />

         setNewPassword(e.target.value)}
        />

         setNewPasswordConfirmed(e.target.value)}
        />

        
          Change Password
        

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

        {forgotPasswordError && (
          
{forgotPasswordError.message}
          Clear Error
        )}
      
    )
  }

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

         setUsername(e.target.value)}
        />

        

          Remembered your password?
        

        
          Reset Password
        

        {forgotPasswordError && (
          
{forgotPasswordError.message}
          Clear Error
        )}
      
    )
  }

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

         setNewPassword(e.target.value)}
        />

         setNewPasswordConfirmed(e.target.value)}
        />

        
          Change Password & Sign In
        

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

        {loginError && (
          
{loginError.message}
          Clear Error
        )}
      
    )
  }

  if (isMfaCodeRequired) {
    return (
      
 {
          e.preventDefault()
          submitMfaCode()
        }}
      >
        
Enter the 6-digit code found in your authenticator app.

         setCode(e.target.value)}
        />

        
          Sign In
        

        {loginError && (
          
{loginError.message}
          Clear Error
        )}
      
    )
  }

  return (
    
 {
        e.preventDefault()
        loginWithUsernamePassword()
      }}
    >
      
Sign in with your email address and password.
       setUsername(e.target.value)}
      />

       setNewPassword(e.target.value)}
      />

      

        Forgot your password?
      

      
        {children}
      

      
or

      
        
        Sign in with Google
      

      {loginError && (
        
{loginError.message}
        Clear Error
      )}
    
  )
}

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