Better cookie-based authentication support

[rajihawa]

how do I add the credentials: 'include' to the httpLink ?

[kateile]

I am asking my self similar question.
in react apollo we can do something like

const link = createHttpLink({
  uri: '/graphql',
  credentials: 'same-origin' //or credentials: 'include'
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link,
});

I don't know how to do this in this library. @mainawycliffe how do we do this?

[kateile]

@rajihawa have you found solution?

[rajihawa]

No, but I found a "workaround", I don't know how efficient it is though.
using the requests package.

Future<String> getCookie() async {
  Map<String, String> cookie = await Requests.getStoredCookies(
      Requests.getHostname(uri));
  try {
    return cookie.keys.first + "=" + cookie.values.first;
  } catch (e) {
    print(e);
    return '';
  }
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final HttpLink httpLink = HttpLink(
      uri: uri,
      headers: {"cookie": await getCookie()});
  ValueNotifier<GraphQLClient> client =
      ValueNotifier(GraphQLClient(link: httpLink, cache: InMemoryCache()));

  return runApp(MyApp(
    client: client,
  ));
}

[kateile]

@rajihawa thanks for response. Can you also help me how you save cookies to requests library?

[rajihawa]

@kateile you send a request to an api like that for example

Requests.post("https://api.com/login",
        bodyEncoding: RequestBodyEncoding.JSON,
        body: {
          'email': email,
          'password': password
        }) 

and the api is suppose to store the cookie as HttpOnly. and using the methods in the earlier comment I fetched the cookies.

[kateile]

@rajihawa nice trick. But the server I am working with expose only GraphQL api. I think my workaround would be to use requests to send post to graphQL endpoint.
Thanks for help

[rajihawa]

Yes that's how you would do it if your api only expose graphql endpoint, But still this workaround is not that efficient and we nned the solution that flutter_graphql should provide.
do you know anyone from the devs that can help us ?

[andrewescutia]

I too have recently run into needing this option available.

[webdev7x6]

Same

[rajihawa]

is this package still being maintained ??

[rajihawa]

I have made a new workaround that will make sure the cookies are being sent with every graphql request.
by making a custom httpClient and injecting the cookies with every request

GraphqlConfig graphqlConfig = GraphqlConfig();

Future<String> getCookie() async {
  Map<String, String> cookie = await Requests.getStoredCookies(
      Requests.getHostname("http://10.0.0.8:4000/auth/login"));
  try {
    return cookie.keys.first + "=" + cookie.values.first;
  } catch (e) {
    print(e);
    return '';
  }
}

class ClientWithCookies extends IOClient {
  @override
  Future<StreamedResponse> send(BaseRequest request) async {
    String cookie = await getCookie();
    String getCookieString(String _) => cookie;
    request.headers.update('cookie', getCookieString);
    return super.send(request).then((response) {
      return response;
    });
  }
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final HttpLink httpLink = HttpLink(
      uri: 'http://10.0.0.8:4000/graphql',
      httpClient: ClientWithCookies(),
      headers: {"cookie": await getCookie()});
  ValueNotifier<GraphQLClient> client =
      ValueNotifier(GraphQLClient(link: httpLink, cache: InMemoryCache()));

  return runApp(MyApp(
    client: client,
  ));
} 

just a note: I handle authentication outside of graphql endpoint
hope this will help

[kateile]

@rajihawa I have multiple cookies and try to extract them by using

Future<String> getCookie() async {
  try {
    final hostname = Requests.getHostname(graphqlEndpoint);
    final Map<String, String> map = await Requests.getStoredCookies(hostname);
    final List<String> array = [];

    map.forEach((key, value) => array.add(key + "=" + value));

    return array.join('; ');
  } catch (e) {
    return '';
  }
}

  final cookie = await getCookie();
  print('Cookie: $cookie');
  final HttpLink _httpLink = HttpLink(uri: graphqlEndpoint, headers: {'Cookie': cookie});

But I still get 401. Do I send cookies in correct way? If yes I think I need to set credentials: 'include' but don't know how!