Next.js Auth Without a Backend

Authentication is a key part of almost every web application. Whether it’s logging into a dashboard, accessing personalized content, or protecting certain pages, authentication ensures your app knows who your users are.

But what if you want to implement authentication without setting up a separate backend server? In this article, we’ll explore how to add authentication to a Next.js app using API routes, JWT, and libraries like next-auth or Clerk.

---

Why Authentication Matters

Authentication verifies the identity of users, while authorization determines what they can access. Common use-cases include:

• Dashboards with user-specific data

• Subscription-based content

• Profile management

For beginners, setting up a backend just for authentication can feel overwhelming. Thankfully, Next.js API routes can act as lightweight endpoints for handling auth logic.

---

Authentication Without a Backend

Next.js allows us to create API routes, which are serverless functions that run on Vercel or your server. Combined with JWT (JSON Web Tokens), we can implement secure authentication without a dedicated backend.

Advantages:

• Fast setup

• No additional server required

• Scalable and secure

---

Using JWT with Next.js

JWT allows us to generate a secure token after login. The token can be stored in cookies or localStorage and used to protect routes.

Example: Generating a JWT Token

// pages/api/login.js
import jwt from 'jsonwebtoken';

export default function handler(req, res) {
  const { username, password } = req.body;

  // Dummy login check
  if (username === 'user' && password === 'pass') {
    const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.status(200).json({ token });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
}

Validating JWT in API routes or protected pages ensures that only authorized users can access certain content.

---

Using next-auth or Clerk

Instead of building auth from scratch, you can use libraries:

next-auth

• Supports OAuth providers like Google, GitHub, and Email

• Handles sessions and token management

Example setup:

npm install next-auth

Clerk

• Pre-built authentication UI and dashboard

• Beginner-friendly and easy to integrate

Pros & Cons:

---

Protecting Routes

To protect a page in Next.js:

Server-side protection using getServerSideProps:

// pages/dashboard.js
export async function getServerSideProps({ req }) {
  const token = req.cookies.token;

  if (!token) {
    return { redirect: { destination: '/login', permanent: false } };
  }

  return { props: {} };
}

Client-side protection:
Check for token existence in a React useEffect and redirect if missing.

---

Conclusion

Adding authentication to a Next.js app without a backend is entirely possible. Whether using JWT, next-auth, or Clerk, you can secure your pages, protect routes, and provide a personalized experience for users—all without a separate backend.

Try it out today: add Google login or JWT-protected routes to your Next.js app and see the difference!