CODEWITHSUNDEEP
authenticationgraphqlrequest-headersgraphiql
Shistastic
Shistastic

Reputation: 319

How to authenticate through Graphiql playground

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.

Upvotes: 13

Views: 29727

Answers (5)

Michael Truong
Michael Truong

Reputation: 29

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.

Upvotes: 1

Konstantin Tarkus
Konstantin Tarkus

Reputation: 38428

enter image description here

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

Upvotes: 0

Super Kai - Kazuya Ito
Super Kai - Kazuya Ito

Reputation: 1

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

{
  "Authorization": "JWT your_jwt_access_token_here"
}

Upvotes: 2

Ilmari Kumpula
Ilmari Kumpula

Reputation: 1493

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

Upvotes: 0

Besufkad Menji
Besufkad Menji

Reputation: 1588

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.

Upvotes: 29

Related Questions