my-login-library

A professional React library for handling login functionality.

Install

npm install my-login-library

Usage

This is a basic login form which can be triggered upon calling {LoginForm} from the library and can be used for authentication purpose by user given configurable gateways and microservice api endpoints. This is an example of implementing the library in a basic app.

import { LoginForm } from 'my-login-library';

const App = () => {
  return (
    <div>
      <LoginForm/>
    </div>
  );
};

export default App;

Configuration

The library accepts a configuration object as a prop. You can customize the behavior by passing a config prop to the LoginForm component:

1. Create a config.js file in the root of your project:

// config.js

const authConfig = {
    backendUrl: 'http://your-auth-url',
  };
  
  export default authConfig;

2. Use the authConfig in your application:

import React from 'react';
import { LoginForm } from 'my-login-library';
import authConfig from './config'; 

const App = () => {
  
    // Destructure configurations from the imported authConfig object
    const { backendUrl } = authConfig;
  
    // Handle login callback
    const handleLogin = () => {
      // Perform any actions upon successful login
    };
  
    return (
      <LoginForm
        onLogin={handleLogin}
        backendUrl={backendUrl}
        
      />
    );
  };
  
  export default App;

Expected Input

Now on the basis of the ApiUrl from the config file the user must have a backend which has two fields username and password and must have a POST method for authentication. The post method should call the backend api from the url mentioned in the config file "http://your-auth-url" with a "/authenticate" endpoint. The Service Response should somewhat look like this :

curl -X POST \
  -H "Content-Type: application/json" \
  -d '{"username": "your_username", "password": "your_password", "appName": "your_appname"}' \
  http://your-api-base-url/authenticate

Expected Outcome

Successful Login:

• Upon successful login, the handleLogin function is called.
• You should see a log message indicating the successful login.
• Customize the handleLogin function to perform actions such as navigation to another page, fetching user data, etc.

1. The response of a succesfull login is :

{
 "status": {
   "code": 200,
   "type": "success",
   "msg": "Authentication successful"
 }
}

2. In case of wrong credentials :

{
 "status": {
   "code": 401,
   "type": "failure",
   "msg": "password mismatch"
 }
}

3. In case where the server cannot or will not process the request due to something that is perceived to be a client error:

{
 "status": {
   "code": 404,
   "type": "failure",
   "msg": "Not Found"
 }
}

When user fills the correct credentials they will get a Login Successful message and then as per the handle login function other tasks will be performed.

Pre-Requesites

User needs to have a microservice API running for a database which contains username and password.

Future Plans

• JWT and Azure Ad based authentication

License

MIT ©