How do I register & login (for testing purposes)?

[ThivRajan]

So I followed the README steps and got the backend & frontend running. I went through the database (phpMyAdmin) and noticed there is a a single user created, so I figured this was a user meant for testing purposes. I used the credentials of that user to sign in but I keep getting this error in the console: Failed to load resource: the server responded with a status of 403 (Forbidden).

When I register to create a user I don't get any errors but the created user doesn't show up in the DB and I get the same login error as above.

I'm pretty sure that the frontend isn't actually making requests to the backend (based on what I'm seeing in the network tab) and when I tried updating the api/endpoints.ts file to point to where the DB was running, I still ran into the same issues as above.

Here is a screenshot of the backend running (to show that it's working):

So my question is, what am I doing wrong here and how can I login and register so that I can view and play with the app? Is there a crucial step that I missed in order to connect the local frontend and backend that are running? Thanks.

[knjk04]

Thanks for creating the question.

I've been meaning to specify how to do this in the README (#692), so I've added that in now. See https://github.com/Project-Books/book-project/tree/0.2.0#test-user.

I went through the database (phpMyAdmin) and noticed there is a a single user created, so I figured this was a user meant for testing purposes. I used the credentials of that user to sign in

This may not be clear from looking at the database alone (only from the backend), but the passwords we store are encrypted (so you won't be able to log in with the password stored in the database).

but I keep getting this error in the console: Failed to load resource: the server responded with a status of 403 (Forbidden).

If you're getting a 403, I think the server is receiving the request. I suspect the credentials are invalid.

I'm pretty sure that the frontend isn't actually making requests to the backend (based on what I'm seeing in the network tab) and when I tried updating the api/endpoints.ts file to point to where the DB was running, I still ran into the same issues as above.

We have code on the frontend to send a request for logging in (https://github.com/Project-Books/book-project/blob/0.2.0/frontend/src/login/Login.tsx#L132) and registering (https://github.com/Project-Books/book-project/blob/0.2.0/frontend/src/register/Register.tsx#L115).

and when I tried updating the api/endpoints.ts file to point to where the DB was running, I still ran into the same issues as above

I don't think that would work as it's the backend that connects to the database.

---

This should hopefully clarify things. If so, please mark this as the accepted answer. Otherwise, feel free to reply to this message.

[ThivRajan]

Yes this absolutely does. Thank you very much!

[adrianbranescu]

I tried registering a new user using the UI, but after I fill in the form and press "Create account" button, nothing happens (tested using Firefox and Chrome).

So, I tried to create the new account by using Postman (and eventually managed to do so).

For this, I had to access a method called "register", located in "UserController.java" and mapped to "/api/user" URL. The problem was that this URL is not accessible if I'm not authorized. So, I had to login as another user, in order to create my new account.

Fortunately, there is a test account, that I used to login.

I followed the instructions available here:
https://github.com/Project-Books/book-project/wiki/Connecting-to-the-backend-via-Postman

I logged in as:

{
    "username": "[email protected]",
    "password": "password"
}

(I passed the above raw data when accessing localhost:8080/login with POST verb)

After that, I copied the Authorization token and used it to list all users by sending it as header parameter.

I accessed localhost:8080/api/user/users with GET verb and Authorization parameter.
I got a list containing only the default test account:

[
    {
        "email": "[email protected]",
        "password": "$2a$10$sV1LmN5k4IdQeboEYa9nl.UsMRMdCmew6k8hacRNg6LDYDcYE1NVS",
        "active": true,
        "roles": [
            {
                "id": 1,
                "role": "USER"
            }
        ]
    }
]

When running the above request, without Authorization parameter, I got:

    "status": 403,
    "error": "Forbidden",
    "message": "Access Denied"

This is normal, because I needed to be authenticated in order to have access.

After that, I proceeded with adding my new user. For that, I created a POST request, having
localhost:8080/api/user as URL and the following body as raw data:

{
    "email": "[email protected]",
    "password": "Adrian.1*2_3"
}

I tried running the request without authorization (I unchecked the "Authorization" parameter), but it did not work:

    "status": 403,
    "error": "Forbidden",
    "message": "Access Denied"

I ran a request to get all users, which returned only the default test user previously mentioned ([email protected], with its details).

I repeatead my POST request for registering a new user, but this time I also sent the Authorization parameter (the JWT token corresponding to "[email protected]" account).

What I got was this:

    "status": 403,
    "error": "Forbidden",
    "message": "Access Denied",
    "trace": "org.springframework.security.authentication.BadCredentialsException: Bad credentials

In practice, the operation succeeded (BadCredentialsException probably occurred because after registration, new user was authenticated - as per "registrate" method in "UserService.java" - and Authorization token in Postman was still the one from the previous user).

I ran again the request that gets all users and my new user also appeared:

[
    {
        "email": "[email protected]",
        "password": "$2a$10$sV1LmN5k4IdQeboEYa9nl.UsMRMdCmew6k8hacRNg6LDYDcYE1NVS",
        "active": true,
        "roles": [
            {
                "id": 1,
                "role": "USER"
            }
        ]
    },
    {
        "email": "[email protected]",
        "password": "$2a$10$sF/zF3pmCk7tgvdXOxFQqeAZk/nkvDzGakg6SO46jp0GACCIg7See",
        "active": true,
        "roles": [
            {
                "id": 1,
                "role": "USER"
            }
        ]
    }
]

Remark: that id is not user id. User id is generated automatically, with auto-increment, but don't assume that if you have two users, their ids are 1 and 2. Could be totally other values, especially if you previously created and deleted some other users (I wrote this remark because UserController has a method that returns a user by the id, and it can be misleading).

I then logged in with my new account using the UI, just to make sure it works. I managed to successfully log in.

Back to Postman, I also wanted to see how to delete a user. For that, I had to login as that user.

I made a POST request to localhost:8080/login, with this raw body:

{
    "username": "[email protected]",
    "password": "Adrian.1*2_3"
}

After that, I copy-pasted the new value of JWT token to "Authorization" request variable and made a DELETE request to localhost:8080/api/user, having this raw body:

{
    "email": "[email protected]",
    "password": "Adrian.1*2_3"
}

Remark: although username is same as email, when loggin in you must name the parameter "username", while when deleting user you must name the parameter "email".

Authorization parameter is important, as a user cannot delete another user.
If you use the JWT token from the previous user ([email protected]) to delete the new user ([email protected]), you will get a wrong password error.

To successfully delete the user, you must pass on the Authorization token which corresponds to that user.

I managed to delete my newly created user and got:

Status 204 No Content
The server successfully processed the request, but is not returning any content.

This is normal, since "deleteCurrentUser" method in "UserController.java" is annotated with @ResponseStatus(HttpStatus.NO_CONTENT).

To make sure I deleted the user account, I listed all users (GET localhost:8080/api/user/users) and obtained only the default test user:

[
    {
        "email": "[email protected]",
        "password": "$2a$10$sV1LmN5k4IdQeboEYa9nl.UsMRMdCmew6k8hacRNg6LDYDcYE1NVS",
        "active": true,
        "roles": [
            {
                "id": 1,
                "role": "USER"
            }
        ]
    }
]

What I found strange was that, after deleting "[email protected]" account, I was still being able to use its JWT token that remained set in Postman as Authorization request parameter. And this parameter was really being verified, because if I changed its value, I got 403 Forbidden response to my requests.

I then tried to create a new account using the UI.

Based on my experience with Postman, I thought that registration might work if I login as another user, first.

I logged in (as [email protected]) using the UI, then accessed the registration form using http://localhost:3000/sign-up as direct link.

Unfortunately, "Create account" button still did not do anything and I did not find a way of successfully creating an account using the UI.

In short:

• Creating a new user account via backend is possible, but I was only able to do that if I logged in as another user, since the registration method is not available unless you're authorized (the guide about connecting to backend via Postman says registering requests don't require authorization, but I couldn't find how to do that);

• Although off-topic, I think more cleanup should be done after deleting a user (such as deleting the JWT token, so it couldn't be used anymore in requests made after user deletion)

Also, I'm new to this project, so my explanations may not be completely accurate. Feel free to correct me, if I was wrong.

[knjk04]

Thanks for bringing this up. You're right that there's a bug with this. I fixed this in #751 (e.g. 908c0d2), so this should work. Bring your branch level with main and then test if this works. If not, raise a new issue or GitHub discussion and we can look into this further.

Although off-topic, I think more cleanup should be done after deleting a user (such as deleting the JWT token, so it couldn't be used anymore in requests made after user deletion)

Agreed, can you raise a new issue for this?