Next.js Authentication Made Easy: A Guide to Using Auth.js

Unlock Secure Client-Side Authentication in Next.js with Auth.js

What is Auth.js?

Auth.js, previously known as NextAuth.js, is a robust and flexible authentication library designed to synchronize with a vast list of OAuth services, offering full support for passwordless sign-in. This library can be used with or without a database, providing default support for popular databases like MySQL, MongoDB, PostgreSQL, and MariaDB.

Getting Started with Auth.js

To set up client-side authentication in a Next.js application using Auth.js, follow these steps:

1. Create a new Next.js application: Run npx create-next-app my-app to create a new Next.js app.
2. Install Auth.js: Install Auth.js using npm install @auth0/nextjs-auth0 or yarn add @auth0/nextjs-auth0.
3. Configure Auth.js: Create an auth.ts file in the project root and configure Auth.js for GitHub authentication.

Authenticating with GitHub OAuth

To authenticate with GitHub OAuth, create a catch-all dynamic route that responds to all relevant Auth.js API routes. Then, create a signIn function to initiate the sign-in process.

Querying the Current User Session

Use the useSession Hook to fetch the logged-in user’s information and display it in the application. You can also use the auth call to query the user’s session on the server.

Magic Link Authentication with Auth.js

To implement magic link authentication, configure the Auth.js session strategy to jwt and set up a database to store and manage unique tokens sent to users for authentication. Then, create a custom login page and send magic links using the sendVerificationRequest function.

Creating Protected Routes with Auth.js

Protect routes in your application using Server Components or middleware. In Server Components, check if a user session exists and redirect unauthenticated users to the sign-in page. In middleware, use the matcher property to define the routes to which the middleware function should be applied.

Centralizing Authentication Logic

By using middleware, you can centralize the logic for protecting routes and make it more maintainable.

Conclusion

In this article, we explored the process of setting up client-side authentication in a Next.js application using Auth.js. By following these steps, you can implement a secure authentication system in your Next.js applications.