xenial-black
xenial-black3w ago

session token auth

@kapa.ai How can I use a session token as a authorization header when creating a new graphql client?
2 Replies
kapa.ai
kapa.ai3w ago
Hi @amvdxc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use a session token as an authorization header when creating a new GraphQL client in a refine application, you can follow the approach demonstrated in the provided knowledge sources. Here is an example of how you can achieve this: 1. Import the necessary modules: - Import graphqlDataProvider and GraphQLClient from the appropriate refine package. 2. Create a custom fetch function: - This function will append the session token to the authorization headers of each request. 3. Create the GraphQL client: - Pass the custom fetch function to the client options. 4. Create the data provider: - Use the custom GraphQL client to create the data provider. Here is a code example based on the provided knowledge sources:
import graphqlDataProvider, { GraphQLClient } from "@refinedev/graphql";

const client = new GraphQLClient(API_URL, {
fetch: (url: string, options: RequestInit) => {
return fetch(url, {
...options,
headers: {
...options.headers,
/**
* For demo purposes, we're using `localStorage` to access the session token.
* You can use your own authentication logic here.
* In real world applications, you'll need to handle it in sync with your `authProvider`.
*/
Authorization: `Bearer ${localStorage.getItem("session_token")}`,
},
});
},
});

/**
* Create the data provider with the custom client.
*/
const dataProvider = graphqlDataProvider(client);
import graphqlDataProvider, { GraphQLClient } from "@refinedev/graphql";

const client = new GraphQLClient(API_URL, {
fetch: (url: string, options: RequestInit) => {
return fetch(url, {
...options,
headers: {
...options.headers,
/**
* For demo purposes, we're using `localStorage` to access the session token.
* You can use your own authentication logic here.
* In real world applications, you'll need to handle it in sync with your `authProvider`.
*/
Authorization: `Bearer ${localStorage.getItem("session_token")}`,
},
});
},
});

/**
* Create the data provider with the custom client.
*/
const dataProvider = graphqlDataProvider(client);
In this example: - The fetch function is customized to include the Authorization header with the session token retrieved from localStorage. - The GraphQLClient is instantiated with this custom fetch function. - Finally, the dataProvider is created using the custom GraphQLClient. For more details, you can refer to the GraphQL Authentication documentation (https://refine.dev/docs/data/packages/graphql/#authentication). If you need to handle WebSocket connections as well, you can refer to the Nest.js Query Authentication documentation (https://refine.dev/docs/data/packages/nestjs-query/#authentication) for additional setup.
import graphqlDataProvider, {
GraphQLClient,
liveProvider as graphqlLiveProvider,
} from "@refinedev/nestjs-query";
import { createClient } from "graphql-ws";

const client = new GraphQLClient(API_URL, {
fetch: (url: string, options: RequestInit) => {
return fetch(url, {
...options,
headers: {
...options.headers,
Authorization: `Bearer ${localStorage.getItem("session_token")}`,
},
});
},
});

const wsClient = createClient({
url: WS_URL,
connectionParams: () => ({
headers: {
Authorization: `Bearer ${localStorage.getItem("session_token")}`,
},
}),
});

export const dataProvider = graphqlDataProvider(client);
export const liveProvider = graphqlLiveProvider(wsClient);
import graphqlDataProvider, {
GraphQLClient,
liveProvider as graphqlLiveProvider,
} from "@refinedev/nestjs-query";
import { createClient } from "graphql-ws";

const client = new GraphQLClient(API_URL, {
fetch: (url: string, options: RequestInit) => {
return fetch(url, {
...options,
headers: {
...options.headers,
Authorization: `Bearer ${localStorage.getItem("session_token")}`,
},
});
},
});

const wsClient = createClient({
url: WS_URL,
connectionParams: () => ({
headers: {
Authorization: `Bearer ${localStorage.getItem("session_token")}`,
},
}),
});

export const dataProvider = graphqlDataProvider(client);
export const liveProvider = graphqlLiveProvider(wsClient);
This example includes both HTTP and WebSocket clients with session token authentication. By following these steps, you can effectively use a session token as an authorization header when creating a new GraphQL client in your refine application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3w ago
<@705425032960016475> kapa.ai is still learning and improving, please let us know how it did by reacting below