80284bfa fd09 450e a81a 3e9b3a8481d3

If you’re using GraphiQL IDE provided by Helix GraphQL server, you may find that it’s not that trivial to hook it up with Firebase (Google Identity Platform) auth flow.

One way to make it work, is to inject the following code snippet into the HTML page containing GraphiQL IDE:

<script type="module"> import { initializeApp, getApp } 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: "${env.GOOGLE_CLOUD_PROJECT}", appId: "${env.FIREBASE_APP_ID}", apiKey: "${env.FIREBASE_API_KEY}", authDomain: "${env.FIREBASE_AUTH_DOMAIN}" }); 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).onAuthStateChanged((user) => { if (user) { user.getIdToken().then(token => setAuthHeader(token)); } else { setAuthHeader(null); } });

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

Source: https://www.codementor.io/koistya/graphiql-with-firebase-auth-251hx5qhz3