react-native-auth-screens

Well React native is now well known for creating mobile applications, all the application now has authentication flow, i.e. Do Login, Do Register.

So This library will provide the authentication module which includes customizable ready made screens (Login, Register).

Handle all the api call, and erro handling as it by self, still as considering the developer mind set, it has all option to handle the calls and validation manually by its helper functions.

usage

npm i react-native-auth-screens --save

Login Screen

import React, {useState} from 'react';
import { LoginScreen } from 'react-native-auth-screens';

const App = () => {
  const [backgroundColor, setBackgroundColor] = useState('yellow');
  return (
    <LoginScreen
        authCheckURL=""
        afterSuccess={ token => {
            // do something after login successfull.          
        }}
        afterFailed={ error => {
            //handle erorr
        }}
    />
  );
};
export default App;

Register Screen

import React, {useState} from 'react';
import { RegisterScreen } from 'react-native-auth-screens';

const App = () => {
  const [backgroundColor, setBackgroundColor] = useState('yellow');
  return (
    <RegisterScreen
        authRegisterURL=""
        afterSuccess={ userDetails => {
            // do something after login successfull.          
        }}
        afterFailed={ error => {
            //handle erorr
        }}
    />
  );
};
export default App;

Other usefull props provide in library | Property | Type | Default | Description | Required | |----------------------|------------------------------------|----------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|----------| | authRegisterURL | string | none | API URL to call to register user | yes | | afterSuccess | function | _ => {} | function callback after successfull login / Register, returns token for login and user details for register | yes | | afterFailed | function | _ => {} | function callback after failed login / Register | yes | | authCheckURL | string | none | API URL to call to login user | yes | | layoutStyle | style object | Default | Style for screen root view | no | | statusBarProps | object | Default | status bar props. | no | | appLogo | image | Default | Give your app logo image here to display on screen. | no | | inputActiveStyle | object | Default | Blured style of input. | no | | inputStyle | object | Default | Focus style of input. | no | | userNameLabel | string | Username | label for username input. | no | | passwordLabel | string | Password | label for password input. | no | | onChangeText | function | Default | Get callback back in your screen on change input event , it has value and key name as parameter. | no | | btnTitle | object | Login for login screen, Register for Register screen | Can be override the btn text by passing this props. | no | | btnStyle | object | Default | Button style can be override by passing this props. | no | | btnTitleStyle | object | Default | Button title style can be override by passing this props. | no | | userNameKey | string | username | request param key to send username for register / login api call. | no | | passwordKey | string | password | request param key to send password for register / login api call. | no | | emailKey | string | email | request param key to send email for register api call. | no | | mobileKey | string | mobile | request param key to send mobile number for register api call. | no | | extraFields | array [{ key, label, secureText }] | none | To add fields in registration form | no | | errors | object | { "401": "Invalid credentials", '400': "Missing some fields", "500": "Server Error." } | errors message to display according to response status code. | no | | validateLoginForm | function | Default | Validation function to validate login form before submit. | no | | validateRegsiterForm | function | Default | Validation function to validate register form before submit. | no | | showEmail | boolean | true | Registration screen whether to display email field or not | no | | showMobile | boolean | true | Registration screen whether to display mobile field or not | no |

Helper Methods | name | parameters | returns | |----------------|------------------------------------------------------------------------------------|---------------------------------------------------| | doLogin | (userName, password, authCheckURL, userNameKey="username", passwordKey="password") | auth token on success / error instance on fail. | | doRegisterCall | (params, authRegisterURL) | user details on success / error instance on fail. | | alertError | (title, message) | show native alert. | | saveUserToken | token | save auth token to local storage. | | getUserToken | none | user auth token saved in local storage. |

Function usage

import { AuthFunctions } from 'react-native-auth-screens';
let token = await AuthFunctions.getUserToken();