Receiving a 403 (forbidden) error from my Credentials Provider

[tunztunztunz]

I'm trying to connect with my Django backend API, authenticate my user, and bring that information back into my Next.js app to create a session. I attempted to write my own function, but I couldn't figure out how to create the session manually, so it looks like the Credentials provider may be the only/best way to do this? Right now, [...nextauth].ts file looks like this:

import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';
import NextAuth, { Account, CallbacksOptions, Profile, Session } from 'next-auth';
import Providers from 'next-auth/providers';
import { AuthenticatedUser } from '../../../interfaces/user';

const providers = [
  Providers.Google({
    clientId: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
  }),
  Providers.Credentials({
    id: 'credentials',
    name: 'Credentials',
    credentials: {
      email: { label: 'Email', type: 'text', placeholder: '[email protected]' },
      password: { label: 'Password', type: 'password' },
    },
    async authorize(credentials, req) {
      const res = await axios.post(
        'http://127.0.0.1:8000/api/auth/login/',
        {
          password: credentials.password,
          username: credentials.email,
          email: credentials.email,
        },
        {
          headers: {
            accept: '*/*',
            'Content-Type': 'application/json',
          },
        }
      );

      if (res.data.user) {
        const user = {
          email: res,
          name: `${res.data.user.first_name} ${res.data.user.last_name}`,
          id: res.data.user.pk,
        };

        return user;
      } else {
        throw new Error('error message');
      }
    },
  }),
];

const callbacks: CallbacksOptions = {};

callbacks.signIn = async function signIn(user: AuthenticatedUser, account: Account) {
  if (account.provider === 'google') {
    const { accessToken, idToken } = account;
    // Make the post req to the DRF api backend
    try {
      const res = await axios.post(
        // use sep .ts .json file to store url endpoints
        'http://127.0.0.1:8000/api/social/login/google/',
        {
          access_token: accessToken,
          id_token: idToken,
        }
      );
      // extract the returned token from the DRF backend and add it to the `user` object
      const { access_token } = await res.data;
      user.accessToken = access_token;
      return true;
    } catch (err) {
      throw new Error(err);
    }
  }
  return false;
};

callbacks.jwt = async function jwt(token: any, user: AuthenticatedUser) {
  if (user) {
    const { accessToken } = user;
    // reform the `token` object from the access token we appended to the `user object
    token.accessToken = accessToken;
  }
  return token;
};

callbacks.session = async function session(session: Session, user: AuthenticatedUser) {
  session.accessToken = user.accessToken;
  return session;
};

const options = {
  providers,
  callbacks,
};

const AuthenticationRequest = (req: NextApiRequest, res: NextApiResponse) =>
  NextAuth(req, res, options);

export default AuthenticationRequest;

I call it with a sign in button like this:

const sendCredentials = async () => {
    signIn('credentials', {
      email: email,
      password: password,
      username: email,
      callbackUrl: `/`,
    });

I've read through the docs, looked at a bunch of tutorials, and nothing is really clicking as far as solutions here. I've console logged my response from the POST request inside the Credentials Provider and it's sending back everything I'd expect it to with a status: 200 OK, so I can rule out the bad authentication on the backend. It looks like my issue is with next-auth. How am I hitting a forbidden path endpoint?

[balazsorban44]

The problem is in your signIn callback. You constantly return false if the provider is not Google, and so when you use the credentials flow, you always reject the signIn.

[techmustrainee]

You have no idea how much pressure you've put off me... I was trying to find the answer from past 2 hours and apparently many people have not gone through this error and I was really frustrated!

Thank you so much for your answer... It was a really really big help! 🙏

[WebCreatorisHere]

The problem is in your signIn callback. You constantly return false if the provider is not Google, and so when you use the credentials flow, you always reject the signIn.

This is wrong answer because in my code : import NextAuth from 'next-auth'
import GithubProvider from 'next-auth/providers/github'
import GoogleProvider from 'next-auth/providers/google'
import CredentialsProvider from 'next-auth/providers/credentials'
import clientPromise from '@/app/lib/clientprom'

export const authOptions = NextAuth({
providers: [
CredentialsProvider({
name: 'Credentials',
type: "credentials",
credentials: {},
async authorize(credentials) {
let client = await clientPromise
const db = client.db()
const collection = db.collection('users')
const user = await collection.findOne({ email: credentials.email, password: credentials.password })

    if (user) {
      console.log(user)
      return Promise.resolve(user)
    } else {
      return null  // or throw new Error("Invalid credentials");
    }
  },
}),
GithubProvider({
  clientId: process.env.GITHUB_ID,
  clientSecret: process.env.GITHUB_SECRET,
  authorization: { params: { prompt: 'login' } },
}),
GoogleProvider({
  clientId: process.env.GOOGLE_ID,
  clientSecret: process.env.GOOGLE_SECRET
}),

],
callbacks: {
async signIn({ user, account, profile, email }) {
const client = await clientPromise
const db = client.db()
const collection = db.collection('users')

  if (account.provider === 'google' || account.provider === 'github') {
    let existingUser = await collection.findOne({ email: user.email, isverified: true })
    
    if (existingUser) {
      return true
    } else {
      await collection.insertOne({ email: user.email, name: profile.name, isverified: false })
      return true
    }
  }
},

},
secret: process.env.NEXTAUTH_SECRET,
session: {
strategy: "jwt", // For credentials provider
},
jwt: {
secret: process.env.JWT_SECRET, // Ensure JWT_SECRET is set in environment
}
})

export { authOptions as GET, authOptions as POST }

i am still getting the error after returning true

here is my signin:let response = await signIn("credentials", {
email: data.email,
password: data.password,
csrfToken,
callbackUrl: "/",
redirect: false,
});
console.log(response)

DO NOT GIVE ANSWERS UNLESS YOU KNOW ONE