Wordpress GraphQL User Authentication with Astro

Question

Hi am trying to figure out how to do Authentication using GraphQL in Headless Wordpress.

export async function Authenticate(query, variables) {
    const response = await fetch(import.meta.env.WORDPRESS_GRAPHQL_ENDPOINT, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${refreshToken}` // Add your authentication header here
        },
        body: JSON.stringify({ query, variables }),
    })
    return response
}

This is the mutation query which is working in the GraphiQL IDE in Wordpress

mutation MyMutation2 ($username: String!, $password: String!){
  login(
    input: { username: $username, password: $password }) 
  {
    refreshToken
  }
}

Now, what I don't understand how to write is that how to take this returned refreshToken upon successful authentication and store it as a HTTP cookie (as I read that local storage is not secure due to cross scripting) and then use this refreshToken to do Authenticated tasks in WordPress.

I don't understand how to store and then how to pass it to that Authorization Header. Can someone help?

I am trying to implement authentication using Astro as front and Wordpress as backend and GraphQL is the communication between them.

I tried reading many tutorials from Google Searches and Watched many Youtube videos. There are many resources for React and Next.js but not many for Astro. Nonetheless, trying to learn from those examples did help a bit but still unable to understand the refreshToken part.