# @simpleotp/vue

> # **Installation**: First, make sure you have the `@simpleotp/core` library installed in your project since the Vue Simple OTP plugin depends on it. Make sure to install this plugin as well:

Latest version **1.2.0** (published 2024-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @simpleotp/vue
pnpm add @simpleotp/vue
yarn add @simpleotp/vue
bun add @simpleotp/vue
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-03-18 |
| First published | 2023-09-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mockernut-ventures |

## Links

- npm: https://www.npmjs.com/package/@simpleotp/vue
- npm.io page: https://npm.io/package/@simpleotp/vue

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [@simpleotp/core](https://npm.io/package/@simpleotp/core.md) ^1.2.0

## Recent versions

- 1.2.0 (latest) — 2024-03-18
- 1.1.0 — 2023-09-21
- 1.0.2 — 2023-09-04
- 1.0.1 — 2023-09-03

## README

# simpleotp-sdk-js-vue

# **Installation**:
   First, make sure you have the `@simpleotp/core` library installed in your project since the Vue Simple OTP plugin depends on it. Make sure to install this plugin as well:

   ```bash
   npm install @simpleotp/core
   npm install @simpleotp/vue
   ```
   
   Then, you need to install the Vue plugin in your Vue project. You can do this by importing the plugin and installing it using Vue's `createApp` or `Vue.use` method. Typically, you would do this in your main Vue application file (e.g., `main.js` or `main.ts`).

   ```javascript
   import { createApp } from 'vue';
   import SimpleOTPPlugin from '@simpleotp/vue'; // Import the plugin

   const app = createApp(App);

   // Install the SimpleOTP plugin with your configuration options
   app.use(SimpleOTPPlugin, {
     siteID: 'your-site-id', // This will be given to you after you sign up for a Simple OTP subscription and create a site
     apiURL: 'your-api-url' // Optional, can be null - only used for self hosting
   });

   app.mount('#app');
   ```

# **Usage**:
   After installing the plugin, you can use it in any Vue component by injecting it using the `useSimpleOTP` function. Here's an example of how to use the sign-in flow, the auth flow, and the sign-out flow in different Vue components using Tailwind CSS for styling:

   SignIn:
   ```vue
   <template>
     <div class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
       <div class="sm:mx-auto sm:w-full sm:max-w-sm">
         <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-white">
           Sign in to your account
         </h2>
       </div>
       <div class="mt-5 sm:mx-auto sm:w-full sm:max-w-sm">
         <form @submit="signIn" class="space-y-6">
           <div v-if="signInStatus?.code in [SignInStatusCode.InternalServerError.description, SignInStatusCode.InvalidSite.description, SignInStatusCode.SiteNotFound.description]"
             class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
             <span class="block sm:inline">{{ signInStatus.message }}</span>
           </div>
           <div v-else-if="signInStatus?.code && signInStatus?.code !== SignInStatusCode.OK.description" class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded relative" role="alert">
             <span class="block sm:inline">{{ signInStatus.message }}</span>
           </div>
           <div>
             <label for="email" class="block text-sm font-medium leading-6 text-white">
               Email address
             </label>
             <div class="mt-2">
               <input id="email" v-model="email" name="email" type="email" autocomplete="email" required
                 class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
             </div>
           </div>
           <div>
             <button type="submit" :disabled="!email">Sign In</button>
           </div>
           <p class="mt-10 text-center text-sm text-gray-500">
             We'll send a magic sign in link to your email when you click "Sign in," even if you don't have an account
             yet.
           </p>
         </form>
       </div>
     </div>
   </template>
   
   <script setup>
   import { SignInStatusCode } from '@simpleotp/core'
   import { useSimpleOTP } from '@simpleotp/vue'
   import { ref } from 'vue'
   import { useRouter } from 'vue-router'
   
   const props = defineProps({
     email: {
       type: String,
       required: false
     }
   })
   const router = useRouter()
   const simpleOTP = useSimpleOTP()
   
   const email = ref(props.email)
   const isLoading = ref(false)
   const signInStatus = ref(null)
   
   async function signIn(e) {
     e.preventDefault()
     
     isLoading.value = true
     signInStatus.value = await simpleOTP.signIn(email.value)
     if (signInStatus.value.code === SignInStatusCode.OK.description) {
       router.push({ path: '/sign-in/confirmation', query: { email: email.value } })
     } else {
       isLoading.value = false
     }
   }
   
   if (simpleOTP.isAuthenticated()) {
     router.push({ path: '/' })
   }
   </script>
   ```
   Auth:
   ```vue
   <template>
     <div class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
       <div class="sm:mx-auto sm:w-full sm:max-w-sm">
         <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-white">
           Authentication
         </h2>
       </div>
       <div class="mt-5 sm:mx-auto sm:w-full sm:max-w-sm">
         <span v-if="!authErrorMessage" class="text-2xl font-sans text-white">
           Authenticating you, one moment...
         </span>
         <span v-else class="text-2xl font-sans text-white">
           There was an error authenticating you: {{ authErrorMessage }}
         </span>
       </div>
     </div>
   </template>
   
   <script async setup>
     import { onMounted, ref } from 'vue'
     import { useSimpleOTP } from '@simpleotp/vue'
     import { AuthStatusCode } from '@simpleotp/core'
     import { useRouter } from 'vue-router'
     const simpleOTP = useSimpleOTP()
     const router = useRouter()
     const authErrorMessage = ref(null)
   
     onMounted(async () => {
       const authResponse = await simpleOTP.authWithURLCode()
       if (authResponse.code !== AuthStatusCode.OK.description) {
         authErrorMessage.value = authResponse.message
       } else {
         router.push({ path: '/' })
       }
     })
   </script>
   ```

   SignOut:
   ```vue
   <template>
     <a href="#">
       <!-- User Icon goes here -->
       <span @click="signIn" v-if="!isAuthenticated">&nbsp;Sign in <span aria-hidden="true">&rarr;</span></span>
       <span @click="signOut" v-else>&nbsp;Sign out <span aria-hidden="true">&rarr;</span></span>
     </a>
   </template>
   
   <script setup>
     import { useSimpleOTP } from '@simpleotp/vue'
     import { useRouter } from 'vue-router'
     const simpleOTP = useSimpleOTP()
     const router = useRouter()
   
     const isAuthenticated = simpleOTP.isAuthenticatedRef()
   
     function signIn() {
       router.push('/sign-in')
     }
   
     function signOut() {
       simpleOTP.signOut()
       router.push('/')
     }
   </script>
   ```

   In this example, the Vue component uses the `useSimpleOTP` function to inject the `VueSimpleOTP` instance, allowing you to access its methods and state.

# **Methods and State**:
   The `VueSimpleOTP` class extends the `SimpleOTP` class and provides methods like `authWithURLCode`, `signOut`, and access to read-only references to `isAuthenticated` and `user`. You can call these methods and use the state in your Vue component's setup function, as shown in the example above.

   - `simpleOTP.authWithURLCode()`: This method is used for authentication with a URL code.
   - `simpleOTP.signOut()`: This method signs the user out.
   - `simpleOTP.isAuthenticatedRef()`: This function returns a read-only reference to the user's authentication status.
   - `simpleOTP.getUserRef()`: This function returns a read-only reference to the user object.

By following these steps, you can integrate the provided code into your Vue project and use the `@simpleotp/core` library with the added convenience of Vue.js features such as reactive state management and component composition.

---
_Source: https://npm.io/package/@simpleotp/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._