Fail JSON.parse() data from Body of POST Request From Mobile Android Java, but Success from Web Frontend

[EhanDuan]

TOO LONG DON'T READ

• Fail JSON.parse() data from Body of POST Request From Mobile Android Java
• Success from Web Frontend with Typescript
• Success from Postman (web frontend)

Picture of demonstrations is here:

Overview

We are building an app with using Nextjs(Typescript) as the backend and frontend(Nextjs is partially based on React).

For the mobile frontend, we are using Java Android. The okHttp3 is applied to send requests and receive responses.

We will have seperated frontends (web and mobile) and **only one backend API (web for handling all)

Scene

We want to realize user registration.

To be specific, when a user signup with the required information, the frontend will send POST request to backend. Then, the backend API will complete its job.

Problem

It works well with the web frontend and backend. Here is the code.

web frontend: a button onclick function in /signup

const handleNext = (e: any) => {
        if (step < 4) {
            setStep(step + 1);
        } else {
            // submit user info into firebase auth and firestore user collections
            fetch("/api/auth/register", {
                method: "POST",
                body: JSON.stringify(formData)
            })
                .then((response) => response.json())
                .then((data) => {
                    setSigned(true);
                    setUid(data.uid);
                    router.push("/onboardCompleted");
                })
                .catch((error) => {
                    console.log(error.message);
                });
        }
    };

web backend api: /api/auth/register

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    try {
        const check = JSON.parse(req.body);
    } catch (e) {
        return res.status(400).json({
            error: "bad request since formData in undefined",
            body: req.body
        });
    }

    const { createUserWithEmailAndPassword } = AuthService;
    const formData = JSON.parse(req.body);

    // 1. register user with email and password using firebase auth
    const userCredential = await createUserWithEmailAndPassword(
        formData.email,
        formData.password
    );
    const user = userCredential.user;

    if (!user || !user.uid) {
        return res.status(500).json({ error: "firebase create user failed" });
    }

    try {
        await setDoc(doc(db, "users", user.uid), {
            email: formData.email,
            focus: formData.focus,
            first_name: formData.firstName,
            last_name: formData.lastName,
            role: formData.role,
            goals: formData.goals,
            status: "freemium",
            created_at: Timestamp.now().toMillis(),
            free_sets: []
        });

        res.setHeader(
            "set-cookie",
            `uid=${user.uid}; Max-Age=${1000 * 60 * 24 * 14};Path=/; HttpOnly`
        );

        return res.status(200).json({ uid: user.uid });
    } catch (e) {
        return res.status(500).json({ error: "error setDoc in the firestore" });
    }
}

These work well.

When adding the Android frontend, we have the following code:

String mRequestBody = jsonBody.toString();
System.out.println("before post register");


post_register_request(mRequestBody, new Callback() {
    @Override
    public void onFailure(@NonNull Call call, @NonNull IOException e) {
        Log.i("\n\nFail on request register", call.toString());
    }

    @Override
    public void onResponse(@NonNull Call call, @NonNull okhttp3.Response response) throws IOException {
        System.out.println("inside post register call back");
        if (response.isSuccessful()) {
            System.out.println("success post register call back");
            Log.i("\n\nRequest sucessful", response.body().string());
        }
        else
        {
            System.out.println("not success post register call back");
            Log.i("\n\nRequest not sucessful", response.body().string());
        }
    }
});

Call post_register_request(String json, Callback callback) {
    System.out.println("start post register");
    RequestBody body = RequestBody.create(json, JSON);
    okhttp3.Request request = new okhttp3.Request.Builder()
            .url(registerURL)
            .post(body)
            .build();
    Call call = client.newCall(request);
    call.enqueue(callback);
    System.out.println("finish return post register");
    return call;
}

The data is okay when sending from mobile end. But when backend receives request and parse the data in the body, it cannot be parsed, always fall into this code block of backend.

Here is the part of console result

    Request not sucessful ]
    {"error":"bad request since formData in undefined"}

Checking from Postman
We made the same POST request with the same data using Postman. It worked very well.

So it seems like the error is in the android part.

Do you have any ideas to solve this issue?

THANKS!