Nhost Svelte Stuffs (file names with - are for / of subdirectory)

pageql.config.js

import { auth } from "./src/js/nhost.js";
import { initClient, getClient } from "./src/js/graphqlClient.js";

export default {
  auth: {
    checkRole: (requiredRole) => {
      //Used by pageql:authRole directive
      //Return false if user's role fails to hit specifications
      //Returning false hides the component

      return !window.pageql.user.role.includes(requiredRole);
    },
    doLogin: async (loginCallback, event) => {
      //Used by pageql:authLogin directive
      //Can get value of "password" input with event.target.password.value
      //Do login logic here
      try {
        await auth.login(event.target.email.value, event.target.password.value);

        window.pageql.user = {
          userId: auth.getClaim("x-hasura-user-id"),
          role: ["admin"]  //TODO Get based off login response
        };
        window.pageql.authState.set({ loggedIn: true });
        initClient();
      } catch (error) {
        console.log(error)
        window.pageql.authState.set({ loggedIn: false });
      }

      loginCallback();
    },
    doLogout: async (logoutCallback, event) => {
      //Used by pageql:authLogout directive
      try {
        auth.logout();
        window.pageql.authState.set({ loggedIn: false });
        logoutCallback();
      } catch (error) {
        console.log(error)
      }
    },
    doRegister: (registerCallback, event) => {
      //Used by pageql:authRegister directive
      //Can get value of "password" input with event.target.password.value

      //Do register logic here

      window.pageql.user = {
        name: event.target.email.value,
        role: ["admin"],  //TODO Get based off register response
      };

      window.pageql.authState.set({ loggedIn: true });

      registerCallback();
    },
    getUserId: () => {
      //Custom functions like this can be defined and accessed anywhere with window.pageql.auth.getUserId()
      return auth.getClaim("x-hasura-user-id");;
    },
  },
  getClient,
};

src-App.svelte

  
<script>
  import { Router } from "@sveltech/routify";
  import { routes } from "../.routify/routes";
  import pageqlConfig from "../pageql.config.js";
  import { writable } from "svelte/store";
  window.pageql = {};
  window.pageql.authState = writable({ loggedIn: false });
  window.pageql.auth = pageqlConfig.auth;
  window.pageql.user = {};
  window.pageql.getClient = pageqlConfig.getClient;
  window.pageql.notification = writable({});
  const authState = window.pageql.authState;
</script>

<Router {routes} />

src-js-graphqlClient.js

import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { WebSocketLink } from "apollo-link-ws";
import { split } from "apollo-link";
import { HttpLink } from "apollo-link-http";
import { getMainDefinition } from "apollo-utilities";
import WebSocket from 'isomorphic-ws';
import { auth } from '../js/nhost.js'

let client;
let lastInit;

function addMinutes(date, minutes) {
  return new Date(date.getTime() + minutes*60000);
}

export const getClient = () => {
    if(addMinutes(lastInit, 10) <= new Date()){
      initClient(true);
    }
    return client;
}

export const initClient = (forceRefresh = false) => {
  if (!client || forceRefresh) {
    lastInit = new Date()
    const getHeaders = () => {
      const token = auth.getJWTToken();
      const headers = {'content-type': 'application/json', 'authorization': token ? `Bearer ${token}` : ""};

      return headers;
    };

    const cache = new InMemoryCache();

    const wsLink = new WebSocketLink({
      uri: "ws://*nhosturl*",
      options: {
        reconnect: true,
        lazy: true,
        connectionParams: () => {
          return { headers: getHeaders() };
        },
      },
      webSocketImpl: WebSocket,
    });

    const httpLink = new HttpLink({
      uri: "https://*nhosturl*",
      headers: getHeaders(),
      fetch: window.fetch
    });

    const link = split(
      ({ query }) => {
        const { kind, operation } = getMainDefinition(query);
        return kind === "OperationDefinition" && operation === "subscription";
      },
      wsLink,
      httpLink
    );

    let newClient = new ApolloClient({
      link,
      cache
    });

    client = newClient;
  }
}

