Skip to main content

<SignInButton>

The <SignInButton> component is a button that, by default, links to your app's sign-in page. Your sign-in page will be hosted by Clerk using the Account Portal unless you have set up a dedicated sign-in page.

Usage

Basic usage

example.vue
<script setup>
import { SignInButton } from '@clerk/vue'
</script>

<template>
  <SignInButton />
</template>

Custom usage

You can create a custom button by wrapping your own button, or button text, in the <SignInButton> component.

example.vue
<script setup>
import { SignInButton } from '@clerk/vue'
</script>

<template>
  <SignInButton>
    <button>Custom sign in button</button>
  </SignInButton>
</template>

If you want to render multiple elements, wrap them in a single parent element:

<template>
  <SignInButton>
    <button>
      <span>Continue</span>
      <span aria-hidden="true"> →</span>
    </button>
  </SignInButton>
</template>

Properties

  • Name
    forceRedirectUrl?
    Type
    string
    Description

    If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.

  • Name
    fallbackRedirectUrl?
    Type
    string
    Description

    The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

  • Name
    oauthFlow
    Type
    "redirect" | "popup" | "auto"
    Description

    Determines how OAuth authentication is performed. Accepts the following properties:

    • "redirect": Redirect to the OAuth provider on the current page.
    • "popup": Open a popup window.
    • "auto": Choose the best method based on whether the current domain typically requires the "popup" flow to correctly perform authentication.

    Defaults to "auto".

  • Name
    signUpForceRedirectUrl?
    Type
    string
    Description

    If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.

  • Name
    signUpFallbackRedirectUrl?
    Type
    string
    Description

    The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

  • Name
    mode?
    Type
    'redirect' | 'modal'
    Description

    Determines what happens when a user clicks on the <SignInButton>. Setting this to 'redirect' will redirect the user to the sign-in route. Setting this to 'modal' will open a modal on the current route. Defaults to 'redirect'.

    Warning

    Both mode values can silently fall back to the Account Portal when <ClerkProvider> is missing the signInUrl and/or signUpUrl props (or the equivalent environment variables):

    • mode="redirect" navigates the user to signInUrl. If signInUrl is not configured, Clerk redirects to the Account Portal sign-in page instead.
    • mode="modal" opens the sign-in modal in your app, but if a user starts an SSO/OAuth flow and needs to be transferred to sign-up (for example, a new user, or withSignUp is true), Clerk navigates to signUpUrl. If signUpUrl is not configured but signInUrl is set to a relative path (combined sign-in-or-up flow), the transfer resolves to signInUrl#/create instead. If neither is configured, the user is redirected to the Account Portal sign-up page mid-flow.

    If the Account Portal is disabled, either set both signInUrl and signUpUrl on <ClerkProvider>, or use a combined sign-in-or-up page (set signInUrl to a relative path and leave signUpUrl unset). Otherwise the fallback target returns a 404 and the authentication flow breaks.

  • Name
    children?
    Type
    React.ReactNode
    Description

    Children you want to wrap the <SignInButton> in. Only accepts one child; if you want to render multiple elements, wrap them in a single parent element.

  • Name
    initialValues
    Type
    SignInInitialValues
    Description

    The values used to prefill the sign-in fields with.

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub