Can't get the cookie data from Go server with React

I started to get into backend after React and on my backend server I added github OAUTH and sessions to persist the data. They are all working fine in the backend side, I can accesses the data from other handlers with sessions etc. But as soon as I try to get the session from backend with react I am never able to.

func (h Handler) HandleAuth(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "http://127.0.0.1:5173")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
w.Header().Set("Access-Control-Allow-Methods", "GET")
url := Oauth2Config.AuthCodeURL("state", oauth2.AccessTypeOffline)
http.Redirect(w, r, url, http.StatusFound)
}
func (h Handler) HandleAuthCallback(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "http://127.0.0.1:5173")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
w.Header().Set("Access-Control-Allow-Methods", "GET")
code := r.URL.Query().Get("code")
token, err := Oauth2Config.Exchange(r.Context(), code)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
// Use the access token to get the user's GitHub data
client := github2.NewTokenClient(r.Context(), token.AccessToken)
user, _, err := client.Users.Get(r.Context(), "")
if err != nil {
fmt.Printf("Error: %v\n", err.Error())
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
session, err := store.Get(r, "session")
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
session.Values["user"] = user.GetLogin()
session.Values["access_token"] = token.AccessToken
err = session.Save(r, w)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
fmt.Fprintf(w, "this is authcallback: %s", user.GetLogin())
}
func (h Handler) HandleCurrentUser(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "http://localhost:5173")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
w.Header().Set("Access-Control-Allow-Methods", "GET")
session, err := store.Get(r, "session")
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
user, ok := session.Values["user"].(string)
if !ok {
http.Error(w, "Invalid user in session", http.StatusInternalServerError)
return
}
// Set the content type header to JSON
w.Header().Set("Content-Type", "text/plain")
// Write the JSON data to the response
w.Write([]byte(user))
}

I tried many things, first I was using a different sessions library other than gorilla which was called scs and I thought maybe it was my library but it was not. And while changing the code the error I got differed but every time the backend was working just fine. On the API request from the backend sometimes I would get an empty string for data, or network error or user not found etc., but every time I checked the backend in each iteration of code backend worked perfectly fine. Here is the fetch request:

function App() {
const [user, setUser] = useState(null);
useEffect(() => {
fetch('http://127.0.0.1:3080/user', {
method: 'GET',
})
.then(response => response.text())
.then(data => {
setUser(data);
console.log(data);
})
.catch(error => console.error(error));
}, []);
[]);
return <>
<p>Logged in as: {user}</p>
<button onClick={() => window.location.href = 'http://127.0.0.1:3080/oauth'}>Login</button>
</>
}

IIUC, the web page is loaded from http://localhost:5173 and it makes a GET request to http://127.0.0.1:3080/user. So this is a cross-origin request.

By default, in cross-origin XMLHttpRequest or Fetch invocations, browsers will not send credentials (such as Cookies and HTTP authentication). A specific flag has to be set on the XMLHttpRequest object or the Request constructor when it is invoked.

In order to tell the browser to send cookies to a cross-origin URL, the fetch invocation should be changed like this:

  fetch('http://127.0.0.1:3080/user', {
    method: 'GET',
+   mode: 'cors',
+   credentials: 'include',
  })

For more information, see Requests with credentials.

It looks like that the backend code has configured the CORS headers correctly, so the above changes should make it work. If it doesn't, please check the DevTools console of the browser. It should contain some error/warning messages that will tell you what's wrong.

Here is the minimal demo helps to debug the issue.

1. start the server: go run main.go

2. navigate to http://127.0.0.1:3080/callback in a browser to set the cookie.

   Set-Cookie: session=abc; Path=/; Expires=Tue, 18 Apr 2023 18:34:49 GMT; Max-Age=86372; HttpOnly; SameSite=Lax.

3. navigate to http://127.0.0.1:5173/ to open a page.

4. click the fetch button on this page. It should output the session cookie "abc" to the DevTools console.

Notes:

I just realized that the cookie is saved to the domain 127.0.0.1 (without the port). So the page http://127.0.0.1:5173/ can read the cookie too.

package main

import (
	"fmt"
	"net/http"
	"time"
)

func main() {
	go func() {
		_ = http.ListenAndServe(":5173", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
			w.Write([]byte(page))
		}))
	}()

	http.HandleFunc("/callback", func(w http.ResponseWriter, r *http.Request) {
		http.SetCookie(w, &http.Cookie{
			Name:     "session",
			Value:    "abc",
			Path:     "/",
			Expires:  time.Now().Add(24 * time.Hour),
			MaxAge:   86372,
			HttpOnly: true,
			SameSite: http.SameSiteLaxMode,
		})
		w.Write([]byte("done"))
	})

	http.HandleFunc("/user", func(w http.ResponseWriter, r *http.Request) {
		w.Header().Set("Access-Control-Allow-Origin", "http://127.0.0.1:5173")
		w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
		w.Header().Set("Access-Control-Allow-Methods", "GET")
		w.Header().Set("Access-Control-Allow-Credentials", "true")

		cookie, err := r.Cookie("session")
		if err != nil {
			fmt.Fprintln(w, err.Error())
			return
		}
		w.Write([]byte(cookie.Value))
	})

	http.ListenAndServe(":3080", nil)
}

const page = `<html>
  <body>
    <button>fetch</button>
    <script>
      document.querySelector('button').addEventListener('click', () => {
        fetch('http://127.0.0.1:3080/user', {
          method: 'GET',
          credentials: 'include',
        })
          .then((response) => response.text())
          .then((data) => {
            console.log(data);
          })
          .catch((error) => console.error(error));
      });
    </script>
  </body>
</html>`

Incognito window can not see cookies from other window. Please check in the browser to make sure the cookie is there.