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) => {
            // here you should call your backend, using generatePayload to return
            // a SIWE compliant login payload to the client
            return thirdwebAuth.generatePayload(params);
          },
          doLogin: async (params) => {
            // here you should call your backend to verify the signed payload passed in params
            // this will verify that the signature matches the intended wallet
            const verifiedPayload =
              await thirdwebAuth.verifyPayload(params);
            setLoggedIn(verifiedPayload.valid);
          },
          isLoggedIn: async () => {
            // here you should ask you backend if the user is logged in
            // can use cookies, storage, or your method of choice
            return loggedIn;
          },
          doLogout: async () => {
            // here you should call your backend to logout the user if needed
            // and delete any local auth tokens
            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.