[Security Bundle] Unable to log in via API

[danielpeci]

Symfony version(s) affected

7.0.7

Description

I'm currently working with Symfony 7.0 on the backend and React on the frontend. Additionally, I'm using API Platform and the Lexik JWT Authentication Bundle.

The authentication process should unfold as follows: when a registered user attempts to log in, if their credentials are valid, a token should be generated, granting them access to the dashboard.

Here's what I've accomplished thus far:

• I have created ApiController following Symfony Documentation
• When I process the login, I only get 200 Status code with Token back. But the token isn't being saved in session or cookie, leaving the user unable to access the dashboard (The User is not authenticated)

How to reproduce

APIController.php

class ApiLoginController extends AbstractController
{
    #[Route('/api/login', name: 'api_login', methods: ['POST'])]
    public function index(#[CurrentUser] $user, JWTTokenManagerInterface $tokenManager): Response
    {
        if (null === $user) {
            return $this->json([
                'message' => 'missing credentials',
            ], Response::HTTP_UNAUTHORIZED);
        }

        $token = $tokenManager->create($user);

        return $this->json([
            'user' => $user->getUserIdentifier(),
            'token' => $token,
        ]);
    }
}

security.yml

security:
    password_hashers:
        Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface: 'auto'
    providers:
        app_user_provider:
            entity:
                class: App\Entity\User
                property: email

    firewalls:
        login:
            pattern: ^/api/login
            stateless: true
            json_login:
                check_path: api_login
                username_path: email
                password_path: password
                success_handler: lexik_jwt_authentication.handler.authentication_success
                failure_handler: lexik_jwt_authentication.handler.authentication_failure

        api:
            pattern: ^/api/
            stateless: true
            jwt: ~


    access_control:
        - { path: ^/api/login, roles: PUBLIC_ACCESS }
        - { path: ^/api,       roles: IS_AUTHENTICATED_FULLY}

Login.jsx

const Login = () => {
    const handleSubmit = (e) => {
        e.preventDefault();
        const email = e.target.loginemail;
        const password = e.target.loginpassword;
        fetch('api/login', {
            credentials: 'same-origin',
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({

                email: e.target.loginemail.value,
                password: e.target.loginpassword.value
            }),
        })
            .then(response => {
                response.json().then((data) => {
                    if(data.user){
                        window.location.href="/dashboard"
                    }
                });
            });
    };

Possible Solution

No response

Additional Context

Additionally I inserted into LoginController a dump($this->isGranted('IS_AUTHENTICATED_FULLY')); for debugging purposes, but I get always false, even after login

[MatTheCat]

the token isn't being saved in session

Well yes: you typically authenticate against remote APIs in a stateless fashion; that's what your firewalls being stateless means.

or cookie

By default the LexikJWTAuthenticationBundle will expect the token to be present in requests' Authorization header (see https://github.com/lexik/LexikJWTAuthenticationBundle/blob/3.x/Resources/doc/index.rst#usage).

If you want to use cookies, you need to configure the bundle: https://github.com/lexik/LexikJWTAuthenticationBundle/blob/3.x/Resources/doc/1-configuration-reference.rst#automatically-generating-cookies

[danielpeci]

Thanks a lot for your response. In the meantime, I've done some research and read through some documentation.. I believed that the Tokens of Lexik JWT are stored in cookies or sessions. However, when I tried to retrieve them using $request->headers->get('Authorization') , I received null as the output.

I came across some posts discussing this issue, suggesting that it could be because Authorization isn't accessible on Apache. Since I'm using Apache on ddev, I implement this configuration, but unfortunately, it didn't resolve the problem.

RewriteEngine On
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

[MatTheCat]

It seems like you expect the token to be automatically passed to your backend once it has been created, but it is not the case by default: getting the token in the Authorization header implies it has been set by a client; which would be your React app in your case.

Conversely, cookies will be automatically sent by the browser but as I wrote earlier, using them requires to configure the LexikJWTAuthenticationBundle.

[danielpeci]

Thanks for your help! Just one more thing: since the cookies are http-only and not accessible with Javascript, what's the best way to handle JWT Tokens? I've heard about storing them in sessions, local storage, or cookies. It seems like HTTP-only cookies are preferred, but they're not usable in Javascript.

So, I made a small service to return the BEARER Token via API, allowing me to use it in React. Is this a good approach, or is there a better way? Sorry for a lot of questions, but my goal is to learn from experienced developers and do things the right way. I'll get you a beer tho! 💯

    #[Route('/api/cookie', name: 'api_cookie', methods: ['GET'])]
    public function getToken(Request $request): Response
    {
        $bearer = '';
        foreach ($request->cookies as $key => $cookie) {
            if ($key === 'BEARER') {
                $bearer = $cookie;
            }
        }

        return new Response($bearer);
    }

[MatTheCat]

Hm if you configured the bundle to use a cookie then you shouldn't need anything else: the browser will automatically send it with each request, so the bundle will be able to get it and authenticate you.

The bundleʼs documentation also mentions the use of two cookies: https://github.com/lexik/LexikJWTAuthenticationBundle/blob/3.x/Resources/doc/1-configuration-reference.rst#automatically-generating-split-cookies so you should probably read it as well as the linked article.

Godspeed 🚀

[danielpeci]

Thank you very much for your support! With your assistance, I've managed to implement functional login and logout features using cookies. You'll soon receive a small treat from me! 💯

[MatTheCat]

Why, thank you 😄