Next.js Discord

Discord Forum

NextAuth credentials 400 request error

Answered
Siamese Crocodile posted this in #help-forum
Open in Discord
Siamese CrocodileOP
Here is my /api/signup/route.ts file
import { db } from "@/utils/db";
import bcrypt from "bcrypt";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest, res: NextResponse) {
  const body = await req.json();
  const { email, password } = body;

  console.log(body);

  if (!email || !password) {
    return new NextResponse("Missing email or password", { status: 400 });
  }

  const userExists = await db.user.findUnique({
    where: { email },
  });

  if (userExists) {
    return new NextResponse("User already exists", { status: 400 });
  }

  const salt = await bcrypt.genSalt(10);
  const hashedPassword = await bcrypt.hash(password, salt);
  const user = await db.user.create({
    data: {
      email,
      password: hashedPassword,
    },
  });

  return NextResponse.json(user);
}

here is my auth.ts file 
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import GoogleProvider from "next-auth/providers/google";
import CredentialsProvider from "next-auth/providers/credentials";
import { NextAuthOptions, getServerSession } from "next-auth";
import { db } from "./db";

export const AuthOptions: NextAuthOptions = {
  session: {
    strategy: "jwt",
  },
  adapter: PrismaAdapter(db),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: { label: "Email", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {},
    }),
  ],
  pages: {
    signIn: "/signin",
    newUser: "/onboarding",
  },
  secret: process.env.NEXTAUTH_SECRET!,
  debug: process.env.NODE_ENV === "development",
};

export const getAuthSession = () => getServerSession(AuthOptions);
Answered by not-milo.tsx
Instead of getting them like this:
const body = await req.json();
const { email, password } = body;

You should get them like this:
const { values } = await req.json();
const { email, password } = values;
View full answer

18 Replies

Siamese CrocodileOP
and here is my signup page
Im getting a 400 request error when I try to sign up with email and password
how do i fix the 400 error? Im new to nextauth and need help with debugging. thank you!
im also getting a "Uncaught (in promise) SyntaxError: Unexpected token 'M', "Missing em"... is not valid JSON" error in the client's console
not-milo.tsx
The error seems to be caused by a malformed request. The email is missing in it.
@not-milo.tsx The error seems to be caused by a malformed request. The email is missing in it.
Siamese CrocodileOP
but the payload shows both the fields filled in
here
not-milo.tsx
Ooh, then I think you're accessing the values in a slightly wrong way.
not-milo.tsx
Instead of getting them like this:
const body = await req.json();
const { email, password } = body;

You should get them like this:
const { values } = await req.json();
const { email, password } = values;
Answer
Siamese CrocodileOP
okay that worked! thank you so much xD
not-milo.tsx
No problem ✨
Siamese CrocodileOP
import { db } from "@/utils/db";
import bcrypt from "bcrypt";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const { values } = await req.json();
  const { email, password } = values;

  if (!email || !password) {
    return new NextResponse("Missing email or password", { status: 400 });
  }

  const userExists = await db.user.findUnique({
    where: { email },
  });

  if (userExists) {
    return new NextResponse("User already exists", { status: 400 });
  }

  const salt = await bcrypt.genSalt(10);
  const hashedPassword = await bcrypt.hash(password, salt);
  try {
    const user = await db.user.create({
      data: {
        email,
        hashedPassword,
      },
    });

    return NextResponse.json(user);
  } catch (error) {
    console.log(error);
  }
}
in this code, I want to create a toast notification with shadcn when the user exists or when something goes wrong (the catch block) but i cant seem to use the toast component in a server component
how do I go about adding a toast notif?
i have one method that i'd like to try
ill create a Toast component and take in the messages as props and call that component in here.
would that method work?
not-milo.tsx
This is a different issue, it deserves its own forum post
Siamese CrocodileOP
ah, okay my bad