āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/astro/client-side-helpers/sign-up-store ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
$signUpStore'
description: Clerk's $signUpStore nanostore provides a convenient way to access the SignUp object, which allows you to check the current state of a sign-up. This is also useful for creating a custom sign-up flow.
sdk: astroThe $signUpStore store provides a convenient way to access the SignUp{{ target: '_blank' }} object, which allows you to check the current state of a sign-up. This is also useful for creating a custom sign-up flow.
$signUpStore storeThe following example demonstrates how to use the $signUpStore store to access the SignUp object and check the current state of a sign-up.
<CodeBlockTabs options={['React', 'Vue', 'Svelte']}>
import { useStore } from '@nanostores/react'
import { $signUpStore } from '@clerk/astro/client'
export default function SignUpStep() {
const signUp = useStore($signUpStore)
if (signUp === undefined) {
// Add logic to handle loading state
return null
}
return <div>The current sign-up attempt status is {signUp.status}.</div>
}
<script setup>
import { useStore } from '@nanostores/vue'
import { $signUpStore } from '@clerk/astro/client'
const signUp = useStore($signUpStore)
</script>
<template>
<div v-if="signUp === undefined">
<!-- Add logic to handle loading state -->
</div>
<div v-else>
<div>The current sign-up attempt status is {{ signUp.status }}.</div>
</div>
</template>
<script>
// The $ prefix is reserved in Svelte for its own reactivity system.
// Alias the imports to avoid conflicts.
import { $signUpStore as signUp } from '@clerk/astro/client'
</script>
{#if $signUp === undefined}
<!-- Add logic to handle loading state -->
{:else}
<div>The current sign-up attempt status is {$signUp.status}.</div>
{/if}
The possible values for the status property of the SignUp resource are listed here{{ target: '_blank' }}.
The $signUpStore store can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the $signUpStore store to create custom flows, see the custom flow guides.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā