Skip to main content
Docs

useSignIn() | Vue

The useSignIn() composable provides access to the object, which allows you to check the current state of a sign-in attempt and manage the sign-in flow. You can use this to create a custom sign-in flow.

Returns

  • Name
    isLoaded
    Type
    Ref<boolean>
    Description

    A boolean that indicates whether Clerk has completed initialization. Initially false, becomes true once Clerk loads.

  • Name
    setActive()
    Type
    Ref<(params: ) => Promise<void>>
    Description

    A function that sets the active session.

  • Name
    signIn
    Type
    Ref<>
    Description

    An object that contains the current sign-in attempt status and methods to create a new sign-in attempt.

How to use the useSignIn() composable

The following example uses useSignIn() to access the object, which contains the current sign-in attempt status and methods to create a new sign-in attempt. The isLoaded property is used to handle the loading state.

SignInPage.vue
<script setup>
import { useSignIn } from '@clerk/vue'

const { isLoaded, signIn } = useSignIn()
</script>

<template>
  <div v-if="!isLoaded">
    <!-- Add logic to handle loading state -->
  </div>

  <div v-else>The current sign in attempt status is {{ signIn?.status }}.</div>
</template>

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on