Skip to main content
Docs
Dashboard

<SignInButton>

The <SignInButton> component is a button that links to the sign-in page or displays the sign-in modal.

Properties

  • Name
    asChild?
    Type
    boolean
    Description

    For Astro only: If true, the <SignInButton> component will render its children as a child of the component.

  • 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
    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'.

  • Name
    children?
    Type
    React.ReactNode
    Description

    Children you want to wrap the <SignInButton> in.

  • Name
    initialValues
    Type
    SignInInitialValues
    Description

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

Usage

Basic usage

app/page.tsx
import { SignInButton } from '@clerk/nextjs'

export default function Home() {
  return <SignInButton />
}
src/sign-in.tsx
import { SignInButton } from '@clerk/clerk-react'

const SignInPage = () => <SignInButton />

export default SignInPage
pages/sign-in.astro
---
import { SignInButton } from '@clerk/astro/components'
---

<SignInButton />
app/routes/sign-in/$.tsx
import { SignInButton } from '@clerk/remix'

export default function SignInPage() {
  return <SignInButton />
}
app/routes/sign-in.tsx
import { SignInButton } from '@clerk/tanstack-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/sign-in')({
  component: SignIn,
})

function SignIn() {
  return <SignInButton />
}
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.

pages/index.js
import { SignInButton } from '@clerk/nextjs'

export default function Home() {
  return (
    <SignInButton>
      <button>Custom sign in button</button>
    </SignInButton>
  )
}
example.js
import { SignInButton } from '@clerk/clerk-react'

export default function Example() {
  return (
    <SignInButton>
      <button>Custom sign in button</button>
    </SignInButton>
  )
}
pages/index.js
import { SignInButton } from '@clerk/remix'

export default function Home() {
  return (
    <SignInButton>
      <button>Custom sign in button</button>
    </SignInButton>
  )
}

You must pass the asChild prop to the <SignInButton> component if you are passing children to it.

pages/index.astro
---
import { SignInButton } from '@clerk/astro/components'
---

<SignInButton asChild>
  <button>Custom sign in button</button>
</SignInButton>
example.vue
<script setup>
import { SignInButton } from '@clerk/vue'
</script>

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

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on