ReactHooks
useGithubAuth
Hook that wraps auth.signInWithGithub for custom GitHub buttons or flows.
Overview
useGithubAuth wraps auth.signInWithGithub for custom buttons or flows. Prefer GithubButton when you want the branded control.
Install
npx @simpleauthjs/react add github-authUsage
"use client"
import { useGithubAuth } from "@/components/simpleauth"
export function MyGithubLogin() {
const { signInWithGithub, isRedirecting, error } = useGithubAuth()
return (
<button type="button" disabled={isRedirecting} onClick={() => signInWithGithub({ redirectUrl: "https://myapp.com/" })}>
{isRedirecting ? "Redirecting…" : "GitHub"}
</button>
)
}Return value
| Field | Type | Description |
|---|---|---|
signInWithGithub | (input: { redirectUrl: string }) => void | Starts the redirect flow. |
isRedirecting | boolean | true after click until navigation completes. |
error | string | null | Set when starting the flow throws (e.g. SSR misuse). |
isError | boolean | Convenience flag. |
reset | () => void | Clears local hook state. |
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,
}
}