Next.js Discord

Discord Forum

Authentication in Next.js

Unanswered
Ferruginous Hawk posted this in #help-forum
Open in Discord
Ferruginous HawkOP
I am working on a (hobby) project, and I am not sure how to set up authentication.

While working on a different project, I had been writing my own authentication and I realized that I can't use jsonwebtoken due to SSR and Edge runtime errors. Ended up switching to using jose for JWT encryption.

Then I tried to use NextAuth.js in my current project which requires that my /auth/[...nextauth].ts be placed in /pages directory, instead of App. I learnt that this issue is currently being fixed in Auth.js 5.0.0 (beta). Still some limitations on location of Auth.ts file.

But I'd like to know if there's any alternate module with some more flexibility that would allow me set up Auth.ts in '@/lib' and use the available methods like signIn, signOut, etc anywhere in my project, preferably @/app/api/v1/auth/...

7 Replies

Anay-208 | Ping in replies
https://www.better-auth.com/ is one of the best option
https://nextjs.org/learn/dashboard-app/adding-authentication

Check this authentication to know how to properly set up auth in nextjs
Morelet’s Crocodile
Have your tired Next Auth or Auth JS with a DB adapter and and split config?

auth.ts:
import NextAuth from 'next-auth';
import NeonAdapter from "@auth/neon-adapter"
import { Pool } from "@neondatabase/serverless"
import authConfig from './auth.config';

const pool = new Pool({ connectionString: process.env.DATABASE_URL });

export const { handlers, auth, signIn, signOut } = NextAuth({
    adapter: NeonAdapter(pool),
    session: { strategy: "jwt" },
    ...authConfig
})

auth.config.ts:
import GitHub from "next-auth/providers/github"
import type { NextAuthConfig } from "next-auth"

export default {
  providers: [GitHub],
} satisfies NextAuthConfig

Works on the Edge run time with JWT and and Db adapters. Works well with Neon and Vercel using next-auth": "^5.0.0-beta.27".
Ferruginous HawkOP
Not yet. I had been trying to set up Auth.js in such a way that I could have main auth.config.ts in root and then auth.ts and API in src/lib and src/app/api/v1/auth/... respectively. That had been largely unsuccessful.

So, I've accepted the defeat, and I'm working the having a single auth.config.ts in root folder and API in src/app/auth/....

However, I am now fazed with difficult issue with /auth/error page. I get /auth/error?error=Configuration in my url. Something about a misconfigured config or uncaught error in my config or provider authorization.
Ferruginous HawkOP
  providers: [
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        try {
          if (!credentials?.username || !credentials?.password) {
            throw new Error('Invalid credentials');
          }

          if (credentials.username !== user.username) {
            throw new Error('User not found.');
          }

          const isPasswordValid = await bcrypt.compare(credentials.password as string, user.password);

          if (!isPasswordValid) {
            throw new Error('Username or password is incorrect.');
          }

          return {
            id: user.id,
            username: user.username,
            name: user.name,
            role: user.role,
            status: user.status,
          };
        } catch (error: any) { // eslint-disable-line
          console.error('Error during authorization:', error);
          throw new Error("Authentication failed");
        }
      },
    }),
  ],



This happens when I intentionally sign in with incorrect password. I expected that I would get a notification about incorrect credentials.