Docs

$signUpStore

The $signUpStore store 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.

How to use the $signUpStore store

Check the current state of a sign-up

The following example demonstrates how to use the $signUpStore store to access the SignUp object and check the current state of a sign-up.

sign-up-step.tsx
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>
}
sign-up-step.vue
<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>
sign-up-step.svelte
<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.

Create a custom sign-up flow

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, check out the custom flow guides.

Feedback

What did you think of this content?

Last updated on