How to authenticate through Graphiql playground

Question

It's my first time using GraphQL and I'm trying to access the content of a given query but I can't access 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.

Marianelamariani

Answer 1

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.

Anabranch

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. – Marianelamariani

Answer 2

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

{
  "Authorization": "JWT your_jwt_access_token_here"
}

Robedechambre

Answer 3

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

Hemimorphic

Answer 4

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

Bohr

Answer 5

Here's an example from my company's Graphql HTTP Headers:

{ 
    "Authorization": "Bearer k1kmcDKasVAKd......" 
}

PS: Don't forget to add double quotes. Very important!

Pro-Tip: You can get your bearer token from your corporate team's login or token network call in the Google Dev tools, if you're testing your team's playground.

Benjy

How does your answer differ from the accepted answer? – Immediately