How to authenticate through Graphiql playground

Question

It's my first time using GraphQL and im trying to access the content of a given query but i can't acces this given query because of lack of permissions, in this case I have been given a username and a password to access this GraphQL api, and i'm able to get and verify the token using these credentials in GraphQL but my question is the following, how do I become authenticated in the API to be able to access the queries of the API?

My error is as follows.

"errors": [
    {
      "message": "You do not have permission to perform this action",

I believe this is something very basic, but I just not able to find a way to solve this issue.

score 21 · Accepted Answer · answered Feb 25 '21 at 13:01

21

Click HTTP Header and add your token as shown below:

{
  "Authorization": "Bearer YOUR_TOKEN_HERE"
}

you may have to remove Bearer and only use the token, it depends on how you did authorization on the server.

answered Feb 25 '21 at 13:01

Besufkad Menji

1,433
9
13

4

thanks for your answer but I can see users have got the option to add HTTP Headers directly into they're Graphiql interface like you say, normally found next to 'Query Variables', but in my case I haven't got this option, it could be caused because the server uses an older version maybe. ¿Is there a way to add the authorization token without the HTTP Header Panel in Graphiql? Thank you for your time. – Shistastic Feb 25 '21 at 13:51

Super Kai - Kazuya Ito · Answer 2 · 2022-05-31T02:09:49.317

2

This is for JWT authentication in REQUEST HEADERS on GraphiQL below:

{
  "Authorization": "JWT your_jwt_access_token_here"
}

edited May 31 '22 at 02:09

answered May 31 '22 at 01:10

Super Kai - Kazuya Ito

22,221
10
124
129

score 0 · Answer 3 · answered Aug 10 '21 at 06:30

If anyone stumbles upon same issue, just sending the HTTP didn't work in my case, because I had this line in my @auth-directive:

let token = req?.cookies?.token

Which would only check token from cookies and never from request-headers where I was passing the Authorization-header.

Fixed the issue by changing it to:

let token = req?.cookies?.token ?? req?.headers?.authorization

Konstantin Tarkus · Answer 4 · 2023-05-24T11:20:36.290

You can also make it automatically update Authorization: ... header whenever user logs in or logs out using Firebase by injecting the following code snippet into the HTML page with GraphiQL:

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
  import { getAuth } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";

  const app = initializeApp({
    projectId: "example",
    appId: "xxxxx",
    apiKey: "xxxxx",
    authDomain: "example.com"
  });

  function setAuthHeader(token) {
    const editor = document.querySelectorAll('.variable-editor .CodeMirror')[1].CodeMirror;
    const headers = JSON.parse(editor.getValue());
    headers.Authorization = token ? "Bearer " + token : undefined;
    editor.setValue(JSON.stringify(headers, null, 2));
  }

  getAuth(app).onIdTokenChanged((user) => {
    if (user) {
      user.getIdToken().then(token => setAuthHeader(token));
    } else {
      setAuthHeader(null);
    }
  });
</script>

Find the full example at https://github.com/kriasoft/relay-starter-kit

How to authenticate through Graphiql playground

4 Answers4