Docs

Overview

Auth allows anyone to integrate passwordless web3-native authentication and authorization into their applications. Users can then login using any thirdweb wallet (in-app, browser, or smart wallet).

This allows developers to create a familiar, secure authentication flow that works with traditional backends while leveraging the features of a web3 application.

Get Started

npm i thirdweb

Get Your Client ID

To use Auth in your app, you'll need a client ID. You can get one for free on your thirdweb dashboard.

Setting Up Auth

import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
import { createThirdwebClient } from "thirdweb";
import { createAuth } from "thirdweb/auth";
 
const client = createThirdwebClient({
  clientId: "1234567890", // get yours at https://thirdweb.com/dashboard/settings/api-keys
});
 
const thirdwebAuth = createAuth({
  domain: "localhost:3000",
  client,
  adminAccount: privateKeyToAccount({ client, privateKey }),
});
 
export default function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  return (
    // The ThirdwebProvider should be at the root of your application, but the ConnectButton can be anywhere
    <ThirdwebProvider>
      <ConnectButton
        client={client}
        auth={{
          getLoginPayload: async (params) => {
            return await thirdwebAuth.generatePayload({
              address,
              chainId: chainId ? parseInt(chainId) : undefined,
            });
          },
          doLogin: async (params) => {
            const verifiedPayload =
              await thirdwebAuth.verifyLoginPayload(params);
            setLoggedIn(verifiedPayload.valid);
          },
          isLoggedIn: async () => {
            return loggedIn;
          },
          doLogout: async () => {
            setLoggedIn(false);
          },
        }}
      />
    </ThirdwebProvider>
  );
}

Auth with Smart Accounts (Account Abstraction)

When using Auth with a smart account, you must specify a client (on createAuth) and a chain ID (on generatePayload). The smart account is deployed on a specific chain and the payload must reflect that, and the client is needed to call the wallet contract to verify the signature.

Templates

Quickly get started with one of our templates:

Auth + Next.js

A working example of Auth + Next.js

View on GitHub
Auth + Express

A working example of a React + Express app using Auth

View on GitHub

Frameworks

Auth integrates with a variety of server-side and client-side development frameworks. We're always adding support for more frameworks, so if you don't see yours, let us know.

Next.js

Integrate Auth in Next.js applications.

React + Express

Integrate Auth in React applications using Vite and Express.