For my “weekend” this last Monday and Tuesday I tackled putting auth into my nextjs project, but without using NextAuth. It was a great review of auth in webapps. From a /login page that submits to /auth/login which responds with a jwt set in a cookie. Then I have a React Context Provider for my user data which carries, at the moment, just the username. My app layout makes a call to /api/me to get the current user to pass into the app header, which provides a login/logout button according to user’s login status. Finally, the /logout button posts to the /api/logout which reuturns a cleared cookie header, and the user is set to null as well.

I ran through a few debugging sessions as well due to various inconsistencies. The original jsonwebtoken as suggeseted to me by chatgpt was not compatible with next/edge runtime, so I changed over to jose. I had to learn to import and access the setUser function from my context provider. At one point I had the token clear function with the wrong name for token.

But overall I did great, and my app is now deployed and publicly accessible on vercel with major components of the app behind protected routes!

Next up for the personal recipe app:

  • re-add the add and edit recipe forms, as protected routes
  • clear out empty recipes and clean up seed data
  • maybe see if I can import any recipes from this blog repo