Authenticate users

Most methods on the Smart Account Client and Smart Contract Account require some user context. This context (eg. the SignerAddress) is only available once you've authenticated the user. This guide will walk you through how to authenticate users using the @account-kit/core package.

Create your config

Before you can authenticate a user, you'll need to create a static config object. This is outlined in the Core Quickstart.

Email authentication

Email authentication is a two step process. First, a user inputs their email and initiates the login flow. The user is sent an email which contains a link that redirects them back to your site with an auth credential called a bundle. You then complete the authentication with the bundle.

example.ts

import { config } from "./config";
import { getSigner } from "@account-kit/core";
 
const signer = getSigner(config);
 
if (!signer) {
  // this can happen if your rendering this on the server
  // the signer instance is only available on the client
  throw new Error("Signer not found");
}
 
// authenticate the user with email
await signer.authenticate({
  type: "email",
  email: "user@email.com",
});
 
// once the user has clicked on the email and been redirected back to your site
const bundle = new URLSearchParams(window.location.search).get("bundle");
if (!bundle) {
  throw new Error("No bundle found in URL");
}
 
await signer.authenticate({ type: "email", bundle });

Social Login

You can allow users 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.

example.ts

import { config } from "./config";
import { getSigner } from "@account-kit/core";
 
const signer = getSigner(config);
 
if (!signer) {
  // this can happen if your rendering this on the server
  // the signer instance is only available on the client
  throw new Error("Signer not found");
}
 
// authenticate the user with a social login provider
await signer.authenticate({
  // redirect login flow
  type: "oauth",
  authProviderId: "google",
  mode: "redirect",
  redirectUrl: "/", // After logging in, redirect to the index page
});
 
await signer.authenticate({
  // popup login flow
  type: "oauth",
  authProviderId: "google",
  mode: "popup", // remember to set "enablePopupOauth" to "true" in config.ts to enable
});

Passkey auth with email backup

This approach will allow you to log in or sign up users using a passkey as the primary auth mechanism and register an email as a backup.

example.ts

import { config } from "./config.js";
import { getSigner } from "@account-kit/core";
 
const signer = getSigner(config);
 
if (!signer) {
  // this can happen if your rendering this on the server
  // the signer instance is only available on the client
  throw new Error("Signer not found");
}
 
await signer.authenticate({
  type: "passkey",
  email: "name@mail.com",
});

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.

example.ts

import { config } from "./config";
import { getSigner } from "@account-kit/core";
 
const signer = getSigner(config);
 
if (!signer) {
  // this can happen if your rendering this on the server
  // the signer instance is only available on the client
  throw new Error("Signer not found");
}
 
await signer.authenticate({
  type: "passkey",
  createNew: false,
});