DEV Community: Mariusz

How to add next-auth to already implemented iron-session based authentication?

Mariusz — Thu, 05 Oct 2023 19:16:19 +0000

Let's assume that our current solution uses iron-session JWT tokens like follows:

MyApp.getInitialProps = async function (appContext: AppContext) {
  const { req, res } = appContext.ctx;
  const DEFAULT_PROPS = {
    pageProps: {},
  };

  try {
    const session = await getIronSession(req!, res!, sessionOptions);
    if (session.user) {
      return {
        ...DEFAULT_PROPS,
        pageProps: {
          user: session.user,
        },
      };
    }

    return DEFAULT_PROPS;
  }
  catch {
    return DEFAULT_PROPS;
  }
}

The main objective is to be backward compatible. We want to preserve current sessions and easily allow OAuth even for users didn't used any provider during registration.

Important part of following solutions:

expose Request / Response object to NextAuth
using decorator withIronSessionApiRoute we can decypher current JWT data or create the new token
we need to use the same JWT config object too (obviously) - sessionOptions

Final solution, [...nextauth].ts:

import { withIronSessionApiRoute } from "iron-session/next";
import { NextApiRequest, NextApiResponse } from "next";
import NextAuth, { AuthOptions } from "next-auth";

export default withIronSessionApiRoute((req: NextApiRequest, res: NextApiResponse) => {

  return NextAuth(req, res, {
    providers: [
      GoogleProvider({
        clientId: ENV_MAP.OAUTH_GOOGLE_CLIENT_ID,
        clientSecret: ENV_MAP.OAUTH_GOOGLE_SECRET,
      })
    ],
    ...
    callbacks: {
      async signIn({ account, profile }) {
        if (account?.provider === "google") {
          const user = await UserDAO.getByEmail(profile?.email || "");

          ...

          const userSerialized = serializeUser(user);
          req.session.user = userSerialized;
          req.session.save()
          return true;
        };

        return false;
      },

    }
  } as AuthOptions)}, sessionOptions);

How to get logged User in Next.js app directly in Redux store? Example using iron-session

Mariusz — Sun, 17 Sep 2023 03:19:24 +0000

I am trying to find a simple way to pass stateless session data (iron-session/JWT) to redux store. There is a lot of solutions out there, but all of them do extra request. Obviously, decryption of cookie takes place on server side thus we can use it to pass the user data as initial state. Here is my attempt:

// _app.tsx
function MyApp({
  Component,
  pageProps
}: AppProps
) {
  store.dispatch(update(pageProps.user));

  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

MyApp.getInitialProps = async function (appContext: AppContext) {
  const req = appContext.ctx.req
  const res = appContext.ctx.res;
  const session = await getIronSession(req, res, sessionOptions);

  return {
    pageProps: {
      user: session.user
    },
  }
}

export default MyApp;

Of course, using getInitialProps on _app.tsx block Next to do any static site generation, but that is not the crucial part for me.

We need to handle also the logging process on client side.
To make request, I use great react-toolkit queries, however to fill the same "redux slice" as on server side we will need to use some extra code.
Following, is my React hook, which basically pass the user data from "RTQ store" to defined and fully controlled Redux slice.

import { update } from "../../store/features/userSlice";

export function useLogIn() {
  const [
    login, {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
      data,
      isLoading,
      isSuccess,
      isError
    }
  ] = useLoginMutation();

  const dispatch = useDispatch();

  useEffect(() => {
    if (data?.user) {
      dispatch(update(data?.user));
    }
  }, [ data ]);

  return {
    login,
    isLoading,
    isSuccess,
    isError,
  } as const;
}

and the log-in usage:


  const { login, isLoading, error, isError, isSuccess, isUninitialized } = useLogIn();

retrieving the data:

  const user = useSelector(selectUser);

... and that is all folks!

PS. I might over-engineered it, let me know if there is simpler way.

Next.JS - little decorator (Higher Order Function) to handle Prisma errors

Mariusz — Wed, 29 Jun 2022 20:39:02 +0000

I am quite surprised I couldn't find any generic way to handle exception from prisma client, so I wrote my own decorator.
I am just starting learning Next.js, so my approach could be very naive though, let me know if you see any improvements here.

It hides the error details for any other environment than dev.

import { NextApiRequest, NextApiResponse } from "next";
import { isDevEnv } from "./common";
import { Prisma } from "@prisma/client";

export function withPrismaError(request: (req: NextApiRequest, res: NextApiResponse) => unknown) {
  return async function (req: NextApiRequest, res: NextApiResponse) {
    try {
      await request(req, res);
    } catch (e) {
      if (e instanceof Prisma.PrismaClientKnownRequestError) {
        const errorResponse = {
          error: isDevEnv ? `${e.code} ${e.message}` : "prisma_error",
        };

        return res.status(503).json(errorResponse);
      }

      return res.status(503).json({ error: true });
    }
  };
}

and the usage:

export default withPrismaError(
  async function handler(req: NextApiRequest, res: NextApiResponse) {
    const { email, password, url } = req.body;

    await registerUser(email, password, url);
    res.status(200).json({ success: true });
  }
);

PS. ...and "hello guys", apparently today I am transitioned from "lurker" to blogger!