🍳The Auth Button

The Auth Button (@kryptogo/auth-react) is a pre-built React component that simplifies the integration of the KryptoGO authentication process into your React application. Include the Auth Button in your React JSX code, pass in props, and it handles the user interface and authentication flow for you.

tip

Need more fine-tuned control and flexibility over the user interface and authentication flow? Check out our Onboarding Web SDK instead.

Use Case

The Auth Button is ideal for situations where you want a quick and easy way to add KryptoGO authentication to your React application without having to manually manage the user interface elements and authentication flow. It abstracts away many of the complexities, making it suitable for developers who want a more straightforward integration.

tip

Here's a demo website that uses The Auth Button.

Using the Auth Button

To use the Auth Button, including the SDK script in your HTML file using a <script> tag or install it with npm/pnpm/yarn.

Include the @kryptogo/auth-react script in your HTML file:

<script src="path-to-our-sdk.0.1.0.min.js"></script>

Or, install from npm/pnpm/yarn:

npm install @kryptogo/auth-react

# or

pnpm add @kryptogo/auth-react

# or

yarn add @kryptogo/auth-react

Then, you can use the Auth Button in your application. Here's a sample code snippet.

import { ConnectButton } from "@kryptogo/auth-react";
export default function MyPage() {
  return (
    <div>
      <ConnectButton content="Login" clientId="CLIENT_ID" />
    </div>
  );
}

• Replace CLIENT_ID with your actual client ID, which is provided by KryptoGO.
• The props of ConnectButton are shown below:

Prop	Type	Description
clientId	string	The client ID provided by KryptoGO.
methods	LoginMethod[]	Specify what login methods are available.
styles	ColorPalette	Color palette of the UI.
beforeLogin	() => boolean	Actions you wish to perform before initiating the login process. If the function returns a falsy value, the login process will not start.
onLogin	() => void	Actions you wish to perform after the login process is successful.
onLogout	() => void	Actions you wish to perform after the logout process is successful.
onError	(error: any) => void	Error handler when the login process fails.