@marketally/nopwd-vue3-library NPM

NoPWD Vue3 Library

Easy NoPWD Authentication Library for Vue3.

NoPWD is a powerful, easy-to-use library for incorporating NoPWD based login functionality into your Vue 3 applications. It primarily focuses on leveraging QR codes for seamless and secure passwordless authentication.

🚀 Features

QR Code Integration: Generate and display QR codes for login to the NoPWD System platform.
Responsive: Adaptable display for various screen sizes, including mobile screens.
Custom Theming: Configurable themes for light and dark modes.
Event Emitters: Emit events for errors, redirections, and authentication status updates.
Encrypted Data Transmission: Securely handle data with encryption.
Vue3 Compatible: Designed specifically for Vue 3 environments.

🔧 Installation

Install NoPWD with npm:

npm install @marketally/nopwd-vue3-library

🎈 Usage

To use the NoPWD Vue3 component in your project, follow the steps below:

Using the Component:

<script setup>
import Login from '@marketally/nopwd-vue3-library';
</script>

<template>
  <Login 
    :isMobileScreen="true"
    :isDark="false"
    primaryDark="#c48a56"
    secondaryDark="#18181b"
    logoDark="path_to_dark_logo.png"
  />
</template>

Listening to Events:

You can also listen to events emitted by the component, such as Error, Redirect, and Status to handle different scenarios in the authentication process.

📖 Documentation

Property	Type	Default Value	Description
`isMobileScreen`	Boolean	`false`	Determines if the screen size is mobile.
`primaryDark`	String	`#c48a56`	Primary dark color theme.
`primaryLight`	String	`#606C38`	Primary light color theme.
`secondaryDark`	String	`#18181b`	Secondary dark color theme.
`secondaryLight`	String	`#ffffff`	Secondary light color theme.
`isDark`	Boolean	`false`	Determines if dark mode is active.
`positionLight`	String	`#000000`	Light color for QR code position markers.
`positionDark`	String	`#ffffff`	Dark color for QR code position markers.
`accentColor`	String	`#ffffff`	Accent color for various UI elements.
`logoDark`	String	`''`	URL for the dark-themed logo.
`logoLight`	String	`''`	URL for the light-themed logo.
`configDev`	String	`''`	Configuration URL for the development environment. (e.g. http://localhost:3000)
`configProduction`	String	`''`	Configuration URL for the production environment. (e.g. https://www.yoursite.com)
`configApp`	String	`''`	App configuration URL. (e.g. '/app')
`configLogin`	String	`''`	Login configuration URL. (e.g. '/auth/login')
`configRequest`	String	`''`	Request configuration URL. This is used to request the code from your service which contacts the NoPWD system.
`configVerify`	String	`''`	Verify configuration URL. Calls your service to verify the status of the request
`configConfirm`	String	`''`	Confirmation configuration URL. oOnfirms the access is still valid
`configLogout`	String	`''`	Logout configuration URL. THe service call to your service whethr to log the user out.

Each property can be easily customized to fit the design and functionality needs of your application. Adjust the defaults as necessary to achieve your desired look and behavior.