const timeStep = (timeInterval, timeExpected) => {
    const drift = Date.now() - timeExpected; // the drift (positive for overshooting)
    if (drift > timeInterval) {
        // something really bad happened. Maybe the browser (tab) was inactive?
        window.open('/login');
    } else {
      initClient(true);
      setTimeout(() => timeStep(timeInterval, timeExpected + timeInterval), Math.max(0, timeInterval - drift)); // take into account drift
    }
}

src-js-nhost.js

import nhost from "nhost-js-sdk";

const config = {
  base_url: "*nhosturl*"
};

nhost.initializeApp(config);
const auth = nhost.auth();
const storage = nhost.storage();

export { auth, storage };

src-pages-app-_layout.svelte

<script>
  import { goto, url, page, beforeUrlChange } from "@sveltech/routify";
  import { auth } from "../../js/nhost.js";
  import { initClient, getClient } from "../../js/graphqlClient.js";
  import { onMount } from "svelte";
  import { gql } from "apollo-boost";
  import NotificationDialog from "./_Components/NotificationDialog.svelte";
  import Nav from "./_Components/Nav.svelte";
  let navMenu = false;
  let loggedin;
  $beforeUrlChange((event, store) => {
    if (navMenu) {
      navMenu = false;
      return true;
    } else return true;
  });
  const USER_QUERY = `
    query {
      users {
        display_name
      }
    }
  `;
  const getUser = async () => {
    //TODO: Get this in pageql config or smthn
    if (window.pageql.getClient()) {
      const userData = await window.pageql.getClient().query({
        query: gql`
          ${USER_QUERY}
        `,
        variables: {},
      });
      window.pageql.user.displayName = userData.data["users"][0]["display_name"];
      loggedin = true
    }
  }
  auth.onAuthStateChanged((logged_in) => {
    if (logged_in) {
      window.pageql.user = {
        userId: auth.getClaim("x-hasura-user-id"),
        role: ["admin"], //TODO: Get based off of login response
      };
      window.pageql.authState.set({ loggedIn: true });
      initClient();
      getUser();
e
    }else{
      loggedin = false
    }
  });
  if (auth.isAuthenticated()) {
    initClient();
    getUser();
  }
</script>

{#if loggedin != null}
  {#if loggedin}
    <div class="md:block">
      <div class="relative min-h-screen flex flex-col">
        <Nav bind:navMenu />
        <slot />
      </div>
      <NotificationDialog/>
    </div>
  {:else}
    {$goto('/login')}
    <div class="flex h-screen">
      <div class="flex flex-col m-auto text-center">
        <span class="text-lg font-bold">You must login first!</span>
        <span class="text-md">
          Click here to login:
          <a class="underline text-green-600" href="/login">Login</a>
        </span>
      </div>
    </div>
  {/if}
{:else}
  <div class="flex h-screen">
    <div class="flex flex-col m-auto text-center">
      <span class="text-lg font-bold">You must login first!</span>
      <span class="text-md">
        Click here to login:
        <a class="underline text-green-600" href="/login">Login</a>
      </span>
    </div>
  </div>
{/if}

src-pages-Login.svelte

<script>
  import { goto } from "@sveltech/routify";
  import Logo from "./_Components/Logo.svelte"
  const authState = window.pageql.authState;
  import { auth } from "../js/nhost.js";
  let error = false;
  const loginCallback = () => {
    loggingIn = false;
    if ($authState.loggedIn) {
      $goto("/app");
    } else {
      error = true;
    }
  };
  let loggingIn = false;
  let loggedin = null;
  auth.onAuthStateChanged(logged_in => {
    loggedin = logged_in;
    if (logged_in) {
      $goto("/app")
    }
  });
  if (auth.isAuthenticated()) {
    loggedin = true;
  }
</script>

<form pageql:authLogin={loginCallback} on:submit={() => {loggingIn = true}}>
           <!-- Form Body -->
</form>