$signInStore
The $signInStore store provides a convenient way to access the SignIn object, which allows you to check the current state of a sign-in. This is also useful for creating a custom sign-in flow.
How to use the $signInStore store
Check the current state of a sign-in
The following example demonstrates how to use the $signInStore store to check the current state of a sign-in.
import { useStore } from '@nanostores/react'
import { $signInStore } from '@clerk/astro/client'
export default function SignInStep() {
const signIn = useStore($signInStore)
if (signIn === undefined) {
// Add logic to handle loading state
return null
}
return <div>The current sign in attempt status is {signIn.status}.</div>
}<script setup>
import { useStore } from '@nanostores/vue'
import { $signInStore } from '@clerk/astro/client'
const signIn = useStore($signInStore)
</script>
<template>
<div v-if="signIn === undefined">
<!-- Add logic to handle loading state -->
</div>
<div v-else>
<div>The current sign in attempt status is {{ signIn.status }}.</div>
</div>
</template><script>
// The $ prefix is reserved in Svelte for its own reactivity system.
// Alias the imports to avoid conflicts.
import { $signInStore as signIn } from '@clerk/astro/client'
</script>
{#if $signIn === undefined}
<!-- Add logic to handle loading state -->
{:else}
<div>The current sign in attempt status is {$signIn.status}.</div>
{/if}The possible values for the status property of the SignIn resource are listed here.
Create a custom sign-in flow
The $signInStore store can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the $signInStore store to create custom flows, check out the custom flow guides.
Feedback
Last updated on