![]() I'm almost certain the NextAuth maintainers are working on improving the DX around this, so please, make sure you keep an eye on their docs before going this route.Īlso, I cannot stress this enough: NEVER store sensitive data in the token, nor the session.Īdditionally, if you're using TypeScript as well, you may want to follow this Module Augmentation guide to update the Session and JWT types accordingly. This did require a bit of work, so hopefully I've explained it succinctly enough for you to remember the steps and why it's done this way. But since the callbacks are async, you can always complete the data by making an API call within them. Note: Unfortunately, the NextAuth route handler doesn't support POST request methods, so you will not be able to pass in complex data through a payload object. When it comes to useSession (client-side), it will be updated on the next page refresh, so make sure you mostly use the session coming from getServerSideProps. Here's what my jwt callback originally looked like (no worries if yours is slightly different, I have my own needs):Įnter fullscreen mode Exit fullscreen modeĪnd that's it! The client will receive an updated session whenever you call getSession (server-side) moving forward. Just make sure your setup currently works perfectly and successfully authenticates users.Īnd since this tutorial is around the JWT-persisted session, you should have the jwt and session callbacks ready. No matter which provider you're using (credentials, email, oAuth.), you should be able to follow along. I liked it, but I figured I could improve on it: It involved setting up a wrapper around the NextAuth route handler and exploiting the Next API Request object. Then I stumbled upon this solution, which got me going. The issue with this approach is that it would need to be persisted locally (local storage, session storage.) and because of the server-side nature of Nextjs, I would need to check for its existence on each page (this one could most likely be easily handled using the new Nextjs 13 features, which I'm not able to use in this particular app). ![]() The first solution that came to mind, as many have also suggested, was to use a global state management library, such as Redux, or Zustand, to create a client-side-only session. We can all agree that those are pretty common scenarios, right? So today, at work, I needed to handle the second scenario while using the JWT-persisted session and since I've kinda figured it out, I thought I'd document it. Authenticated users have additional data that they pick up throughout their onboarding process (e.g.: selecting a company to manage on a dashboard).Authenticated users update their personal and public info (e.g.: first name).Here are two scenarios where it's necessary to update the session: While it's straightforward enough to do when using the database-persisted approach, it's a different story with the JWT-persisted session flow. I've been using it for over a year now and one of the challenges I've faced is updating the session after a successful login. This is a monorepo containing the following packages / projects: The primary next-auth package A development test application All next-auth/-adapter packages The documentation site. It is designed from the ground up to support Next.js and Serverless. NextAuth is hands down the best authentication solution for Nextjs. NextAuth.js is a complete open source authentication solution for Next.js applications.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |