Angular login withCredentials:true doesnt work

Question

Logging in using restAPIfails in browser , but works in postman.

here is my angular code for login, which throws me 401

    login(username: string, password: string) {
    const httpHeaders = new HttpHeaders()
                     .set('Accept', 'application/json')
                     .set('Content-Type', 'application/x-www-form-urlencoded');
    return this.http.post<any>(environment.apiUrl + '/api/core/login',
     JSON.stringify({ 'username': username, 'password': password }), {withCredentials: true, headers: httpHeaders})
        .pipe(map(response => {
            // login successful if there's a jwt token in the response
            const token = response.headers.get('Lemon-Authorization');
            if (response.status === 200 && token) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('authHeader', 'Bearer ' + token);
                this.currentUserSubject.next(response.body.user);
            }

            return response.body.user;
        }));
}

401 in chrome: faliure in chrome

200 OK in postman : success in postman

what am i missing?

score 2 · Answer 1 · answered Nov 22 '18 at 00:19

2

I believe you are facing a known CORS problem. The reason it works on postman is because It doesn’t do the called preflight request that the browsers do when you send authentication headers.

You will probably see in your requests in the browser that the failed request is an OPTIONS and not a ‘POST’. If that’s the case it means your server configuration is lacking CORS configurations.

answered Nov 22 '18 at 00:19

Hugo Noro

3,145
2
13
19

thank you for your answer. i had cors cofigurationofmy server correct, i only messed up to specify Angular to POST using x-www-form-urlencoded – Nagasagar Ds Nov 22 '18 at 06:42

score 1 · Accepted Answer · answered Nov 22 '18 at 01:32

1

I think the reason could be that you are JSON stingifying the request body, whereas it should be application/x-www-form-urlencoded, i.e. username=abc&password=xyz. You could look at working Spring Lemon demo code for such issues, e.g. this one.

answered Nov 22 '18 at 01:32

Sanjay

8,755
7
46
62

score 1 · Answer 3 · answered Nov 22 '18 at 06:40

here is working code :

 login(username: string, password: string) {
            const body = new URLSearchParams();
            body.set('username', username);
            body.set('password', password);
            const options = {
                headers: new HttpHeaders()
                    .set('Accept', 'application/json')
                    .set('Content-Type', 'application/x-www-form-urlencoded'),
                withCredentials: true
            };
            return this.http.post<any>(environment.apiUrl + '/api/core/login',
                body.toString(), options)
                .pipe(map(response => {
                    // login successful if there's a jwt token in the response
                    const token = response.headers.get('Lemon-Authorization');
                    if (response.status === 200 && token) {
                        // store user details and jwt token in local storage to keep user logged in between page refreshes
                        localStorage.setItem('authHeader', 'Bearer ' + token);
                        this.currentUserSubject.next(response.body.user);
                    }

                    return response.body.user;
                }));
        }

more info here - How to force Angular2 to POST using x-www-form-urlencoded

Angular login withCredentials:true doesnt work

3 Answers3