Guides > Authentication

Nexset uses NextAuth.js for authentication, providing a secure and flexible authentication system out of the box.

Authentication Methods

Nexset comes with one built-in authentication method:

• 1

  Magic Links: Passwordless authentication via email

Configuration

Authentication is configured in the NextAuth route handler file:

// File: /app/api/auth/[...nextauth]/route.js

Implementation

To implement authentication in your components, use the built-in ButtonSignin component or create your own:

"use client"

import { signIn } from "next-auth/react";
import config from "@/config";
                
const ButtonSignin = () => {
  return (
    <button
      className="btn btn-primary"
      onClick={() => signIn(undefined, { 
        callbackUrl: config.auth.callbackUrl 
      })}
    >
      Login
    </button>
  );
};
                
export default ButtonSignin;

Callback URL

The callbackUrl in config.js determines where users are redirected after successful authentication. This is typically set to a protected route like /dashboard.

Protected Routes

To protect routes and ensure only authenticated users can access them, you can use the built-in authentication checks.

Best Practices

• 1

  Always use "use client" directive when using authentication in client components

• 2

  Configure proper error handling for authentication failures

• 3

  Set appropriate callback URLs for different authentication flows

• 4

  Implement proper loading states during authentication

Environment Variables

Make sure to set up the required environment variables in your .env.local file:

• 1

  NEXTAUTH_URL: Your application URL

• 2

  NEXTAUTH_SECRET: A secret key for NextAuth

Additional Resources

• 1

  Check the NextAuth.js documentation for more advanced configurations

• 2

  Review the Magic Links setup guide for email configuration