Failed to keep logged in angular when using php backend

Question

I'm trying to make a login system on angular with a PhP backend.

When people login, this is the PhP script called :

// here check for good request
$account = // found the account thanks to PDO
$accountId = $account["id"];
session_start();
$_SESSION["accountId"] = $accountId;
setcookie("accountId", $accountId, [
    'expires' => time() + 86400,
    'path' => '/',
    'domain' => $_SERVER['HTTP_HOST'],
    'secure' => true,
    'httponly' => false,
    'samesite' => 'None',
]);

Then, when I want to get informations according to user, I call this script :

session_start();

if(!isset($_SESSION["accountId"]) && !isset($_COOKIE["accountId"])) {
    echo "You are not logged";
    die();
}
$accountId = isset($_SESSION["accountId"]) ? $_SESSION["accountId"] : $_COOKIE["accountId"];

// here get data
echo json_encode($accountId);

When I'm doing this in my browser, it works.

But when I'm doing it with angular, the $_SESSION and $_COOKIE are empty, so it show me "You are not logged".

My code in angular :

this.http.get<T>("http://my-url.com/script.php").toPromise().then((result) => console.log(result));

My question:

How should I use PhP/Angular request to make secure login and data-request according to logged account? Should I change of language (to Java/C#/...)* (it's not a problem for me)?

What I tried ?

Use { withCredentials: true } on get method on angular:

this.http.get<T>("http://my-url.com/script.php", { withCredentials: true }).toPromise().then((result) => console.log(result));

I was getting a CORS error. After updating my header (see below), I get the same result: in browser it's fine but not in angular.

I tried with $_SESSION and with $_COOKIE. Both are working in my browser, but not in angular.
I think to put the accountId in the request, each time. But it's clearly not secure, and not a very good idea...
Such as I had CORS issue, I add few lines to manage them:

header('Access-Control-Allow-Headers: Access-Control-Allow-Origin, Content-Type');
header('Access-Control-Allow-Origin: http://localhost:4200');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Credentials: true');
header('Content-Type: application/json, charset=utf-8');

But, it solve all CORS issues but not my session/cookie empty.

So, how can I keep session and/or cookie in Angular, like my browser does?

I mean - fixing the CORS issue is fairly simple in PHP? Just read the request host and throw that in the CORS header? That is how it is usually done? — MikeOne
– MikeOne, Commented Oct 14, 2021 at 18:27
@MikeOne The PHP script isn't called, it's refused because of options request, so I edit apache config and now it's fine but some request are refused by apache and not by php — Elikill58
– Elikill58, Commented Oct 14, 2021 at 19:12
Also use a post request to login users. Don't change state (return a cookie, or modify the database) on a get request. — Pieterjan
– Pieterjan, Commented Oct 21, 2021 at 17:08

MathiAs2Pique_ · Accepted Answer · 2021-10-21 16:48:02Z

1

+50

First, you can try vanilla-js function fetch("url") to deal with cookies and session storage.

But I advise you to use tokens for API requests rather than session storage or cookies. You'll have less problems and it's easier to upgrade later.

For example

Of course, you need to redesign your database, and your PHP code (as the JS one). When the user is logging in, to add a bit of security, you may need to hash the password with md5() or a better method like AES, as you like, and check if this hash correspond in the database. Then, respond with a success or an error followed by the user's token (created during sign up with PHP, generally a couple of md5() and uniqid()). This token must be long to avoid bruteforces.

Then, once the user is logged in and the Js code has the token, you have just to make API requests with this token. More often, the token is provided in a header, authorization: Bearer <token> (replace "" by the token.) It's easy to use and easy to get in PHP. (Take a look at this question : How to properly use Bearer tokens?)

edited Oct 21, 2021 at 16:48

answered Oct 21, 2021 at 16:29

MathiAs2Pique_

14511 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elikill58 Over a year ago

The fetch never return the content, even if http.get does. It's strange :/

MathiAs2Pique_ Over a year ago

You defenitely need to try the token's method.

Lu CT · Accepted Answer · 2021-10-19 09:38:43Z

0

I think your problem is not about CORS. I had a similar situation on a php backend (CodeIgniter to be specific) and the problem was on the SameSite cookie attribute. Try to add this code inside a config file or index:

setcookie($name, $value, [
    'expires' => time() + 7200,
    'path' => '/',
    'domain' => 'domain.com',
    'secure' => true,
    'httponly' => false,
    'samesite' => 'None',
]);

or for php >= 7.3:

 session_set_cookie_params([
    'lifetime' => time() + 7200,
    'path' => '/',
    'domain' => $_SERVER['HTTP_HOST'],
    'secure' => true,
    'httponly' => false,
    'samesite' => 'None'
]);

Check this question it might give you more hints.

edited Oct 19, 2021 at 9:38

answered Oct 18, 2021 at 15:57

Lu CT

1163 bronze badges

13 Comments

Elikill58 Over a year ago

Thanks, I will check it !

Elikill58 Over a year ago

Update: I just upload it on real server with DNS. I update the "domain" value and then I tried. It's the same: It works with my browser but not with angular :/ ($_COOKIE is empty)

Elikill58 Over a year ago

Update 2: I tried with "Lax" as SameSite value, I also tried with ini_set('session.cookie_samesite', 'Lax'); session_set_cookie_params(['samesite' => 'Lax']); but it always does the same: cookie field is empty

Lu CT Over a year ago

@Elikill58 be sure that SameSite value should be none, maybe there is some other configuration overriding those who are you are trying to setup. At least now you know your problems comes from the cookies. What is the version of your angular and php ?

Elikill58 Over a year ago

Php I just upgrade to 7.3.5 to make this works. Angular i'm in 12.2.9. Also, I tried with None, Lax and Strict because i didn't find any quick explaination of what each value does

|

behroozbc · Accepted Answer · 2021-10-16 19:49:00Z

-1

you must add cors headers in php script

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');

header("Access-Control-Allow-Headers: *");

edited Oct 16, 2021 at 19:49

answered Oct 16, 2021 at 19:34

behroozbc

2,8682 gold badges20 silver badges29 bronze badges

6 Comments

Elikill58 Over a year ago

I already add first 2 line in Apache config (not the third). But i will try the last

behroozbc Over a year ago

@Elikill58 please add this file in top of php script file

Elikill58 Over a year ago

In apache config or in php script directly I get "blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response."

behroozbc Over a year ago

@Elikill58 are you test my code ??

behroozbc Over a year ago

@Elikill58 i update allow headers please test it

|

Collectives™ on Stack Overflow

Failed to keep logged in angular when using php backend

3 Answers 3

2 Comments

13 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

13 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related