How to use cookies for auth in Next.js

Hello everyone! today I will teach you how to use cookies for authentication in Next.js 14!

Photo by Brigitte Tohm: https://www.pexels.com/photo/cup-of-coffee-and-cookies-on-table-189537/

We will create a simple Sign Up form with 3 inputs (username, email and password). And through a server action, we will identify a user with a cookie.

If you want the full example, you can check my GitHub Repo

First, create a Next.js project:

$ npx create-next-app cookies-auth

# Creating necessary files and folders
$ cd cookies-auth
$ mkdir actions app/dashboard
$ touch actions/createAccount.ts app/dashboard/page.tsx

The file structure should look like this:

.
├── README.md
├── app
│   ├── actions
│   │   └── createAccount.ts
│   ├── dashboard
│   │   └── page.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── public
│   ├── next.svg
│   └── vercel.svg
└── tsconfig.json

app/page.tsx

'use client';

import { createAccount } from '@/actions/createAccount';

export default function Home() {
  return (
    <form action={createAccount}>
      <h1>Sign Up</h1>

      <label>
        Username
        <input
          type='text'
          name='username'
          placeholder='Type here your username'
          autoComplete='off'
          required
        />
      </label>

      <label>
        Email
        <input
          type='email'
          name='email'
          placeholder='Type here your email'
          autoComplete='off'
          required
        />
      </label>

      <label>
        Password
        <input
          type='password'
          name='password'
          placeholder='Type here your password'
          autoComplete='off'
          required
        />
      </label>

      <input type='submit' value='Submit' />
    </form>
  );
}

actions/createAccount.ts

'use server';

import { randomUUID } from 'crypto';
import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';

export const createAccount = (formData: FormData) => {
  const username = formData.get('username');
  const email = formData.get('email');
  const password = formData.get('password');

  if (!username || !email || !password) {
    return {
      message: 'Please fill all fields',
      success: false,
    };
  }

  cookies().set('token', randomUUID());

  redirect('/dashboard');
};

We are creating a server action that check if username, email, and password fields and if it’s not false, it set a token and redirect to /dashboard page

app/dashboard/page.tsx

import { cookies } from 'next/headers';
import Link from 'next/link';

const getToken = () => {
  const token = cookies().get('token');

  return token;
};

const Dashboard = () => {
  const token = getToken();

  if (token) {
    return <h1>Welcome to Dashboard</h1>;
  }
  return (
    <>
      <h1>You need to create an account first!</h1>
      <Link href='/'>Create your account</Link>
    </>
  );
};

export default Dashboard;

/globals.css

#green {
  color: green;
}

#failure {
  color: red;
}

input {
  display: flex;
  padding: 6px;
  outline: none;
  margin: 5px 0;
}

Result

If we open http://localhost:3000/dashboard, It will give you an auth error, and we need to authenticate first creating an account.

Then we create an account via the form and we got access to dashboard, because it adds a token to confirm that you are authenticated.

Video demonstration:

Conclusion

If you liked this article, you can give me a clap and follow my profile. I publish a new article every week, so if you want to see more interesting articles like this, you can consider follow me ❤