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:

1. 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>

2. 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.

📃 License

NoPWD is licensed under the MIT License.

🎯 Support

If you need help or have any questions, please open an issue on our GitHub page.

🎉 About Us

NoPWD is maintained by @MarketAlly. We are a team of passionate developers dedicated to creating useful, high-quality software.