@npm_panaceata/login-module NPM

@panaceata/login-module

A common login module for React Native apps using AWS Amplify.

Installation

npm install @panaceata/login-module

Ensure you have the required peer dependencies installed:

npm install aws-amplify @aws-amplify/react-native @react-native-async-storage/async-storage

Usage

Set up your Amplify configuration in your main app file in the root directory (e.g., amplifyconfiguration.json):

{
    "aws_project_region": "",
    "aws_cognito_region": "",
    "aws_user_pools_id": "",
    "aws_user_pools_web_client_id": "",
    "oauth": {}
}

Import and use the LoginModule in your app:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Amplify } from 'aws-amplify';
import { LoginModule } from '@npm_panaceata/login-module';
import amplifyConfig from './amplifyconfiguration.json';
Amplify.configure(amplifyConfig);

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginSuccess = (user: any) => {
    console.log('Login successful:', user);
    setIsLoggedIn(true);
  };

  const handleNavigateHome = () => {
    console.log('Navigating to home screen');
  };

  if (isLoggedIn) {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Welcome to *** Module!</Text>
      </View>
    );
  }

  return (
    <LoginModule
      moduleName="Quality Control Module"
      logo={require('./assets/logo.png')}
      onLoginSuccess={handleLoginSuccess}
      allowedUserGroups={['qualityControl']}
      amplifyConfig={amplifyConfig}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

Make sure that you have logo.png and filles in your assets folder and use that in LoginModule:

Props

moduleName: String - The name of the module to be displayed
logo: ImageSourcePropType - The logo to be displayed
onLoginSuccess: (user: any) => void - Callback function called on successful login
allowedUserGroups: string[] - Array of allowed user groups
amplifyConfig: () => void - Callback function to amplify configuration