Authenticate users

Account Kit makes it really easy to authenticate your users using a number of different authentication methods. If you followed the quickstart, then your app is already setup to authenticate users and you can skip this guide!

In this guide, we'll show you two different ways to authenticate users:

Using our UI components to handle the entire authentication flow.
Using our React hooks to build your own custom UI.

Using our UI components

Account Kit allows you to use pre-built, highly customizable UI components to handle authenticating your users. The way you use them is very flexible since you can use the pre-built modal or even embed the Auth card directly in your application.

Modal auth

Assuming your application has been set up, using UI components is the easiest way to authenticate users. All you have to do is leverage the useAuthModal hook and provide users a CTA to open the modal.

import React from "react";
import { useAuthModal } from "@account-kit/react";
 
export default function MyPage() {
  const { openAuthModal } = useAuthModal();
 
  return <button onClick={openAuthModal}>Authenticate</button>;
}

That's it! When the user clicks that button, the modal will open and they can complete authentication. Once they are authenticated, you can use the useAccount hook to get the logged in user's SCA address

Embedded auth

The body of the Auth Modal is also exported for you to use directly in your application. This is useful if you don't want a modal flow for login and want a standalone page using the card.

import React from "react";
import { AuthCard } from "@account-kit/react";
 
export default function MyLoginPage() {
  return (
    <div className="flex flex-row p-4 bg-white border border-gray-200 rounded-lg">
      <AuthCard />
    </div>
  );
}

That's it! The user can now input their credentials and complete login. Once they are authenticated, you can use the useAccount hook to get the logged in user's SCA address

Using our React hooks

If you don't want to use our pre-built UI components, you can also use the useAuthenticate hook to build your own custom UI.

Email authentication

import React from "react";
import {
  type UseAuthenticateResult,
  useAuthenticate,
} from "@account-kit/react";
 
// This examples uses email authentication
// you can also use passkeys if the user has one created
export default function MyLoginPage() {
  const { authenticate, isPending } = useAuthenticate();
  const [email, setEmail] = React.useState("");
 
  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={() => authenticate({ type: "email", email })}>
        Login
      </button>
    </div>
  );
}

Social Login

You can allow uers to sign in with an OAuth provider like Google, Facebook, or Auth0. There are two login flows that are possible: redirect and popup. The redirect flow redirects the user to the auth provider's login page, then back to a specified page in your application when done. The popup flow opens the auth provider's login page in a popup window without leaving your application, then updates your application when done. If using popup, you need to set the enablePopupOauth field to true in the config.

import React from "react";
import {
  type UseAuthenticateResult,
  useAuthenticate,
} from "@account-kit/react";
 
// This examples uses social login, specifically Google Sign-In
export default function MyLoginPage() {
  const { authenticate, isPending } = useAuthenticate();
 
  return (
    <div>
      <button
        onClick={() =>
          authenticate({
            // redirect login flow
            type: "oauth",
            authProviderId: "google",
            mode: "redirect",
            redirectUrl: "/", // After logging in, redirect to the index page
          })
        }
      >
        Login (Redirect)
      </button>
      <button
        onClick={() =>
          authenticate({
            // popup login flow
            type: "oauth",
            authProviderId: "google",
            mode: "popup", // remember to set "enablePopupOauth" to "true" in config.ts to enable
          })
        }
      >
        Login (Popup)
      </button>
    </div>
  );
}

Passkey auth with email backup

This approach will allow you to login or signup users using a passkey as the primary auth mechanism and register an email as a backup.

import React from "react";
import {
  type UseAuthenticateResult,
  useAuthenticate,
} from "@account-kit/react";
 
export default function MyLoginPage() {
  const { authenticate, isPending } = useAuthenticate();
  const [email, setEmail] = React.useState("");
 
  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={() => authenticate({ type: "passkey", email })}>
        Login
      </button>
    </div>
  );
}

Existing Passkey

If your user already has a passkey, then you can authenticate with that directly. This is useful if you want to use email as a signup mechanism, but provide easier login methods for your users via passkeys.

import React from "react";
import {
  type UseAuthenticateResult,
  useAuthenticate,
} from "@account-kit/react";
 
export default function MyLoginPage() {
  const { authenticate } = useAuthenticate();
 
  return (
    <div>
      <button
        onClick={() => authenticate({ type: "passkey", createNew: false })}
      >
        Login
      </button>
    </div>
  );
}