0

So I'm trying to create a proxy endpoint to obfuscate the real backend. My frontend is NextJS project and backend is Strapi app. And I'm trying to set up user registration. I have a /app/api/auth/register/route.js which will take the incoming request from the form and then make a request with the same data, modify it a tiny bit and make an actual registering request against the Strapi auth endpoint.

Everything seems to work just fine: the NextJS endpoint receives the request, the data is there, the data is sent to Strapi, the response comes back from Strapi, and then everything just silently ends... The browser gets 500 error responses from NextJs, but no errors are logged anywhere.

Mostly my question is - is this how you're supposed to handle incoming data with /app folder (req.json().then((data) =>)? How can I see the actual error? And how can I make it work?

enter image description here

// /app/api/auth/register/route.js

import { NextResponse } from 'next/server';

const POST = async function (req) {
    return req.json().then((data) => {
        fetch(`${process.env.STRAPI_URL}/api/auth/local/register`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: data.email,
                password: data.password,
                // username: data.email, // commented out to trigger validation error
            }),
        })
            .then((response) => {
                console.log('The data', data);
                response.json().then((respData) => {
                    console.log(respData);
                    if (response.ok) {
                        console.log('The success');
                        return NextResponse.json({ message: 'Success' });
                    } else {
                        console.log('The error');
                        return NextResponse.json({ error: 'something went wrong' }, { status: response.status });
                    }
                });
            })
            .catch((error) => {
                console.log('Something went terribly wrong');
                return NextResponse.json({ error: 'something went wrong' }, { status: 500 });
            });
    });
};

export { POST };


// console logs:
strapi_commerce-nextjs-1  | The data { email: 'john@doe.com', password: 'doe' }
strapi_commerce-nextjs-1  | {
strapi_commerce-nextjs-1  |   data: null,
strapi_commerce-nextjs-1  |   error: {
strapi_commerce-nextjs-1  |     status: 400,
strapi_commerce-nextjs-1  |     name: 'ValidationError',
strapi_commerce-nextjs-1  |     message: 'username is a required field',
strapi_commerce-nextjs-1  |     details: { errors: [Array] }
strapi_commerce-nextjs-1  |   }
strapi_commerce-nextjs-1  | }
strapi_commerce-nextjs-1  | The error

My NextJs version is 13.4.1

Odif Yltsaeb
  • 5,575
  • 12
  • 49
  • 80
  • As your error clearly states, username is a required field. Your request body to Strapi is missing the username field. Also I'd recommend you use `async/await` in your code. That makes it much more readable. – Fabio Nettis Jun 14 '23 at 13:49
  • No, that is not it. You can see that the error the browser see is 500. The response from strapi, has code 400, which I pass on with return NextResponse.json({ error: 'something went wrong' }, { status: response.status }) – Odif Yltsaeb Jun 14 '23 at 14:35

1 Answers1

0

Credit goes to https://www.reddit.com/user/Bohjio/ for the answer. And the answer was to make sure all promises are returned from the view. so return fetch(... and return response.json().then(...

Odif Yltsaeb
  • 5,575
  • 12
  • 49
  • 80