Setup

​

Installation

First, you need to set up a Corbado project.

To get started with the integration, install the Corbado web-js package:

npm install @corbado/web-js

If your project uses TypeScript, you should also install the types for the package:

npm install -D @corbado/types

​

Set up Corbado

As a prerequisite to all future actions, Corbado has to be loaded. We do this by using the Corbado.load function. We also maintain a global state, indicating whether Corbado is successfully loaded.

<script setup lang="ts">
import Corbado from "@corbado/web-js"
import { ref, provide, onMounted } from 'vue'

// Create a global state
const isCorbadoLoaded = ref(false)

onMounted(async () => {
    await Corbado.load({
        projectId: "pro-XXX"
    })
    isCorbadoLoaded.value = true // Set the global state to true after Corbado is loaded
})

// Provide the state globally
provide('isCorbadoLoaded', isCorbadoLoaded)
</script>

<template>
    <!-- Your app content -->
</template>

​

Configuration

Most configuration is done in the . The following options are available:

​

Next

1. Add authentication UI components to your application.
2. Let your users manage their passkeys with the PasskeyList.
3. Learn how you can access the users authentication state.