Integrating a custom SANITY a adapter with NextAuthV5

In the dynamic landscape of web development, ensuring robust and secure authentication mechanisms is paramount. When exploring the realms of Next.js applications, Auth.js formerly known as NextAuth emerges as a powerful tool for implementing authentication seamlessly. Github Repo | give it a star if helpful

The Challenge: NextAuthV5 and Sanity Integration

While NextAuth offers a plethora of authentication providers & adapters out-of-the-box, including popular platforms like GitHub and Google, integrating with Sanity CMS posed a unique challenge.

The Previous solution being next-auth-sanity, lacked compatibility with the latest versions of NextAuth and so I sought a solution that seamlessly integrates user authentication and management within the Sanity ecosystem by building a custom Sanity Adapter.

Integrating Sanity Adapter with NextAuth

The adapter serves as a middleware between NextAuth and Sanity CMS, facilitating user authentication, session management, and verification token handling seamlessly. By encapsulating user-related operations within the adapter, we ensure a cohesive authentication experience within our Next.js application.

Leveraging Sanity's Data Modeling Capabilities

Sanity CMS empowers developers with flexible data modeling and schema validation features. We harnessed these capabilities to define robust schemas for user profiles, authentication tokens, and session management within the CMS. This enables seamless synchronization between user data and authentication states across the application.

Breakdown of Auth.ts

1. Imports:The file begins by importing necessary modules and dependencies, including NextAuth itself, authentication providers like GitHub and Google, as well as other modules such as bcryptjs for password hashing and custom adapter modules.
2. Configuration Object Destructuring:The NextAuth() function returns an object containing various configurations, handlers, authentication functions, and callbacks. These are destructured from the returned object for further customization and usage.
3. Pages Configuration:Within the configuration object, there is a pages property where custom URLs for sign-in and error pages are specified. This allows developers to define their own pages for authentication-related purposes.
4. Authentication Providers:The providers property within the configuration object lists the authentication providers that NextAuth will use. In this case, GitHub, Google, and custom credentials providers are configured, each with its own set of client ID and client secret obtained from corresponding platforms.
5. Session Management:The session property specifies the session management strategy. Here, a JWT (JSON Web Token) strategy is employed for managing user sessions.
6. Adapter Configuration:The adapter property configures the data storage adapter to be used by NextAuth for managing user data. In this case, a custom adapter tailored for Sanity CMS is specified. The adapter interacts with Sanity CMS to store and retrieve user information securely.
7. Callback Functions:NextAuth provides various callback functions that are executed during different stages of the authentication process. These functions include signIn, session, and jwt. They are responsible for handling sign-in processes, managing user sessions, and updating JWT tokens, respectively.

Key Features:

• ?? Next-auth v5 (Auth.js)
• ?? Next.js 14 with server actions
• ??Custom SANITY CMS Adapter Integration
• ??Embbed SANITY studio
• ?? Credentials Provider
• ?? OAuth Provider (Social login with Google & GitHub)
• ?? Forgot password functionality
• ?? Email verification
• ?? Two factor verification
• ?? User roles (Admin & User)
• ?? Role Gate
• ?? useCurrentUser hook
• ?? useRole hook
• ?? currentUser utility
• ?? currentRole utility
• ??? Example with server component
• ?? Example with client component
• ?? Render content for admins using RoleGate component
• ??? Protect API Routes for admins only
• ?? Protect Server Actions for admins only