Nuxt Module: Auto-imported Composables

@fingerly/nuxt registers the Vue plugin and auto-imports useIdentify, useVerdict and useFingerly.

Install

npm install @fingerly/nuxt

Configure

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@fingerly/nuxt'],
  fingerly: {
    apiKey: 'fly_pk_us_development_…',
  },
})

The options are published to runtimeConfig.public.fingerly, so each one can be overridden per environment without a rebuild:

.env

NUXT_PUBLIC_FINGERLY_API_KEY=fly_pk_us_production_…
NUXT_PUBLIC_FINGERLY_ENDPOINT=
NUXT_PUBLIC_FINGERLY_SUBMIT=true
NUXT_PUBLIC_FINGERLY_CONSENT=granted

Module options

apiKeystringrequired
Your public key.
endpointstring
A single API origin or first-party path.
endpointsstring[]
Ordered first-party endpoints. Set endpoint or endpoints, not both.
fallbackToDefaultEndpointbooleanDefault false
Try the regional API after your own endpoints fail.
submitbooleanDefault true
Set false to collect without sending.
consent'granted' | 'pending' | 'denied'Default 'granted'
The starting consent state. Change it at runtime with setConsent() from useFingerly().

Use it

components/SignupForm.vue

<script setup lang="ts">
const { identify, isLoading } = useIdentify({ tag: 'signup' })

async function onSubmit(form: { email: string }) {
  const { requestId } = await identify()
  await $fetch('/api/signup', { method: 'POST', body: { ...form, requestId } })
}
</script>

The composables are the Vue SDK's, unchanged. See useIdentify and useVerdict.

Server rendering

The plugin is registered on both server and client, so the composables work in any component during server rendering, where they return the unidentified state. Identification itself only happens in the browser.

Verify in a server route

server/api/signup.post.ts

import { load } from '@fingerly/node'

const fingerly = load({ secretKey: process.env.FINGERLY_SECRET_KEY! })

export default defineEventHandler(async (event) => {
  const { email, requestId } = await readBody(event)
  const result = await fingerly.events.get(requestId)
  if (result.tag !== 'signup') throw createError({ statusCode: 400 })
  // decide with result.suspect_level
})