Skip to main content

<SignInButton> component

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

src/App.tsx
import { SignInButton } from '@clerk/electron/react'

function App() {
  return <SignInButton />
}

export default App

Custom usage

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

src/App.tsx
import { SignInButton } from '@clerk/electron/react'

function App() {
  return (
    <SignInButton>
      <button>Custom sign in button</button>
    </SignInButton>
  )
}

export default App

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

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

Properties

  • 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
    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
    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
    initialValues
    Type
    SignInInitialValues
    Description

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

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

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub