Vue app and .NET Core Web Api losing session

Viewed 40

I hope this has not already been asked, I can't seem to find what I need. I have a VUE 3 app and am using a .NET Core Web API to retrieve data from a service. In the Vue app I make an axios call to log in the user

                await axios({
                method: 'post',
                url: 'https://localhost:44345/api/Authentication/SignIn',
                contentType: "application/json",
                params: {
                    username: signInData.value.username,
                    password: signInData.value.password,
                    keepMeSignedIn: signInData.value.keepMeSignedIn
                }
            }).then(response => {

                if (response.data.succeeded) {
                    console.log("Result: ", response.data.data);
                }
                else {
                    emit('handleServerSideValidationErrors', response);
                }

This then calls my API where I call the service to sign in the user. Once I have verified the information and have the user data it is getting set in session.

public void Set<T>(string key, T value)
    {
        if (key.IsNullOrEmpty())
        {
            throw new Exception("The key parameter for SessionUtil.Set is required. It cannot be null/empty.");
        }
        else
        {
            this._validateSessionObjectVersion();

            if (value == null)
            {
                Remove(key);
            }
            else
            {
                string json = JsonConvert.SerializeObject(value, Formatting.None, new JsonSerializerSettings() { ReferenceLoopHandling = ReferenceLoopHandling.Ignore });
                _httpContextAccessor.HttpContext.Session.SetString(key, json);
            }
        }
    }

The issue I am running into is, when I go to another page that needs to access this session it is null. The API calls this get method but is null.

public T Get<T>(string key)
    {
        T value = default(T);

        if (key.IsNullOrEmpty())
        {
            return value;
        }

        if (_httpContextAccessor.HttpContext == null)
        {
            return value;
        }

        this._validateSessionObjectVersion();

        string json = _httpContextAccessor.HttpContext.Session.GetString(key);
        if (!json.IsNullOrEmpty())
        {
            value = JsonConvert.DeserializeObject<T>(json);
        }

        return value;
    }

My Vue app is running on localhost:5001 while my API is running on localhost:44345. I do have a cors policy already in place which allows me to call the API but I don't see what I need to do in order to not lose session.

1 Answers

Turns out my issue was I had set the cookie option of SameSite to SameSiteMode.Lax. As soon as I changed it to SameSiteMode.None it was working for me.

Related