Added Auth0 authentication and Unleash feature toggles

dotenv

@@ -0,0 +1,5 @@
+AUTH0_CLIENTID=
+AUTH0_DOMAIN=
+UNLEASH_TOKEN=
+UNLEASH_URL=http://swarm1.titleproject.space:13001/proxy/
+UNLEASH_INTERVAL=5

package.json

@@ -8,9 +8,12 @@
     "start": "sirv public --no-clear --port 3000"
   },
   "devDependencies": {
+    "@auth0/auth0-spa-js": "^1.20.0",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "bulma": "^0.9.3",
+    "dotenv": "^16.0.0",
     "pug": "^3.0.2",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
@@ -18,7 +21,8 @@
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "svelte": "^3.0.0",
-    "svelte-preprocess": "^4.10.4"
+    "svelte-preprocess": "^4.10.4",
+    "unleash-proxy-client": "^1.11.0"
   },
   "dependencies": {
     "sirv-cli": "^2.0.0"

rollup.config.js

@@ -5,6 +5,10 @@ import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import css from 'rollup-plugin-css-only';
+import replace from '@rollup/plugin-replace';
+import dotenv from 'dotenv';
+
+dotenv.config();
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -38,6 +42,14 @@ export default {
 		file: 'public/build/bundle.js'
 	},
 	plugins: [
+		replace({
+			preventAssignment: true,
+			AUTH0_CLIENTID: JSON.stringify(process.env.AUTH0_CLIENTID),
+			AUTH0_DOMAIN: JSON.stringify(process.env.AUTH0_DOMAIN),
+			UNLEASH_INTERVAL: JSON.stringify(process.env.UNLEASH_INTERVAL),
+			UNLEASH_TOKEN: JSON.stringify(process.env.UNLEASH_TOKEN),
+			UNLEASH_URL: JSON.stringify(process.env.UNLEASH_URL)
+		}),
 		svelte({
 			preprocess: sveltePreprocess(),
 			compilerOptions: {

src/App.svelte

@@ -1,11 +1,89 @@
 <script>
-import "bulma/css/bulma.min.css";
+	import "bulma/css/bulma.min.css";
+
+	import { onMount } from "svelte";
+
+	import auth   from "./auth0";
+	import client from "./unleash";
+
+	import {
+		auth0Authenticated, auth0Claims,
+		featureImage, featureNotification, featureTable
+	} from "./store";
+
+	import Image        from "./Image.svelte";
+	import Table        from "./Table.svelte";
+	import Notification from "./Notification.svelte";
+
+	let auth0Client;
+	let authenticated;
+	let claims;
+
+	let enabledImage;
+	let enabledNotification;
+	let enabledTable;
+
+	auth0Authenticated.subscribe(value => authenticated = value);
+
+	auth0Claims.subscribe(value => {
+		claims = value;
+		let username = claims ? claims.email : "";
+		if (username) client.updateUnleashUserId(username);
+	});
+
+	featureImage.subscribe(value => enabledImage = value);
+	featureNotification.subscribe(value => enabledNotification = value);
+	featureTable.subscribe(value => enabledTable = value);
+
+	onMount(async () => {
+		auth0Client = await auth.createClient();
+
+		let isAuthenticated = await auth0Client.isAuthenticated();
+		auth0Authenticated.set(isAuthenticated);
+		if (isAuthenticated) {
+			auth0Claims.set(await auth0Client.getIdTokenClaims());
+		}
+	});
+
+	function login() {
+		auth.loginWithPopup(auth0Client);
+	}
+
+	function logout() {
+		auth.logout(auth0Client);
+	}
 </script>
 
 <template lang="pug">
 	.columns.mt-4
 		.column.is-4.is-offset-4
-			.nav-panel
-				p.panel-heading Lorem Ipsum
-				.panel-block Lorem ipsum dolor sit amet.
+			.card
+				| {#if authenticated}
+				p.card-header-title.is-centered {claims ? claims.email : ""}
+				.card-content
+					.content Logged in as {claims ? claims.name : ""} {claims ? claims.family_name : ""}
+				footer.card-footer
+					a.card-footer-item(href="/#" on:click="{logout}") Log out
+				| {:else}
+				p.card-header-title.is-centered Important
+				.card-content
+					.content Access required
+				footer.card-footer
+					a.card-footer-item(href="/#" on:click="{login}") Log in
+				| {/if}
+	| {#if authenticated}
+	.columns.mt-4
+		| {#if enabledImage}
+		.column.is-4
+			<Image/>
+		| {/if}
+		| {#if enabledNotification}
+		.column.is-4
+			<Notification/>
+		| {/if}
+		| {#if enabledTable}
+		.column.is-4
+			<Table/>
+		| {/if}
+	| {/if}
 </template>

src/Image.svelte

@@ -0,0 +1,5 @@
+<template lang="pug">
+	.box
+		figure.image.is-128x128
+			img(src="logo.png", alt="Logo example")
+</template>

src/Notification.svelte

@@ -0,0 +1,4 @@
+<template lang="pug">
+	.box
+		.notification.is-info Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</template>

src/Table.svelte

@@ -0,0 +1,21 @@
+<template lang="pug">
+	.box
+		table.table.is-striped.is-narrow.is-fullwidth
+			thead
+				tr
+					th First
+					th Second
+			tbody
+				tr
+					th 1
+					th 2
+				tr
+					th 3
+					th 4
+				tr
+					th 5
+					th 6
+			tfoot
+				tr
+					th.has-text-right(colspan="2") Test
+</template>

src/auth0.js

@@ -0,0 +1,38 @@
+import createAuth0Client from "@auth0/auth0-spa-js";
+import { auth0Authenticated, auth0Claims, auth0PopupOpen } from "./store";
+
+async function createClient() {
+  let auth0Client = await createAuth0Client({
+    client_id:     AUTH0_CLIENTID,
+    domain:        AUTH0_DOMAIN,
+    cacheLocation: "localstorage"
+  });
+
+  return auth0Client;
+}
+
+async function loginWithPopup(client, options) {
+  auth0PopupOpen.set(true);
+  try {
+    await client.loginWithPopup(options);
+
+    auth0Claims.set(await client.getIdTokenClaims());
+    auth0Authenticated.set(true);
+  } catch (e) {
+    console.error(e);
+  } finally {
+    auth0PopupOpen.set(false);
+  }
+}
+
+function logout(client) {
+  return client.logout();
+}
+
+const auth = {
+  createClient,
+  loginWithPopup,
+  logout
+};
+
+export default auth;

src/store.js

@@ -0,0 +1,9 @@
+import { writable } from "svelte/store";
+
+export const auth0Claims        = writable();
+export const auth0Authenticated = writable();
+export const auth0PopupOpen     = writable();
+
+export const featureImage        = writable();
+export const featureNotification = writable();
+export const featureTable        = writable();

src/unleash.js

@@ -0,0 +1,41 @@
+import { UnleashClient } from "unleash-proxy-client";
+import {
+  auth0Authenticated, auth0Claims,
+  featureImage, featureNotification, featureTable
+} from "./store";
+
+const unleash = new UnleashClient({
+  appName:         "svelta-app-dev",
+  clientKey:       UNLEASH_TOKEN,
+  environment:     "development",
+  refreshInterval: UNLEASH_INTERVAL,
+  url:             UNLEASH_URL
+});
+
+unleash.on("update", _ => {
+  let enabledImage        = unleash.isEnabled("Image");
+  let enabledNotification = unleash.isEnabled("Notification");
+  let enabledTable        = unleash.isEnabled("Table");
+
+  featureImage.set(enabledImage);
+  featureNotification.set(enabledNotification);
+  featureTable.set(enabledTable);
+});
+
+auth0Authenticated.subscribe(authenticated => {
+  if (authenticated) {
+    if (unleash) unleash.start();
+  } else {
+    if (unleash) unleash.stop();
+  }
+});
+
+async function updateUnleashUserId(username) {
+  unleash.updateContext({ userId: username });
+}
+
+const client = {
+  updateUnleashUserId
+}
+
+export default client;