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

IntroductionLogin Methods