Skip to content

Instantly share code, notes, and snippets.

@ConProgramming
Created November 13, 2020 00:28
Show Gist options
  • Save ConProgramming/0598e93d2d3db4c31d007233a6a04ff9 to your computer and use it in GitHub Desktop.
Save ConProgramming/0598e93d2d3db4c31d007233a6a04ff9 to your computer and use it in GitHub Desktop.
Nhost Svelte Stuffs (file names with - are for / of subdirectory)
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,
};
<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} />
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
}
}
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 };
<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}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment