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:
npm install @simpleotp/core
npm install @simpleotp/vueThen, 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).
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');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:
<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" 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 name="email-submit" type="submit" :disabled="!email" label="Sign in"></button>
</div>
<div v-if="isWebAuthnSupported" class="relative flex py-0 items-center">
<div class="flex-grow border-t border-gray-400"></div>
<span class="flex-shrink mx-4 text-gray-400">Or</span>
<div class="flex-grow border-t border-gray-400"></div>
</div>
<div v-if="isWebAuthnSupported">
<button name="webauthn-submit" type="submit" :disabled="!email" label="Sign in with a passkey"></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 tap "Sign in," even if you don't have an account
yet.
</p>
<p class="mt-10 text-center text-sm text-gray-500">You'll only be able to sign in with a passkey if you've already registered one after tapping "Sign in."</p>
</form>
</div>
</div>
</template>
<script setup>
import StyledButton from '../components/common/StyledButton.vue'
import KeyIcon from '../components/common/icons/KeyIcon.vue'
import { SignInStatusCode } from '@simpleotp/core'
import { useSimpleOTP } from '@simpleotp/vue'
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps({
email: {
type: String,
required: false
},
submit: {
type: String,
required: false
}
})
const router = useRouter()
const simpleOTP = useSimpleOTP()
const email = ref(props.email)
const isLoading = ref(false)
const signInStatus = ref(null)
const isWebAuthnSupported = computed(() => typeof(PublicKeyCredential) !== 'undefined' && navigator.credentials)
async function signIn(e) {
if (e) {
e.preventDefault()
}
isLoading.value = true
if (e.submitter.name === 'email-submit') {
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
}
} else {
signInStatus.value = await simpleOTP.authWithWebAuthnCredentials(email.value)
if (signInStatus.value.code === SignInStatusCode.OK.description) {
router.push({ path: '/' })
} else {
isLoading.value = false
}
}
}
onMounted(async () => {
if (simpleOTP.isAuthenticated()) {
router.push({ path: '/' })
}
if (props.submit === 'true' && email.value) {
await signIn(null)
}
})
</script>Auth (for email-based authentication flows only):
<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:
<template>
<a href="#">
<!-- User Icon goes here -->
<span @click="signIn" v-if="!isAuthenticated"> Sign in <span aria-hidden="true">→</span></span>
<span @click="signOut" v-else> Sign out <span aria-hidden="true">→</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>Passkey Registration (for WebAuthn-based authentication flows only, to be used for already-logged-in users):
<template>
<div class="flex min-h-full flex-1 flex-col justify-center px-6 py-0 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
<h2 class="mt-2 text-center text-2xl font-bold leading-9 tracking-tight text-white">
Credentials
</h2>
</div>
<div class="mt-0 sm:mx-auto sm:w-full sm:max-w-sm">
<div v-if="errorMessage" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
<span class="block sm:inline">{{ errorMessage }}</span>
</div>
<div v-if="successMessage" class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
<span class="block sm:inline">{{ successMessage }}</span>
</div>
<br />
<button name="add-a-passkey" type="button" @click="addPasskey" :disabled="false" label="Add a passkey"></button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useSimpleOTP } from '@simpleotp/vue'
import { useRouter } from 'vue-router'
import { SiteWebAuthnStatusCode } from '@simpleotp/core'
const router = useRouter()
const simpleOTP = useSimpleOTP()
const errorMessage = ref(null)
const successMessage = ref(null)
async function addPasskey() {
const resp = await simpleOTP.registerWebAuthnCredentials()
if (resp.code === SiteWebAuthnStatusCode.OK.description) {
errorMessage.value = null
successMessage.value = resp.message
} else if (resp.code === SiteWebAuthnStatusCode.Unauthorized.description) {
simpleOTP.signOut()
router.go()
errorMessage.value = resp.message
} else {
errorMessage.value = resp.message
}
}
</script>
<style>
</style>In this example, the Vue component uses the useSimpleOTP function to inject the VueSimpleOTP instance, allowing you to access its 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.