StackAuth is a powerful, open source alternative to Auth0, designed to offer seamless authentication solutions without the need for costly service subscriptions. With support for multiple authentication methods, including traditional email/password logins and third-party OAuth providers like Google, StackAuth enables Next.js developers to maintain control over their authentication systems while leveraging modern security standards.
This guide covers how to configure StackAuth in a Next.js application with three authentication sources: email/password, GitHub, and Google. We’ll also explore the benefits, use cases, and key differences between StackAuth and Auth0.
To follow along, you should have at least a foundational understanding of Next.js.
Auth0 is a popular, cloud-based authentication platform that simplifies application authentication and authorization. It offers features like Single Sign-On (SSO), Multi-Factor Authentication (MFA), and social logins (e.g., Google, Facebook).
While Auth0 is widely used, it comes with several pain points that can make it less appealing for certain use cases, including its high costs, limited customization, data ownership concerns, vendor lock-in, complexity for advanced use cases, and more.
StackAuth addresses these pain points by offering a powerful, open source, and self-hosted authentication solution. Reasons to consider StackAuth as an alternative to Auth0:
| Feature | StackAuth | Auth0 |
|---|---|---|
| Cost | Free, open source | Subscription required |
| Customization | Full control over authentication | Limited to service APIs |
| Hosting | Self-hosted | Cloud-based |
| Data Ownership | Complete control | Managed by Auth0 |
| Supported Frameworks | Next.js (app router) | Multiple frameworks |
StackAuth is ideal for:
To get started, create a Next.js app and make sure your project uses the App Router, as StackAuth doesn’t support the Page Router:
npx create-next-app@latest stack-next-app --typescript cd stack-auth-app
Now, install and configure StackAuth using the setup wizard:
npx @stackframe/init-stack@latest
The wizard detects your project structure and sets up StackAuth automatically. After the setup is completed, you will be redirected to the browser to create a handler account if you don’t already have one.
After that, you will be redirected to a page to select the authentication options you want to use on your application. Give your project a name, and select Email password, Google, and GitHub by toggling them on. Then, click the Create project button:
You will now be provided with API keys that will enable you to authenticate your application. Keep these secure:
Copy the environment variables into a .env.local file:
NEXT_PUBLIC_STACK_PROJECT_ID=<your-project-id> NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=<your-publishable-client-key> STACK_SECRET_SERVER_KEY=<your-secret-server-key>
In the src/app/page.tsx file, paste in the following code:
"use client";
import { UserButton, useUser } from "@stackframe/stack";
export default function Home() {
const user = useUser();
const loggedIn = user !== null;
return (
<div className="flex flex-col gap-4 m-4">
<p>
Welcome to the Stack Auth demo!
</p>
<p>
Are you logged in? {loggedIn ? "Yes" : "No"}
</p>
<div>
<UserButton />
</div>
</div>
);
}
This code uses the useUser Hook to retrieve the current user object and checks if the user is logged in by verifying that the user is not null. It dynamically displays whether the user is logged in and includes the UserButton component, which serves as an interactive avatar with options to manage account settings or sign out. This setup provides basic authentication feedback and user management capabilities that can be used on an application.
Stack is now successfully configured in your Next.js project! Start your Next.js app by running npm run dev.
Now navigate to http://localhost:3000/handler/signup on your browser to access the Stack sign-up page:
Now you can access your Stack dashboard, and you will be able to access the newly created accounts:
Now that authentication is set up, this section will walk through setting up StackAuth authentication and building a simple note-taking app where users can create and view notes after signing in.
In the app/page.tsx file, we will create a page that will:
"use client";
import { useUser } from "@stackframe/stack";
import { useState } from "react";
export default function Home() {
const user = useUser();
const [notes, setNotes] = useState<string[]>([]);
const [note, setNote] = useState("");
if (!user) {
return (
<div className="flex flex-col items-center justify-center min-h-screen">
<h1 className="text-xl">Please Sign In</h1>
<a href="/signin" className="text-blue-500 underline">
Go to Sign In
</a>
</div>
);
}
return (
<div className="max-w-xl mx-auto mt-10">
<h1 className="text-2xl">Welcome, {user.email}!</h1>
<div className="mt-4">
<input
type="text"
value={note}
onChange={(e) => setNote(e.target.value)}
className="border p-2 w-full"
placeholder="Write a note..."
/>
<button
onClick={() => {
if (note.trim()) {
setNotes([...notes, note]);
setNote("");
}
}}
className="bg-blue-500 text-white px-4 py-2 mt-2 rounded"
>
Add Note
</button>
</div>
<ul className="mt-4">
{notes.map((n, index) => (
<li key={index} className="border p-2 mt-2">
{n}
</li>
))}
</ul>
</div>
);
}
This code is a Next.js client-side component that creates the note-taking app.
The app first checks if a user is logged in by using the useUser Hook from @stackframe/stack. If no user is logged in, it displays a message asking the user to sign in and shows the UserButton component, which allows the user to log in or sign up. This ensures that only authenticated users can access the note-taking features.
If a user is logged in, the app welcomes them by displaying their name (user.displayName). It provides an input field where users can type notes, and the current input value is stored in the note state variable using the useState Hook. When the user clicks the Add Note button, the note is added to the notes array (also stored in state) if it’s not empty. The input field is then cleared, allowing the user to add more notes.
Now, when you run your application and navigate to the home page, you will see that authentication is required before accessing the note-taking features:
After logging in, you will be able to create notes using the form:
In app/handler/[...stack]/page.tsx, StackAuth automatically provides pre-built pages for sign-up, sign-in, and account management, but you can customize your sign-in page and create a custom app/signin/page.tsx file.
Here’s an example of a custom profile page that displays user information and allows users to sign out:
Learn more →'use client';
import { useStackApp } from "@stackframe/stack";
export default function CustomOAuthSignIn() {
const app = useStackApp();
return (
<div>
<h1>My Custom Sign In page1</h1>
<button onClick={async () => {
// this will redirect to the OAuth provider's login page
await app.signInWithOAuth('google');
}}>
Sign In with Google
</button>
</div>
);
}
The same can be done for the sign-up page.
Now you can tell the Stack app in stack.tsx to use the sign-in page you just created:
export const stackServerApp = new StackServerApp({
// ...
// add these three lines
urls: {
signIn: '/signin',
}
});
Before deploying your application, it’s need to configure StackAuth for production to ensure security and optimal performance.
In production, you must specify your domain to prevent unauthorized callback URLs. Navigate to the Domain & Handlers tab in the Stack dashboard and add your domain (e.g., https://your-website.com). Disable the Allow all localhost callbacks for development option to enhance security.
Replace the shared OAuth keys used in development with your own OAuth credentials. For each provider (e.g., Google, GitHub), create an OAuth app and configure the callback URL. Then, enter the client ID and client secret in the Stack dashboard under Auth Methods.
For production, set up your own email server to send emails from your domain. In the Stack dashboard, navigate to the Emails section, switch from the shared email server to a custom SMTP server, and enter your SMTP configurations.
Once all configurations are complete, enable production mode in the Project Settings tab of the Stack dashboard. This ensures your application runs securely with StackAuth in a production environment.
With its open source nature, StackAuth offers full control over user data, great customization options, and the ability to self-host for enhanced privacy and security.
By following the steps outlined in this tutorial, you can set up authentication, configure environment variables, and leverage StackAuth’s pre-built and customizable components.
For production use, consider additional measures like rate limiting and token management to further enhance security. For more advanced use cases and detailed documentation, refer to the StackAuth SDK documentation.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
This isn’t theory. It’s the exact setup you need to deliver fast, resilient apps across AWS regions with zero fluff.
Looking for a FaunaDB alternative to migrate to? Examine nine other platforms you can use and factors to consider when choosing an alternative.
From onboarding to bug tracking, these knowledge-sharing techniques keep your team aligned, reduce overhead, and build long-term technical clarity.
Learn how to build a real-time collaborative document editing app with a Node.js backend and React frontend using the WebSocket protocol.
