Skip to main content

GraphQL Authentication

Here's an example using simple cookie auth:

schema/endpoint.ts
export const gql = new GQLEndpoint('https://nosy-baritone.glitch.me', {
getFetchInit(init: RequestInit): RequestInit {
return {
...init,
credentials: 'same-origin',
};
},
});
export default gql;

Access Tokens

Here we'll use a member variable to track the access token and send it in a header.

schema/endpoint.ts
export const gql = new GQLEndpoint('https://nosy-baritone.glitch.me', {
getHeaders(headers: HeadersInit): HeadersInit {
return {
...headers,
'Access-Token': this.accessToken,
};
},
});
export default gql;

Then be sure to set the access token upon login:

import gql from 'schema/endpoint';

function Auth() {
const handleLogin = useCallback(
async e => {
const { accessToken } = await login(new FormData(e.target));
// success!
gql.accessToken = accessToken;
},
[login],
);

return <AuthForm onSubmit={handleLogin} />;
}

401 Logout Handling

In case a users authorization expires, the server will typically responsd to indicate as such. The standard way of doing this is with a 401. LogoutManager can be used to easily trigger any de-authorization cleanup.