In this quickstart you’ll learn how to sign up your first user using Crossmint Auth, a fully managed authentication service provided by Crossmint.

Integration Steps

1. Create and Configure a Crossmint Project

To get started, create a developer account in the Crossmint Staging Console. Open that link, sign in, and accept the dialog to continue.

Crossmint offers two consoles: staging, for development and testing, and www, for production.

2. Get an API Key

Navigate to the "Integrate" section on the left navigation bar, and ensure you're on the "API Keys" tab.

Within the Client-side keys section, click the "Create new key" button in the top right.

On the authorized origins section, enter http://localhost:3000 and click "Add origin".

Next, check the scopes labeled users.create.

Check the "JWT Auth" box

Finally, create your key and save it for subsequent steps.

3. Project Set Up

1

Create a new Next.js application

Use the create-next-app package to get started:

npx create-next-app@latest

If you see this message enter y and Enter to proceed:

Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y)
2

Name your app `my-first-auth-app` and accept the default options

What is your project named? my-first-auth-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias? No
3

Change into the directory created in previous steps

cd my-first-auth-app
4

Install the Crossmint React SDK

5

Add a new file named `.env.local` to root directory of your project

Set your environment variables by adding your client-side API secret from Step 1.

These values are safe to use in the client side of your application and are not considered sensitive.
.env.local
NEXT_PUBLIC_CROSSMINT_API_KEY="_YOUR_API_KEY_"
6

Prepare auth page

Open app/page.tsx, delete the contents, and leave a minimal page, for next steps.

page.tsx
"use client"; // Important: this ensures the auth SDK only runs on the client

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4">
        // TO-DO: we will add auth UI here
    </main>
  );
}

4. Set up Crossmint Auth

1

Configure Crossmint Auth in Layout

To configure auth, we need to create a new file for our Crossmint providers and then import it into our root layout.

Create a new file app/providers/Providers.tsx and add the following code:

app/providers/Providers.tsx
"use client";

import { CrossmintProvider, CrossmintAuthProvider } from "@crossmint/client-sdk-react-ui";

export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <CrossmintProvider apiKey={process.env.NEXT_PUBLIC_CROSSMINT_API_KEY ?? ""}>
      <CrossmintAuthProvider 
        loginMethods={["email", "google", "farcaster"]} // Only show email, Google, and Farcaster login methods
      >
        {children}
      </CrossmintAuthProvider>
    </CrossmintProvider>
  );
}

Now, open app/layout.tsx and update it to use the new Providers component:

layout.tsx
// Add this import near the top
import Providers from "./providers/Providers";

// ...

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={/** ... **/}>
        {/* And add this component inside the body, surrounding the children: */}
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

This setup encapsulates the Crossmint providers in a separate file, making your code more modular. The Providers component wraps your application with both CrossmintProvider and CrossmintAuthProvider, configuring the Crossmint SDK and auth.

2

Add login and logout functionality

Now, add the following import to the top of your page.tsx file, below the "use client"; directive:

page.tsx
"use client";

// Add this
import { useAuth } from "@crossmint/client-sdk-react-ui";

Next, declare a component that handles the login and logout functionality. This component uses the useAuth hook to manage authentication state and provides buttons for logging in and out.

page.tsx
function AuthButton() {
  const { login, logout, user, jwt } = useAuth();

  return (
    <div className="flex gap-4">
      {user == null ? (
        <button 
          type="button" 
          onClick={login} 
          className="bg-blue-500 text-white font-bold py-2 px-4 rounded"
        >
          Login
        </button>
      ) : (
        <button 
          type="button" 
          onClick={logout} 
          className="bg-black text-white font-bold py-2 px-4 rounded border-2 border-blue-500"
        >
          Logout
        </button>
      )}
      <p>User: {user?.userId}</p>
      <p>Email: {user?.email ?? "Not email"}</p>
      <p>Phone Number: {user?.phoneNumber ?? "Not phone number"}</p>
      <p>Farcaster username: {user?.farcaster?.username ?? "None"}</p>
      <p>Google display name: {user?.google?.displayName ?? "None"}</p>
      <p>JWT: {jwt}</p>
    </div>
  );
}

Finally, add the AuthButton component inside your Home component.

page.tsx
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4">
        {/** Added here */}
        <AuthButton />
    </main>
  );
}

Next steps