GithubButton

Branded "Continue with GitHub" button that starts the SimpleAuth GitHub OAuth redirect flow.

Overview

GithubButton wraps useGithubAuth and calls auth.signInWithGithub when clicked. Configure your app and allowlisted origins in the GitHub sign-in guide.

Preview

Interactive preview requires JavaScript.

Install

npx @simpleauthjs/react add github-auth

Props

Prop	Type	Default	Description
`redirectUrl`	`string`	—	Required. Absolute URL on your app after sign-in. The URL’s origin must match allowed redirect origins in the dashboard.
`label`	`string`	`"Continue with GitHub"`	Button label.
`variant`	`"light" \| "dark"`	`"dark"`	Visual style.

Usage

import { GithubButton } from "@/components/simpleauth"

export default function LoginPage() {
  return <GithubButton redirectUrl="https://myapp.com/dashboard" />
}

With SignUpForm, pass githubRedirectUrl (and optionally googleRedirectUrl) so the form shows the same button below the email fields:

<SignUpForm
  appName="Acme"
  githubRedirectUrl="https://myapp.com/dashboard"
/>

Source

components/simpleauth/hooks/use-github-auth.ts

"use client"

import { useState } from "react"
import { SimpleAuthError } from "@simpleauthjs/core"
import { useSimpleAuthClient } from "../provider"

function getErrorMessage(error: unknown) {
  if (error instanceof SimpleAuthError) {
    return error.message
  }

  if (error instanceof Error) {
    return error.message
  }

  return "Unable to start GitHub sign-in."
}

export function useGithubAuth() {
  const auth = useSimpleAuthClient()
  const [isRedirecting, setIsRedirecting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  function signInWithGithub(input: { redirectUrl: string }) {
    setIsRedirecting(true)
    setError(null)

    try {
      auth.signInWithGithub({ redirectUrl: input.redirectUrl })
    } catch (requestError) {
      setIsRedirecting(false)
      setError(getErrorMessage(requestError))
      throw requestError
    }
  }

  function reset() {
    setError(null)
    setIsRedirecting(false)
  }

  return {
    signInWithGithub,
    isRedirecting,
    error,
    isError: Boolean(error),
    reset,
  }
}

Generated files live at components/simpleauth/ui/github-button.tsx and components/simpleauth/styles/github-button.css. Edit them directly, or remove the OAuth block from sign-in-form.tsx / sign-up-form.tsx if you only want email auth.