Quickstart ⚡
Sign up your first user in 5 minutes
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.
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
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)
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
Change into the directory created in previous steps
cd my-first-auth-app
Install the Crossmint React SDK
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.
NEXT_PUBLIC_CROSSMINT_API_KEY="_YOUR_API_KEY_"
Prepare auth page
Open app/page.tsx
, delete the contents, and leave a minimal page, for next steps.
"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
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:
"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
embeddedWallets={{ // Ignore this for now, we'll come back to it in the Smart Wallets quickstart
type: "evm-smart-wallet",
defaultChain: "base-sepolia",
createOnLogin: "off"
}}
>
{children}
</CrossmintAuthProvider>
</CrossmintProvider>
);
}
Now, open app/layout.tsx
and update it to use the new Providers component:
// 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.
Add login and logout functionality
Now, add the following import to the top of your page.tsx
file, below the "use client";
directive:
"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.
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.
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
- Read and update user information
- Use webhooks to get notified when a user signs up
- Create Smart Wallets on sign up