Update svelte kit example

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"eslint.workingDirectories": [{ "mode": "auto" }]
+}

with-svelte-kit/src/routes/+layout.svelte

@@ -10,6 +10,8 @@
 				authorizerURL: 'http://localhost:8080',
 				redirectURL: typeof window != 'undefined' ? window.location.origin : ``
 			}}
+			onStateChangeCallback={(/** @type {any} */ state) =>
+				console.log('updated state ==>> ', state)}
 		>
 			<slot />
 		</AuthorizerProvider>

with-svelte-kit/src/routes/+page.svelte

@@ -1,53 +1,24 @@
 <script>
-	import { getContext } from 'svelte';
-	import { Authorizer } from '@authorizerdev/authorizer-svelte';
+	import { getContext, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
 
 	/**
 	 * @type {{ token: string; user: any; loading: boolean; logout: Function; }}
 	 */
 	let state;
 
-	const store = getContext('authorizerContext');
+	export const store = getContext('authorizerContext');
 
-	store.subscribe((/** @type {any} */ data) => {
+	const unsubscribe = store.subscribe((/** @type {any} */ data) => {
 		state = data;
+		if (browser) {
+			// to prevent error window is not defined, because it's SSR
+			if (state.token) {
+				window.location.href = '/dashboard';
+			} else {
+				window.location.href = '/login';
+			}
+		}
 	});
-
-	const logoutHandler = async () => {
-		await state.logout();
-	};
+	onDestroy(unsubscribe);
 </script>
-
-{#if state.token}
-	<div>
-		<h1>Hey 👋,</h1>
-		<p>Thank you for joining Authorizer demo app.</p>
-		<p>
-			Your email address is
-			<a href={`mailto:${state.user?.email}`} style="color: #3B82F6;">
-				{state.user?.email}
-			</a>
-		</p>
-		<br />
-		{#if state.loading}
-			<h3>Processing....</h3>
-		{:else}
-			<h3 style="color: #3B82F6; cursor: pointer;" on:click={logoutHandler}>Logout</h3>
-		{/if}
-	</div>
-{:else}
-	<div class="login-container">
-		<h1>Welcome to Authorizer</h1>
-		<br />
-		<Authorizer />
-	</div>
-{/if}
-
-<style>
-	.login-container {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-</style>

with-svelte-kit/src/routes/dashboard/+page.svelte

@@ -0,0 +1,39 @@
+<script>
+	import { getContext, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
+	/**
+	 * @type {{ token: string; user: any; loading: boolean; logout: Function; }}
+	 */
+	let state;
+
+	const store = getContext('authorizerContext');
+	const unsubscribe = store.subscribe((/** @type {any} */ data) => {
+		state = data;
+		// state.loading should be true when the token is not set initially
+		// if (!state.loading && !state.token && browser) {
+		// 	window.location.href = '/login';
+		// }
+	});
+	onDestroy(unsubscribe);
+	const logoutHandler = async () => {
+		await state.logout();
+		if (browser) window.location.href = '/login';
+	};
+</script>
+
+<div>
+	<h1>Hey 👋,</h1>
+	<p>Thank you for joining Authorizer demo app.</p>
+	<p>
+		Your email address is
+		<a href={`mailto:${state.user?.email}`} style="color: #3B82F6;">
+			{state.user?.email}
+		</a>
+	</p>
+	<br />
+	{#if state.loading}
+		<h3>Processing....</h3>
+	{:else}
+		<h3 style="color: #3B82F6; cursor: pointer;" on:click={logoutHandler}>Logout</h3>
+	{/if}
+</div>

with-svelte-kit/src/routes/login/+page.svelte

@@ -0,0 +1,32 @@
+<script>
+	import { getContext, onDestroy } from 'svelte';
+	import { Authorizer } from '@authorizerdev/authorizer-svelte';
+	import { browser } from '$app/environment';
+
+	const store = getContext('authorizerContext');
+
+	const unsubscribe = store.subscribe(
+		(/** @type {{ token: string; loading: boolean; }} */ data) => {
+			if (!data.loading && data.token && browser) {
+				window.location.href = '/dashboard';
+			}
+		}
+	);
+
+	onDestroy(unsubscribe);
+</script>
+
+<div class="login-container">
+	<h1>Welcome to Authorizer</h1>
+	<br />
+	<Authorizer />
+</div>
+
+<style>
+	.login-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

with-svelte-kit/src/routes/reset-password/+page.svelte

@@ -1,7 +1,10 @@
 <script>
 	import { AuthorizerResetPassword } from '@authorizerdev/authorizer-svelte';
+	const resetHandler = () => {
+		window.location.href = '/login';
+	};
 </script>
 
 <h1 style="text-align: center;">Reset Password</h1>
 <br />
-<AuthorizerResetPassword />
+<AuthorizerResetPassword onReset={resetHandler} />

with-svelte-kit/tsconfig.json

@@ -8,7 +8,8 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
+		"ignoreDeprecations": "5.0"
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//

with-vue-js/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

with-vue-js/README.md

@@ -0,0 +1,15 @@
+# Authorizer Example with Vue JS
+
+## Local Setup
+
+- Clone the repo `git clone https://github.com/authorizerdev/examples.git`
+- Change directory to react JS `cd with-vue-js`
+- Install dependencies `yarn install`
+- Start project `yarn serve`
+- To get a minified production build `yarn build`
+- Lint and fix files `yarn lint`
+
+## CodeSandboxLink:
+
+- App: https://dzfgp8.csb.app/
+- Code: https://codesandbox.io/s/authorizer-vue-example-dzfgp8

with-vue-js/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

with-vue-js/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

with-vue-js/package.json

@@ -0,0 +1,47 @@
+{
+	"name": "with-vue-js",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"serve": "vue-cli-service serve --port 3000",
+		"build": "vue-cli-service build",
+		"lint": "vue-cli-service lint"
+	},
+	"dependencies": {
+		"authorizer-vue-ts": "^1.0.8",
+		"core-js": "^3.8.3",
+		"vue": "^3.2.13",
+		"vue-router": "^4.1.6"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.12.16",
+		"@babel/eslint-parser": "^7.12.16",
+		"@vue/cli-plugin-babel": "~5.0.0",
+		"@vue/cli-plugin-eslint": "~5.0.0",
+		"@vue/cli-service": "~5.0.0",
+		"eslint": "^7.32.0",
+		"eslint-plugin-vue": "^8.0.3"
+	},
+	"eslintConfig": {
+		"root": true,
+		"env": {
+			"node": true
+		},
+		"extends": [
+			"plugin:vue/vue3-essential",
+			"eslint:recommended"
+		],
+		"parserOptions": {
+			"parser": "@babel/eslint-parser"
+		},
+		"rules": {
+			"vue/multi-word-component-names": "off"
+		}
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not dead",
+		"not ie 11"
+	]
+}

with-vue-js/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>