Most developers are familiar with the popular NextAuth.js plugin for handling authentication in Next.js applications. It's a powerful and easy-to-use tool that simplifies the process of adding authentication to your project. However, some developers prefer to avoid using third-party plugins and instead implement authentication themselves using custom code.
In this context, it's worth mentioning that Next.js provides various tools and features for handling authentication without relying on external plugins. One of these tools is middleware, which is a function that runs before your page component is rendered and can be used to implement authentication logic.
Recently, I wrote a blog about implementing authentication in Nuxt 3 using middleware, and I wanted to see if it was possible to achieve the same results in Next.js. In this blog, I will be converting my Nuxt 3 project into a Next.js project and exploring how to use middleware to handle authentication. By the end of this blog, you will have a clear understanding of how to implement authentication in Next.js without relying on third-party plugins.
lets start by creating a blank nextjs project
npx create-next-app@latest
select your options I just used typescript as default
install zustand
npm i zustand
I choose zustand as my state management library because it looks easy and straight forward.
exactly like the tutorial in my Nuxt 3 post, I will be using DummyJSON
store
path: store/useAuthStore.ts
// Importing create function from the Zustand library
import { create } from 'zustand'
// Defining an interface for the store's state
interface AuthStoreInterface {
authenticated: boolean // a boolean value indicating whether the user is authenticated or not
setAuthentication: (val: boolean) => void // a function to set the authentication status
user: any // an object that stores user information
setUser: (user: any) => void // a function to set user information
}
// create our store
export const useAuthStore = create<AuthStoreInterface>((set) => ({
authenticated: false, // initial value of authenticated property
user: {}, // initial value of user property
setAuthentication: (val) => set((state) => ({ authenticated: val })), // function to set the authentication status
setUser: (user) => set({ user }), // function to set user information
}))
Overall, this code creates a store for authentication-related state in a React application using Zustand. It provides methods to set and update the authentication and user information stored in the state.
Layout
I also wanted to play around with the new layouts feature in next so I created a layout folder
path: layouts/DefaultLayouts/index.tsx
// Importing necessary components and functions
import Navbar from '~/components/Navbar' // a component for the website navigation bar
import Footer from '~/components/Footer' // a component for the website footer
import { useEffect } from 'react' // importing useEffect hook from react
import { getCookie } from 'cookies-next' // a function to get the value of a cookie
import { useAuthStore } from '~/store/useAuthStore' // a hook to access the authentication store
// Defining the layout component
export default function Layout({ children }: any) {
// Getting the token value from a cookie
const token = getCookie('token')
// Getting the setAuthentication function from the authentication store
const setAuthentication = useAuthStore((state) => state.setAuthentication)
// Running a side effect whenever the token value changes
useEffect(() => {
console.log(token) // Logging the token value for debugging purposes
if (token) {
setAuthentication(true) // Setting the authentication status to true if a token exists
}
}, [token])
// Rendering the layout with the Navbar, main content, and Footer components
return (
<>
<Navbar />
<main className="mainContent">{children}</main>
<Footer />
</>
)
}
Pretty straight forward we have our Navbar and Footer component and we wrap the main container between both, we are also calling the store to check if token is there and setting the authentication state
Now just need to use our layout in the _app.tsx file
import '../styles/globals.scss'
import Layout from '~/layouts/DefaultLayout'
import { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
middleware
the code below defines a middleware function to handle user authentication in Next.js. The function checks whether a user has a token (stored in a cookie) to access protected routes. If the user does not have a token and the requested path is not allowed, the middleware will redirect them to the signin page. If the user is already authenticated and tries to access a path that is allowed, the middleware will redirect them to the home page. This function also ignores any routes that start with /api and /_next to avoid running the middleware multiple times.
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
const { pathname } = request.nextUrl
/* ignore routes starting with api and _next (temp solution)
matchers in next.config isn't working
without this the middleware will run more than once
so to avoid this we will ignore all paths with /api and /_next
*/
if (
request.nextUrl.pathname.startsWith('/api/') ||
request.nextUrl.pathname.startsWith('/_next/')
) {
return NextResponse.next()
}
// our logic starts from here
let token = request.cookies.get('token')?.value // retrieve the token
const allowedRoutes = ['/auth/signin', '/auth/register'] // list of allowed paths user can visit without the token
const isRouteAllowed = allowedRoutes.some((prefix) => pathname.startsWith(prefix)) // check path and see if matches our list then return a boolean
// redirect to login if no token
if (!token) {
if (isRouteAllowed) {
// check if path is allowed
return NextResponse.next()
}
// if path is not allowed redirect to signin page
return NextResponse.redirect(new URL('/auth/signin', request.url))
}
//redirect to home page if logged in
if (isRouteAllowed && token) {
return NextResponse.redirect(new URL('/', request.url))
}
}
Pages
The index page
import Head from 'next/head'
export default function Home() {
return (
<div>
<h1>Homepage</h1>
</div>
)
}
The SignIn page
import { NextPage } from 'next'
import { useState } from 'react'
import { setCookie } from 'cookies-next'
import { useRouter } from 'next/router'
import { useAuthStore } from '~/store/useAuthStore' // import our useAuthStore
const SignIn: NextPage = (props) => {
// set UserInfo state with inital values
const [userInfo] = useState({ email: 'kminchelle', password: '0lelplR' })
const router = useRouter()
// import state from AuthStore
const setUser = useAuthStore((state) => state.setUser)
const setAuthentication = useAuthStore((state) => state.setAuthentication)
const login = async () => {
// do a post call to the auth endpoint
const res = await fetch('https://dummyjson.com/auth/login', {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: userInfo.email,
password: userInfo.password,
}),
})
// check if response was ok
if (!res.ok) {
return console.error(res)
}
// retrieve data from the response
const data = await res.json()
// check if we have data
if (data) {
setUser(data) // set data to our user state
setAuthentication(true) // set our authentication state to true
setCookie('token', data?.token) // set token to the cookie
router.push('/') // redirect to home page
}
}
return (
<div>
<div className="title">
<h2>Login</h2>
</div>
<div className="container form">
<label>
<b>Username</b>
</label>
<input
type="text"
className="input"
placeholder="Enter Username"
name="uname"
value={userInfo.email}
onChange={(event) => (userInfo.email = event.target.value)}
required
/>
<label>
<b>Password</b>
</label>
<input
type="password"
className="input"
placeholder="Enter Password"
value={userInfo.password}
onChange={(event) => (userInfo.password = event.target.value)}
name="psw"
required
/>
<button onClick={login} className="button">
Login
</button>
</div>
</div>
)
}
export default SignIn
The code provided is sufficient to implement authentication in Next.js without using the NextAuth plugin. However, it should be noted that this code only supports email and password authentication, and not Single Sign-On (SSO) options like Google or GitHub. During a project that involved converting a Nuxt 3 project to a Next.js project, I found Zustand to be a useful tool. In comparison to Redux and Context, Zustand is lightweight and more preferable.
The middleware function in Next.js is a valuable addition. However, I did encounter some issues with the matchers while using it, but was able to find workarounds to solve the problems.
Full project layout
components/
- Footer
- Navbar
layouts/
- DefaultLayout
pages/
- auth/
- login.tsx <-- login page
- register.tsx <-- /register page
- index.tsx <- homepage
- _app.tsx <- nextjs app file
store/
- useAuthStore.ts <- zustand store
styles/
- globals.scss <- global styleguide
middleware.ts <- middleware file in root of project
Preview: https://next-auth-example-mu-two.vercel.app/
Repo: https://github.com/rafaelmagalhaes/next-auth-example
Top comments (0)