Glyph

Appearance

LoginButton ​

A pre-styled button component that initiates the login process. When using the Privy integration, it serves as the standalone login button for Glyph. For other integration methods (ConnectKit, RainbowKit, Dynamic or Wagmi), use this button after the wallet is connected. It will prompt the user to sign a message and generate an authentication token, which is then used by hooks and the widget to fetch user data.

INFO

The login flow is capable in itself to onboard new users without leaving your application.

Import ​

tsx
import { LoginButton } from "@use-glyph/sdk-react";

Usage ​

INFO

To use the LoginButton component, you need to import the styles.

tsx
import "@use-glyph/sdk-react/style.css";
css
@import "@use-glyph/sdk-react/style.css";
tsx
import { LoginButton } from "@use-glyph/sdk-react";
import { GlyphProvider } from "@use-glyph/sdk-react";

function App() {
	return (
		<GlyphProvider>
			<LoginButton />
		</GlyphProvider>
	);
}

Props ​

The LoginButton component does not accept any props. It automatically handles the login process and displays appropriate loading states.

States ​

The button automatically handles different states:

  • Default: Shows "Sign in with Glyph" with the Glyph icon
  • Loading: Shows a loading spinner when the authentication process is in progress
  • Disabled: Button is disabled when authentication is in progress or when already authenticated

Example in Authentication Flow ​

tsx
import { LoginButton } from "@use-glyph/sdk-react";
import { useGlyph } from "@use-glyph/sdk-react";

function AuthSection() {
	const { authenticated } = useGlyph();

	return (
		<div className="auth-section">
			<h2>Authentication</h2>
			{!authenticated ? (
				<div>
					<p>Please sign in to access your account</p>
					<LoginButton />
				</div>
			) : (
				<p>You are signed in!</p>
			)}
		</div>
	);
}

Styling ​

The button uses Tailwind CSS classes prefixed with gw- to avoid conflicts with your application's styles. The default styling includes:

  • Primary color background
  • White text
  • Rounded corners
  • Glyph icon in a circular background
  • Consistent padding and height

You can target these classes in your CSS to customize the appearance further.

Custom Login Button ​

If you need more control over the login process or button appearance, you can create a custom login button using the useGlyph hook:

tsx
import { useGlyph } from "@use-glyph/sdk-react";

function CustomLoginButton() {
	const { login, ready, authenticated } = useGlyph();

	return (
		<button
			onClick={login}
			disabled={!ready || authenticated}
			className="your-custom-button-class"
		>
			{!ready ? "Loading..." : "Custom Login Button"}
		</button>
	);
}