The Authentication UI allows the user to log in or register with Corbado.
The UI is rendered by using the Corbado.mountAuthUI method.
Once the user is logged in, the onLoggedIn callback is executed.
pages/index.vue
Copy
Ask AI
<script setup lang="ts">import Corbado from "@corbado/web-js"import {watchEffect, Ref} from "vue";const isCorbadoLoaded = inject('isCorbadoLoaded') as Ref<boolean>const authElement = ref<HTMLDivElement>()watchEffect(() => { if (authElement.value && isCorbadoLoaded.value) { Corbado.mountAuthUI(authElement.value, { onLoggedIn: () => { console.log('User logged in') // perform any action after the user logs in (e.g. redirect to another page) navigateTo('/profile') } }) }})</script><template> <div> <div ref="authElement"></div> </div></template>
Corbado UI Components can be customized to match your application’s design and language preferences. You can adjust the styling and translations of the components to create a seamless user experience: