CODEWITHSUNDEEP
authenticationnext.js
chrisroode
chrisroode

Reputation: 145

using iron-session with NextJS and the new app router

Pardon my ignorance...I don't have a 100% grasp of session cookies, and authentication, which is why I am building something...to understand, then to do better...

Anyway, I am trying to get session cookies going on my nextJS app, and I am porting in the sample code from iron session...however, the examples of iron session use the pages router, which I am not using in my application.

For example, here's the login route from iron sessions examples:

import { Octokit } from "octokit";
import { withIronSessionApiRoute } from "iron-session/next";
import { sessionOptions } from "lib/session";
const octokit = new Octokit();

export default withIronSessionApiRoute(async (req, res) => {
  const { username } = await req.body;

  try {
    const {
      data: { login, avatar_url },
    } = await octokit.rest.users.getByUsername({ username });

    const user = { isLoggedIn: true, login, avatarUrl: avatar_url };
    req.session.user = user;
    await req.session.save();
    res.json(user);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
}, sessionOptions);

You can see the full code I'm referencing at: https://github.com/vvo/iron-session follow /examples/next.js/

Right now, the problem I'm facing is that the app router in nextJS wants a POST() or GET() function for it to work properly, and I dont' have a complete grasp of how withIronSessionApiRoute() is wrapping itself around the routing.

I've looked extensively at the nextJS documentation around this, but haven't found much in migrating pages router to app router. Any suggestions or thoughts?

I hope this question comes across cleary, if not, feel free to ask clarifying questions.

As always, thanks! Chris Roode

Upvotes: 3

Views: 6073

Answers (2)

chrisroode
chrisroode

Reputation: 145

It's been a while, and it's time to update this question. It's no longer an issue because iron-session now supports next.js's app router. It is well documented too!

https://www.npmjs.com/package/iron-session#usage

Upvotes: 0

Charanjit Singh
Charanjit Singh

Reputation: 1067

I recently migrated an application to the app router, the withIronSessionSsr method is just a wrapper for easier use, to achieve the same functionality you can just leverage the low level seal/unseal methods. Something like this (in a server component):

import { unsealData } from 'iron-session/edge';
import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = cookies();

  const encryptedSession = cookieStore.get('name-of-your-cookie')?.value;

  const session = encryptedSession
    ? await unsealData(encryptedSession, {
        password: 'your-password',
      })
    : null;

  return <div>{session ? session.some_value : 'not authenticated'}</div>;
}

Creating the session can be tricky since you need to set the encrypted session with a cookie header either in a route handler or a middleware.

import { sealData } from 'iron-session/edge';

// endpoint to log in a user
export async function POST() {
  const session = JSON.stringify({
    userId: 1,
    name: 'john doe',
  });

  const encryptedSession = sealData(session, {
    password: 'your-password',
  });

  return new Response('ok', {
    status: 200,
    headers: { 'Set-Cookie': `name-of-your-cookie=${encryptedSession}` },
  });
}

Credits: https://github.com/vvo/iron-session/issues/594#issuecomment-1638964195

Upvotes: 2

Related Questions