├── .eslintrc.json
├── .gitignore
├── .husky
    └── pre-commit
├── .prettierrc
├── LICENSE
├── README.md
├── env.d.ts
├── example
    ├── App.vue
    ├── assets
    │   └── main.css
    ├── main.ts
    ├── router.ts
    └── views
    │   ├── Dashboard.vue
    │   ├── Login.vue
    │   └── ResetPassword.vue
├── favicon.ico
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── components
    │   ├── AuthorizerBasicAuthLogin.vue
    │   ├── AuthorizerForgotPassword.vue
    │   ├── AuthorizerMagicLinkLogin.vue
    │   ├── AuthorizerProvider.vue
    │   ├── AuthorizerResetPassword.vue
    │   ├── AuthorizerRoot.vue
    │   ├── AuthorizerSignup.vue
    │   ├── AuthorizerSocialLogin.vue
    │   ├── AuthorizerVerifyOtp.vue
    │   ├── Message.vue
    │   └── PasswordStrengthIndicator.vue
    ├── constants
    │   └── index.ts
    ├── icons
    │   ├── Apple.vue
    │   ├── Close.vue
    │   ├── Discord.vue
    │   ├── Facebook.vue
    │   ├── Github.vue
    │   ├── Google.vue
    │   ├── Linkedin.vue
    │   ├── Microsoft.vue
    │   ├── Roblox.vue
    │   └── Twitter.vue
    ├── index.ts
    ├── shims-vue.d.ts
    ├── state
    │   ├── globalConfig.ts
    │   └── globalContext.ts
    ├── styledComponents
    │   ├── StyledButton.vue
    │   ├── StyledFlex.vue
    │   ├── StyledFooter.vue
    │   ├── StyledLink.vue
    │   ├── StyledMessageWrapper.vue
    │   ├── StyledPasswordStrength.vue
    │   ├── StyledPasswordStrengthWrapper.vue
    │   ├── StyledSeparator.vue
    │   ├── StyledWrapper.vue
    │   └── index.ts
    ├── styles
    │   └── default.css
    ├── types
    │   └── index.ts
    └── utils
    │   ├── common.ts
    │   ├── url.ts
    │   └── window.ts
├── tsconfig.app.json
├── tsconfig.build-types.json
├── tsconfig.config.json
├── tsconfig.json
└── vite.config.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"parser": "vue-eslint-parser", // Use the vue-eslint-parser to parse Vue.js files
 3 | 	"parserOptions": {
 4 | 		"parser": "@typescript-eslint/parser", // Use the @typescript-eslint/parser to parse TypeScript files
 5 | 		"ecmaVersion": 2020,
 6 | 		"sourceType": "module"
 7 | 	},
 8 | 	"extends": [
 9 | 		"plugin:vue/recommended", // Use the recommended rules for Vue.js from the vue plugin
10 | 		"plugin:prettier-vue/recommended", // Use the recommended rules for Prettier with Vue.js from the prettier-vue plugin
11 | 		"plugin:@typescript-eslint/recommended" // Use the recommended rules for TypeScript from the @typescript-eslint plugin
12 | 	],
13 | 	"settings": {
14 | 		"prettier-vue": {
15 | 			"SFCBlocks": {
16 | 				// Specify which blocks in Vue SFCs should be processed by Prettier
17 | 				"template": true,
18 | 				"script": true,
19 | 				"style": true,
20 | 				"customBlocks": {
21 | 					"docs": { "lang": "markdown" },
22 | 					"config": { "lang": "json" },
23 | 					"module": { "lang": "js" },
24 | 					"comments": false
25 | 				}
26 | 			},
27 | 			"usePrettierrc": true, // Use the Prettier configuration file in the project root
28 | 			"fileInfoOptions": {
29 | 				"ignorePath": ".testignore", // Ignore files listed in the .testignore file
30 | 				"withNodeModules": false // Ignore files in the node_modules directory
31 | 			}
32 | 		}
33 | 	},
34 | 	"rules": {
35 | 		"prettier-vue/prettier": [
36 | 			"error",
37 | 			{
38 | 				// Specify Prettier options for Vue.js files
39 | 				"useTabs": true,
40 | 				"printWidth": 100,
41 | 				"singleQuote": true,
42 | 				"trailingComma": "none"
43 | 			}
44 | 		],
45 | 		"@typescript-eslint/no-unused-vars": [
46 | 			"error",
47 | 			{ "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" } // Ignore unused variables that start with an underscore in TypeScript files
48 | 		],
49 | 		"vue/multi-word-component-names": "off" // Disable the multi-word-component-names rule from the vue plugin
50 | 	},
51 | 	"overrides": [
52 | 		{
53 | 			"files": ["*.ts", "*.tsx"],
54 | 			"rules": {
55 | 				"no-undef": "off" // Disable the no-undef rule for TypeScript files
56 | 			}
57 | 		}
58 | 	]
59 | }
60 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .DS_Store
3 | node_modules
4 | .cache
5 | dist
6 | .parcel-cache
7 | .yalc


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | git stash --keep-index -u
5 | npm run format
6 | git add .
7 | npm run lint
8 | git stash apply


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"singleQuote": true,
4 | 	"trailingComma": "none",
5 | 	"printWidth": 100
6 | }
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 authorizer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # authorizer-vue
  2 | 
  3 | Authorizer Vue SDK allows you to implement authentication in your [Vue](https://vuejs.org/) application quickly. It also allows you to access the user profile.
  4 | 
  5 | Here is a quick guide on getting started with `@authorizerdev/authorizer-vue` package.
  6 | 
  7 | <!-- Todo: update code sandbox link -->
  8 | 
  9 | ## Code Sandbox Demo: https://codesandbox.io/s/authorizer-vue-example-700l1h
 10 | 
 11 | ## Step 1 - Create Instance
 12 | 
 13 | Get Authorizer URL by instantiating [Authorizer instance](/deployment) and configuring it with necessary [environment variables](/core/env).
 14 | 
 15 | ## Step 2 - Install package
 16 | 
 17 | Install `@authorizerdev/authorizer-vue` library
 18 | 
 19 | ```sh
 20 | npm i --save @authorizerdev/authorizer-vue
 21 | OR
 22 | yarn add @authorizerdev/authorizer-vue
 23 | ```
 24 | 
 25 | ## Step 3 - Configure Provider and use Authorizer Components
 26 | 
 27 | Authorizer comes with a [Provider](https://vuejs.org/api/composition-api-dependency-injection.html#provide) component that exposes a composable function to return a [reactive](https://vuejs.org/api/reactivity-core.html#reactive) context to it's children by using the `useAuthorizer` injection key, internally [toRefs](https://vuejs.org/api/reactivity-utilities.html#torefs) are used when returning the reactive state so that the consuming component(s) can destructure/spread the returned object without losing reactivity and each property could be watched to perform actions accordingly.
 28 | 
 29 | ```vue
 30 | <template>
 31 | 	<div :style="{ display: 'flex', justifyContent: 'center' }">
 32 | 		<authorizer-provider
 33 | 			:config="{
 34 | 				authorizerURL: 'http://localhost:8080',
 35 | 				redirectURL: window.location.origin,
 36 | 				clientID: 'AUTHORIZER_CLIENT_ID'
 37 | 			}"
 38 | 			:onStateChangeCallback="stateChangeCallback"
 39 | 		>
 40 | 			<router-view />
 41 | 		</authorizer-provider>
 42 | 	</div>
 43 | </template>
 44 | 
 45 | <script lang="ts">
 46 | import { AuthorizerProvider } from '@authorizerdev/authorizer-vue';
 47 | import type { AuthorizerState } from '@authorizerdev/authorizer-vue/dist/types/types';
 48 | 
 49 | export default {
 50 | 	components: {
 51 | 		'authorizer-provider': AuthorizerProvider
 52 | 	},
 53 | 	setup() {
 54 | 		const stateChangeCallback = (state: AuthorizerState) => {
 55 | 			console.log('state changed ==>> ', state);
 56 | 		};
 57 | 		return {
 58 | 			stateChangeCallback,
 59 | 			window
 60 | 		};
 61 | 	}
 62 | };
 63 | </script>
 64 | ```
 65 | 
 66 | ```vue
 67 | <template>
 68 | 	<div>
 69 | 		<h1 :style="{ textAlign: 'center' }">Welcome to Authorizer</h1>
 70 | 		<br />
 71 | 		<authorizer-root :onLogin="onLogin" />
 72 | 	</div>
 73 | </template>
 74 | 
 75 | <script lang="ts">
 76 | import { inject, watch } from 'vue';
 77 | import { useRouter } from 'vue-router';
 78 | import { AuthorizerRoot } from '@authorizerdev/authorizer-vue';
 79 | import type { AuthorizerContextOutputType } from '@authorizerdev/authorizer-vue/dist/types/types';
 80 | 
 81 | export default {
 82 | 	name: 'Login',
 83 | 	components: {
 84 | 		'authorizer-root': AuthorizerRoot
 85 | 	},
 86 | 	setup() {
 87 | 		const useAuthorizer = inject('useAuthorizer') as () => AuthorizerContextOutputType;
 88 | 		const { token, config } = useAuthorizer?.();
 89 | 		const router = useRouter();
 90 | 		const onLogin = () => {
 91 | 			console.log('test login');
 92 | 		};
 93 | 		watch(
 94 | 			token,
 95 | 			(newvalue) => {
 96 | 				if (newvalue) {
 97 | 					console.log('access token ==>> ', token?.value?.access_token);
 98 | 					router.push('/dashboard');
 99 | 				}
100 | 			},
101 | 			{
102 | 				immediate: true
103 | 			}
104 | 		);
105 | 		config &&
106 | 			watch(config.is_basic_authentication_enabled, (newvalue, oldvalue) => {
107 | 				console.log('basic auth enabled (old value) ==>> ', oldvalue);
108 | 				console.log('basic auth enabled (new value) ==>> ', newvalue);
109 | 			});
110 | 		return {
111 | 			onLogin
112 | 		};
113 | 	}
114 | };
115 | </script>
116 | ```
117 | 
118 | ## Commands
119 | 
120 | ### Local Development
121 | 
122 | ### The recommended workflow is to run authorizer in one terminal:
123 | 
124 | ```bash
125 | npm run dev # or yarn dev
126 | ```
127 | 
128 | This starts a local dev-server with a sandbox environment.
129 | 
130 | ```bash
131 | npm run build # or yarn build
132 | ```
133 | 
134 | This uses Vite to build the project files to `/dist` and call `build:types` script.
135 | 
136 | ```bash
137 | npm run build:types # or yarn build:types
138 | ```
139 | 
140 | This generates TypeScript declaration files for our .vue files (using `vue-tsc`).
141 | 
142 | ```bash
143 | npm run typecheck # or yarn typecheck
144 | ```
145 | 
146 | This runs a typecheck against our Vue components to make sure there are no type errors (using `vue-tsc`).
147 | 
148 | ## Configuration
149 | 
150 | ### Typescript:
151 | 
152 | - Root tsconfig: `tsconfig.json` contains a reference to all the others tsconfig files.
153 | - Components tsconfig: `tsconfig.app.json` will take care of compiling our Vue components inside `src/`.
154 | - Build-types tsconfig: `tsconfig.build-types.json` will take care of generating the proper types declaration files of our Vue components inside `src/`.
155 | - Tools tsconfig: `tsconfig.config.json` will take care of all our tooling configuration files (we only have vite at the moment).
156 | 
157 | ### Vite:
158 | 
159 | - Vite requires a configuration to compile and bundle `.vue` to `.js` files that can be consumed through an npm module. It uses [rollup.js](https://rollupjs.org/) under the hood, check out the comments in `vite.config.ts` file in the project root to learn more about the configuarition details.
160 | 
161 | ### Eslint:
162 | 
163 | - All required linting configurations are specified in the `.elsintrc.json` file in the project root, check the comments in each section to learn more about the configuarition details.
164 | 
165 | ### Prettier:
166 | 
167 | - We have the `"usePrettierrc"` option set to true in the `eslint` configuration file which tells the `prettier-vue` plugin to use the Prettier configuration file `.prettierrc` in the project root directory and override any default settings.
168 | 
169 | ### Husky:
170 | 
171 | - A pre-commit hook is set in `.husky/pre-commit` which formats the code and checks for any linting errors.
172 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div :style="{ display: 'flex', justifyContent: 'center' }">
 3 | 		<div
 4 | 			:style="{
 5 | 				width: '400px',
 6 | 				margin: `10px auto`,
 7 | 				border: `1px solid #D1D5DB`,
 8 | 				padding: `25px 20px`,
 9 | 				'border-radius': `5px`
10 | 			}"
11 | 		>
12 | 			<authorizer-provider
13 | 				:config="{
14 | 					authorizerURL: 'http://localhost:8080',
15 | 					redirectURL: window.location.origin
16 | 				}"
17 | 				:on-state-change-callback="stateChangeCallback"
18 | 			>
19 | 				<router-view />
20 | 			</authorizer-provider>
21 | 		</div>
22 | 	</div>
23 | </template>
24 | 
25 | <script lang="ts">
26 | import type { AuthorizerState } from '../src/types';
27 | import { AuthorizerProvider } from '../src';
28 | 
29 | export default {
30 | 	components: {
31 | 		'authorizer-provider': AuthorizerProvider
32 | 	},
33 | 	setup() {
34 | 		const stateChangeCallback = (state: AuthorizerState) => {
35 | 			console.log('state changes from client ==>> ', state);
36 | 		};
37 | 		return {
38 | 			stateChangeCallback,
39 | 			window
40 | 		};
41 | 	}
42 | };
43 | </script>
44 | 
45 | <style scoped></style>
46 | 


--------------------------------------------------------------------------------
/example/assets/main.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	font-family: -apple-system, system-ui, sans-serif;
 3 | 	color: #374151;
 4 | 	font-size: 14px;
 5 | }
 6 | 
 7 | *,
 8 | *:before,
 9 | *:after {
10 | 	box-sizing: inherit;
11 | }
12 | 
13 | #app {
14 | 	display: flex;
15 | 	height: 100vh;
16 | 	flex-direction: column;
17 | 	justify-content: center;
18 | 	align-items: center;
19 | }
20 | 


--------------------------------------------------------------------------------
/example/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | 
3 | import App from './App.vue';
4 | import router from './router';
5 | import '../src/styles/default.css';
6 | import './assets/main.css';
7 | 
8 | createApp(App).use(router).mount('#app');
9 | 


--------------------------------------------------------------------------------
/example/router.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router';
 2 | import Login from './views/Login.vue';
 3 | import ResetPassword from './views/ResetPassword.vue';
 4 | import Dashboard from './views/Dashboard.vue';
 5 | 
 6 | export default createRouter({
 7 | 	history: createWebHistory(),
 8 | 	routes: [
 9 | 		{
10 | 			path: '/',
11 | 			component: Login
12 | 		},
13 | 		{
14 | 			path: '/reset-password',
15 | 			component: ResetPassword
16 | 		},
17 | 		{
18 | 			path: '/dashboard',
19 | 			component: Dashboard
20 | 		}
21 | 	]
22 | });
23 | 


--------------------------------------------------------------------------------
/example/views/Dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<h1>Hey 👋,</h1>
 4 | 		<p>Thank you for joining Authorizer demo app.</p>
 5 | 		<p>
 6 | 			Your email address is
 7 | 			<a
 8 | 				href="`mailto:${user?.email}`"
 9 | 				:style="{
10 | 					color: '#3B82F6'
11 | 				}"
12 | 			>
13 | 				{{ user?.email }}
14 | 			</a>
15 | 		</p>
16 | 
17 | 		<br />
18 | 		<h3 v-if="loading">Processing....</h3>
19 | 		<h3
20 | 			v-else
21 | 			:style="{
22 | 				color: '#3B82F6',
23 | 				cursor: 'pointer'
24 | 			}"
25 | 			@click="logout"
26 | 		>
27 | 			Logout
28 | 		</h3>
29 | 	</div>
30 | </template>
31 | 
32 | <script lang="ts">
33 | import { inject, watch } from 'vue';
34 | import { useRouter } from 'vue-router';
35 | import type { AuthorizerContextOutputType } from '../../src/types';
36 | export default {
37 | 	name: 'Dashboard',
38 | 	setup() {
39 | 		const useAuthorizer = inject('useAuthorizer') as () => AuthorizerContextOutputType;
40 | 		const { user, loading, token, logout } = useAuthorizer?.();
41 | 		const router = useRouter();
42 | 		watch(
43 | 			token,
44 | 			function (newvalue) {
45 | 				if (!newvalue) {
46 | 					router.push('/');
47 | 				}
48 | 			},
49 | 			{
50 | 				immediate: true
51 | 			}
52 | 		);
53 | 		return {
54 | 			user,
55 | 			loading,
56 | 			logout
57 | 		};
58 | 	}
59 | };
60 | </script>
61 | 
62 | <style scoped></style>
63 | 


--------------------------------------------------------------------------------
/example/views/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<h1 :style="{ textAlign: 'center' }">Welcome to Authorizer</h1>
 4 | 		<br />
 5 | 		<authorizer-root :on-login="onLogin" />
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import { inject, watch } from 'vue';
11 | import { useRouter } from 'vue-router';
12 | import { AuthorizerRoot } from '../../src';
13 | import type { AuthorizerContextOutputType } from '../../src/types';
14 | export default {
15 | 	name: 'Login',
16 | 	components: {
17 | 		'authorizer-root': AuthorizerRoot
18 | 	},
19 | 	setup() {
20 | 		const useAuthorizer = inject('useAuthorizer') as () => AuthorizerContextOutputType;
21 | 		const { token, config } = useAuthorizer?.();
22 | 		const router = useRouter();
23 | 		const onLogin = () => {
24 | 			console.log('test login');
25 | 		};
26 | 		watch(
27 | 			token,
28 | 			(newvalue) => {
29 | 				if (newvalue) {
30 | 					console.log('access token ==>> ', token?.value?.access_token);
31 | 					router.push('/dashboard');
32 | 				}
33 | 			},
34 | 			{
35 | 				immediate: true
36 | 			}
37 | 		);
38 | 		config &&
39 | 			watch(config.is_basic_authentication_enabled, (newvalue, oldvalue) => {
40 | 				console.log('basic auth enabled (old value) ==>> ', oldvalue);
41 | 				console.log('basic auth enabled (new value) ==>> ', newvalue);
42 | 			});
43 | 		return {
44 | 			onLogin
45 | 		};
46 | 	}
47 | };
48 | </script>
49 | 
50 | <style scoped></style>
51 | 


--------------------------------------------------------------------------------
/example/views/ResetPassword.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<h1 :style="{ textAlign: 'center' }">Reset Password</h1>
 4 | 		<br />
 5 | 		<authorizer-reset-password />
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import { AuthorizerResetPassword } from '../../src';
11 | 
12 | export default {
13 | 	name: 'ResetPassword',
14 | 	components: {
15 | 		'authorizer-reset-password': AuthorizerResetPassword
16 | 	}
17 | };
18 | </script>
19 | 
20 | <style scoped></style>
21 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/authorizerdev/authorizer-vue/5cd64fc498a1b8c8bf605987160e179104b0ebd1/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!-- index.html -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | 	<head>
 5 | 		<meta charset="UTF-8" />
 6 | 		<link rel="icon" href="/favicon.ico" />
 7 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 9 | 		<title>Authorizer Demo App</title>
10 | 	</head>
11 | 
12 | 	<body>
13 | 		<div id="app"></div>
14 | 		<script type="module" src="./example/main.ts"></script>
15 | 	</body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "@authorizerdev/authorizer-vue",
 3 | 	"version": "1.0.0",
 4 | 	"description": "authorizer vue sdk",
 5 | 	"files": [
 6 | 		"dist"
 7 | 	],
 8 | 	"main": "dist/@authorizerdev/authorizer-vue.umd.js",
 9 | 	"module": "dist/@authorizerdev/authorizer-vue.es.js",
10 | 	"types": "dist/types/index.d.ts",
11 | 	"scripts": {
12 | 		"dev": "vite",
13 | 		"build": "vite build && npm run build:types",
14 | 		"build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types ",
15 | 		"typecheck": "vue-tsc --project tsconfig.build-types.json --noEmit",
16 | 		"lint": "prettier --plugin-search-dir . --check . --ignore-path .gitignore && eslint . --ignore-path .gitignore",
17 | 		"format": "prettier --plugin-search-dir . --write . --ignore-path .gitignore",
18 | 		"prepare": "husky install"
19 | 	},
20 | 	"keywords": [],
21 | 	"author": "Lakhan Samani",
22 | 	"license": "MIT",
23 | 	"bugs": {
24 | 		"url": "https://github.com/authorizerdev/authorizer-vue/issues"
25 | 	},
26 | 	"homepage": "https://github.com/authorizerdev/authorizer-vue#readme",
27 | 	"devDependencies": {
28 | 		"@babel/types": "^7.21.4",
29 | 		"@tsconfig/node18": "^2.0.0",
30 | 		"@types/node": "^18.15.13",
31 | 		"@typescript-eslint/eslint-plugin": "^5.59.1",
32 | 		"@typescript-eslint/parser": "^5.59.1",
33 | 		"@vitejs/plugin-vue": "^4.1.0",
34 | 		"@vue/tsconfig": "^0.2.0",
35 | 		"eslint": "^8.39.0",
36 | 		"eslint-config-prettier": "^8.8.0",
37 | 		"eslint-plugin-prettier-vue": "^4.2.0",
38 | 		"eslint-plugin-vue": "^9.11.0",
39 | 		"husky": "^8.0.3",
40 | 		"prettier": "^2.8.8",
41 | 		"sass": "^1.62.0",
42 | 		"typescript": "^5.0.4",
43 | 		"vite": "^4.3.1",
44 | 		"vue": "^3.2.47",
45 | 		"vue-eslint-parser": "^9.1.1",
46 | 		"vue-router": "^4.1.6",
47 | 		"vue-tsc": "^1.4.2"
48 | 	},
49 | 	"dependencies": {
50 | 		"@authorizerdev/authorizer-js": "^1.2.3"
51 | 	}
52 | }
53 | 


--------------------------------------------------------------------------------
/src/components/AuthorizerBasicAuthLogin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div v-if="otpData.isScreenVisible.value && otpData.email.value">
  3 | 		<authorizer-verify-otp
  4 | 			:set-view="setView"
  5 | 			:on-login="onLogin"
  6 | 			:email="otpData.email.value"
  7 | 			:url-props="urlProps"
  8 | 		/>
  9 | 	</div>
 10 | 	<div v-else>
 11 | 		<div>
 12 | 			<template v-if="error">
 13 | 				<message :type="MessageType.Error" :text="error" @close="onErrorClose" />
 14 | 			</template>
 15 | 			<form @submit.prevent="onSubmit">
 16 | 				<!-- Email -->
 17 | 				<div class="styled-form-group">
 18 | 					<label class="form-input-label" for="authorizer-login-email"><span>* </span>Email</label>
 19 | 					<input
 20 | 						id="authorizer-login-email"
 21 | 						v-model="email"
 22 | 						:class="`form-input-field ${emailError ? 'input-error-content' : null}`"
 23 | 						placeholder="eg. foo@bar.com"
 24 | 						type="email"
 25 | 					/>
 26 | 					<div v-if="emailError" class="form-input-error">{{ emailError }}</div>
 27 | 				</div>
 28 | 
 29 | 				<!-- password -->
 30 | 				<div class="styled-form-group">
 31 | 					<label class="form-input-label" for="authorizer-login-password"
 32 | 						><span>* </span>Password</label
 33 | 					>
 34 | 					<input
 35 | 						id="authorizer-login-password"
 36 | 						v-model="password"
 37 | 						:class="`form-input-field ${passwordError ? 'input-error-content' : null}`"
 38 | 						placeholder="********"
 39 | 						type="password"
 40 | 					/>
 41 | 					<div v-if="passwordError" class="form-input-error">
 42 | 						{{ passwordError }}
 43 | 					</div>
 44 | 				</div>
 45 | 				<br />
 46 | 				<styled-button
 47 | 					:appearance="ButtonAppearance.Primary"
 48 | 					:disabled="!!emailError || !!passwordError || !email || !password"
 49 | 				>
 50 | 					<template v-if="loading">Processing ...</template>
 51 | 					<template v-else>Log In</template>
 52 | 				</styled-button>
 53 | 			</form>
 54 | 			<template v-if="setView">
 55 | 				<styled-footer>
 56 | 					<styled-link
 57 | 						:style="{ marginBottom: '10px' }"
 58 | 						@click="() => setView(Views.ForgotPassword)"
 59 | 					>
 60 | 						Forgot Password?
 61 | 					</styled-link>
 62 | 					<div v-if="config.is_sign_up_enabled.value">
 63 | 						Don't have an account?
 64 | 						<styled-link @click="() => setView(Views.Signup)">Sign Up</styled-link>
 65 | 					</div>
 66 | 				</styled-footer>
 67 | 			</template>
 68 | 		</div>
 69 | 	</div>
 70 | </template>
 71 | 
 72 | <script lang="ts">
 73 | import { reactive, toRefs, computed, type PropType } from 'vue';
 74 | import type { AuthToken, LoginInput } from '@authorizerdev/authorizer-js';
 75 | import { StyledButton, StyledFooter, StyledLink } from '../styledComponents/index';
 76 | import { ButtonAppearance, MessageType, Views } from '../constants/index';
 77 | import globalConfig from '../state/globalConfig';
 78 | import globalContext from '../state/globalContext';
 79 | import { isValidEmail } from '../utils/common';
 80 | import AuthorizerVerifyOtp from './AuthorizerVerifyOtp.vue';
 81 | import Message from './Message.vue';
 82 | import type { URLPropsType } from '../types';
 83 | export default {
 84 | 	name: 'AuthorizerBasicAuthLogin',
 85 | 	components: {
 86 | 		'styled-button': StyledButton,
 87 | 		'styled-footer': StyledFooter,
 88 | 		'styled-link': StyledLink,
 89 | 		'authorizer-verify-otp': AuthorizerVerifyOtp,
 90 | 		message: Message
 91 | 	},
 92 | 	props: {
 93 | 		setView: {
 94 | 			type: Function as PropType<(arg: Views) => void>,
 95 | 			default: (_v: Views) => undefined
 96 | 		},
 97 | 		onLogin: {
 98 | 			type: Function as PropType<(arg: AuthToken | void) => void>,
 99 | 			default: undefined
100 | 		},
101 | 		urlProps: {
102 | 			type: Object as PropType<URLPropsType>,
103 | 			default: undefined
104 | 		},
105 | 		roles: {
106 | 			type: Object as PropType<string[]>,
107 | 			default: undefined
108 | 		}
109 | 	},
110 | 	setup(props) {
111 | 		const config = toRefs(globalConfig);
112 | 		const { setAuthData, authorizerRef } = toRefs(globalContext);
113 | 		const componentState: {
114 | 			loading: boolean;
115 | 			error: null | string;
116 | 		} = reactive({
117 | 			loading: false,
118 | 			error: null
119 | 		});
120 | 		const otpData: {
121 | 			isScreenVisible: boolean;
122 | 			email: null | string;
123 | 		} = reactive({
124 | 			isScreenVisible: false,
125 | 			email: null
126 | 		});
127 | 		const formData: {
128 | 			email: null | string;
129 | 			password: null | string;
130 | 		} = reactive({
131 | 			email: null,
132 | 			password: null
133 | 		});
134 | 		const emailError = computed((): string | null => {
135 | 			if (formData.email === '') {
136 | 				return 'Email is required';
137 | 			}
138 | 			if (formData.email && !isValidEmail(formData.email)) {
139 | 				return 'Please enter valid email';
140 | 			}
141 | 			return null;
142 | 		});
143 | 		const passwordError = computed((): string | null => {
144 | 			if (formData.password === '') {
145 | 				return 'Password is required';
146 | 			}
147 | 			return null;
148 | 		});
149 | 		const onErrorClose = () => {
150 | 			componentState.error = null;
151 | 		};
152 | 		const onSubmit = async () => {
153 | 			componentState.loading = true;
154 | 			try {
155 | 				const data: LoginInput = {
156 | 					email: formData.email || '',
157 | 					password: formData.password || ''
158 | 				};
159 | 				if (props.urlProps?.scope) {
160 | 					data.scope = props.urlProps.scope;
161 | 				}
162 | 				if (props.urlProps?.state) {
163 | 					data.state = props.urlProps.state;
164 | 				}
165 | 				if (props.roles && props.roles.length) {
166 | 					data.roles = props.roles;
167 | 				}
168 | 				const res = await authorizerRef.value.login(data);
169 | 				if (res && res?.should_show_otp_screen) {
170 | 					Object.assign(otpData, {
171 | 						isScreenVisible: true,
172 | 						email: data.email
173 | 					});
174 | 					return;
175 | 				}
176 | 				if (res) {
177 | 					componentState.error = null;
178 | 					setAuthData.value({
179 | 						user: res.user || null,
180 | 						token: {
181 | 							access_token: res.access_token,
182 | 							expires_in: res.expires_in,
183 | 							refresh_token: res.refresh_token,
184 | 							id_token: res.id_token
185 | 						},
186 | 						config: globalConfig,
187 | 						loading: false
188 | 					});
189 | 				}
190 | 				if (props.onLogin) {
191 | 					props.onLogin(res);
192 | 				}
193 | 			} catch (error: unknown) {
194 | 				componentState.loading = false;
195 | 				componentState.error = error instanceof Error ? error.message : 'Internal error!';
196 | 			}
197 | 		};
198 | 		return {
199 | 			...toRefs(formData),
200 | 			...toRefs(componentState),
201 | 			otpData: toRefs(otpData),
202 | 			emailError,
203 | 			passwordError,
204 | 			onSubmit,
205 | 			ButtonAppearance,
206 | 			Views,
207 | 			config,
208 | 			MessageType,
209 | 			onErrorClose
210 | 		};
211 | 	}
212 | };
213 | </script>
214 | 
215 | <style scoped>
216 | @import '../styles/default.css';
217 | </style>
218 | 


--------------------------------------------------------------------------------
/src/components/AuthorizerForgotPassword.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div v-if="successMessage">
  3 | 		<message :type="MessageType.Success" :text="successMessage" />
  4 | 	</div>
  5 | 	<div v-else>
  6 | 		<template v-if="error">
  7 | 			<message :type="MessageType.Error" :text="error" @close="onErrorClose" />
  8 | 		</template>
  9 | 		<p :style="{ textAlign: 'center', margin: '10px 0px' }">
 10 | 			Please enter your email address.
 11 | 			<br />
 12 | 			We will send you an email to reset your password.
 13 | 		</p>
 14 | 		<br />
 15 | 		<form @submit.prevent="onSubmit">
 16 | 			<!-- Email -->
 17 | 			<div class="styled-form-group">
 18 | 				<label class="form-input-label" for="authorizer-forgot-password-email"
 19 | 					><span>* </span>Email</label
 20 | 				>
 21 | 				<input
 22 | 					id="authorizer-forgot-password-email"
 23 | 					v-model="email"
 24 | 					:class="`form-input-field ${emailError ? 'input-error-content' : null}`"
 25 | 					placeholder="eg. foo@bar.com"
 26 | 					type="email"
 27 | 				/>
 28 | 				<div v-if="emailError" class="form-input-error">{{ emailError }}</div>
 29 | 			</div>
 30 | 			<br />
 31 | 			<styled-button :appearance="ButtonAppearance.Primary" :disabled="!!emailError || !email">
 32 | 				<template v-if="loading">Processing ...</template>
 33 | 				<template v-else>Send Email</template>
 34 | 			</styled-button>
 35 | 		</form>
 36 | 		<template v-if="setView">
 37 | 			<styled-footer>
 38 | 				<div>
 39 | 					Remember your password?
 40 | 					<styled-link @click="() => setView(Views.Login)">Log In</styled-link>
 41 | 				</div>
 42 | 			</styled-footer>
 43 | 		</template>
 44 | 	</div>
 45 | </template>
 46 | 
 47 | <script lang="ts">
 48 | import { computed, reactive, toRefs, type PropType } from 'vue';
 49 | import globalConfig from '../state/globalConfig';
 50 | import globalContext from '../state/globalContext';
 51 | import { MessageType, ButtonAppearance, Views } from '../constants/index';
 52 | import Message from './Message.vue';
 53 | import { StyledButton, StyledFooter, StyledLink } from '../styledComponents/index';
 54 | import { isValidEmail } from '../utils/common';
 55 | import type { URLPropsType } from '../types';
 56 | export default {
 57 | 	name: 'AuthorizerForgotPassword',
 58 | 	components: {
 59 | 		'styled-button': StyledButton,
 60 | 		'styled-footer': StyledFooter,
 61 | 		'styled-link': StyledLink,
 62 | 		message: Message
 63 | 	},
 64 | 	props: {
 65 | 		setView: {
 66 | 			type: Function as PropType<(arg: Views) => void>,
 67 | 			default: (_v: Views) => undefined
 68 | 		},
 69 | 		onForgotPassword: {
 70 | 			type: Function as PropType<(arg: unknown) => void>,
 71 | 			default: undefined
 72 | 		},
 73 | 		urlProps: {
 74 | 			type: Object as PropType<URLPropsType>,
 75 | 			default: undefined
 76 | 		}
 77 | 	},
 78 | 	setup(props) {
 79 | 		const config = toRefs(globalConfig);
 80 | 		const { authorizerRef } = toRefs(globalContext);
 81 | 		const componentState: {
 82 | 			error: null | string;
 83 | 			successMessage: null | string;
 84 | 			loading: boolean;
 85 | 			email: null | string;
 86 | 		} = reactive({
 87 | 			error: null,
 88 | 			successMessage: null,
 89 | 			loading: false,
 90 | 			email: null
 91 | 		});
 92 | 		const emailError = computed((): string | null => {
 93 | 			if (componentState.email === '') {
 94 | 				return 'Email is required';
 95 | 			}
 96 | 			if (componentState.email && !isValidEmail(componentState.email)) {
 97 | 				return 'Please enter valid email';
 98 | 			}
 99 | 			return null;
100 | 		});
101 | 		const onSubmit = async () => {
102 | 			try {
103 | 				componentState.loading = true;
104 | 				const res = await authorizerRef.value.forgotPassword({
105 | 					email: componentState.email || '',
106 | 					state: props.urlProps?.state || '',
107 | 					redirect_uri:
108 | 						props.urlProps?.redirect_uri || config.redirectURL.value || window.location.origin
109 | 				});
110 | 				componentState.loading = false;
111 | 				if (res && res.message) {
112 | 					componentState.error = null;
113 | 					componentState.successMessage = res.message;
114 | 				}
115 | 				if (props.onForgotPassword) {
116 | 					props.onForgotPassword(res);
117 | 				}
118 | 			} catch (error: unknown) {
119 | 				componentState.loading = false;
120 | 				componentState.error = error instanceof Error ? error.message : 'Internal error!';
121 | 			}
122 | 		};
123 | 		const onErrorClose = () => {
124 | 			componentState.error = null;
125 | 		};
126 | 		return {
127 | 			...toRefs(componentState),
128 | 			onSubmit,
129 | 			onErrorClose,
130 | 			MessageType,
131 | 			ButtonAppearance,
132 | 			Views,
133 | 			emailError
134 | 		};
135 | 	}
136 | };
137 | </script>
138 | 
139 | <style scoped>
140 | @import '../styles/default.css';
141 | </style>
142 | 


--------------------------------------------------------------------------------
/src/components/AuthorizerMagicLinkLogin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div v-if="successMessage">
  3 | 		<message :type="MessageType.Success" :text="successMessage" />
  4 | 	</div>
  5 | 	<div v-else>
  6 | 		<template v-if="error">
  7 | 			<message :type="MessageType.Error" :text="error" @close="onErrorClose" />
  8 | 		</template>
  9 | 		<form @submit.prevent="onSubmit">
 10 | 			<!-- Email -->
 11 | 			<div class="styled-form-group">
 12 | 				<label class="form-input-label" for="authorizer-magic-link-login-email"
 13 | 					><span>* </span>Email</label
 14 | 				>
 15 | 				<input
 16 | 					id="authorizer-magic-link-login-email"
 17 | 					v-model="email"
 18 | 					:class="`form-input-field ${emailError ? 'input-error-content' : null}`"
 19 | 					placeholder="eg. foo@bar.com"
 20 | 					type="email"
 21 | 				/>
 22 | 				<div v-if="emailError" class="form-input-error">{{ emailError }}</div>
 23 | 			</div>
 24 | 			<br />
 25 | 			<styled-button
 26 | 				:appearance="ButtonAppearance.Primary"
 27 | 				:disabled="!email || !!emailError || loading"
 28 | 			>
 29 | 				<template v-if="loading">Processing ...</template>
 30 | 				<template v-else>Send Email</template>
 31 | 			</styled-button>
 32 | 		</form>
 33 | 	</div>
 34 | </template>
 35 | 
 36 | <script lang="ts">
 37 | import { reactive, toRefs, computed, type PropType } from 'vue';
 38 | import type { MagicLinkLoginInput } from '@authorizerdev/authorizer-js';
 39 | import globalContext from '../state/globalContext';
 40 | import { StyledButton } from '../styledComponents/index';
 41 | import { MessageType, ButtonAppearance } from '../constants/index';
 42 | import { isValidEmail } from '../utils/common';
 43 | import Message from './Message.vue';
 44 | import type { URLPropsType } from '../types';
 45 | export default {
 46 | 	name: 'AuthorizerMagicLinkLogin',
 47 | 	components: {
 48 | 		'styled-button': StyledButton,
 49 | 		message: Message
 50 | 	},
 51 | 	props: {
 52 | 		onMagicLinkLogin: {
 53 | 			type: Function as PropType<(arg: unknown) => void>,
 54 | 			default: undefined
 55 | 		},
 56 | 		urlProps: {
 57 | 			type: Object as PropType<URLPropsType>,
 58 | 			default: undefined
 59 | 		},
 60 | 		roles: {
 61 | 			type: Object as PropType<string[]>,
 62 | 			default: undefined
 63 | 		}
 64 | 	},
 65 | 	setup(props) {
 66 | 		const { authorizerRef } = toRefs(globalContext);
 67 | 		const componentState: {
 68 | 			error: null | string;
 69 | 			successMessage: null | string;
 70 | 			loading: boolean;
 71 | 		} = reactive({
 72 | 			error: null,
 73 | 			successMessage: null,
 74 | 			loading: false
 75 | 		});
 76 | 		const formData: {
 77 | 			email: null | string;
 78 | 		} = reactive({
 79 | 			email: null
 80 | 		});
 81 | 		const emailError = computed((): string | null => {
 82 | 			if (formData.email === '') {
 83 | 				return 'Email is required';
 84 | 			}
 85 | 			if (formData.email && !isValidEmail(formData.email)) {
 86 | 				return 'Please enter valid email';
 87 | 			}
 88 | 			return null;
 89 | 		});
 90 | 		const onErrorClose = () => {
 91 | 			componentState.error = null;
 92 | 		};
 93 | 		const onSubmit = async () => {
 94 | 			try {
 95 | 				componentState.loading = true;
 96 | 				const data: MagicLinkLoginInput = {
 97 | 					email: formData.email || '',
 98 | 					state: props.urlProps?.state || '',
 99 | 					redirect_uri: props.urlProps?.redirect_uri || ''
100 | 				};
101 | 				if (props.roles && props.roles.length) {
102 | 					data.roles = props.roles;
103 | 				}
104 | 				const res = await authorizerRef.value.magicLinkLogin(data);
105 | 				componentState.loading = false;
106 | 				if (res) {
107 | 					componentState.error = null;
108 | 					componentState.successMessage = res.message || ``;
109 | 					if (props.onMagicLinkLogin) {
110 | 						props.onMagicLinkLogin(res);
111 | 					}
112 | 				}
113 | 				if (props.urlProps?.redirect_uri) {
114 | 					setTimeout(() => {
115 | 						window.location.replace(props.urlProps?.redirect_uri || '');
116 | 					}, 3000);
117 | 				}
118 | 			} catch (error: unknown) {
119 | 				componentState.loading = false;
120 | 				componentState.error = error instanceof Error ? error.message : 'Internal error!';
121 | 			}
122 | 		};
123 | 		return {
124 | 			...toRefs(componentState),
125 | 			...toRefs(formData),
126 | 			emailError,
127 | 			MessageType,
128 | 			ButtonAppearance,
129 | 			onErrorClose,
130 | 			onSubmit
131 | 		};
132 | 	}
133 | };
134 | </script>
135 | 
136 | <style scoped>
137 | @import '../styles/default.css';
138 | </style>
139 | 


--------------------------------------------------------------------------------
/src/components/AuthorizerProvider.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import { toRefs, onMounted, watch, onUnmounted, provide, type PropType } from 'vue';
  3 | import { Authorizer, type AuthToken, type User } from '@authorizerdev/authorizer-js';
  4 | import { hasWindow } from '../utils/window';
  5 | import { AuthorizerProviderActionType } from '../constants/index';
  6 | import globalContext from '../state/globalContext';
  7 | import globalConfig from '../state/globalConfig';
  8 | import type { AuthorizerConfigInput, AuthorizerContextOutputType, AuthorizerState } from '../types';
  9 | import type { AuthorizerProviderAction } from '../types';
 10 | export default {
 11 | 	name: 'AuthorizerProvider',
 12 | 	props: {
 13 | 		config: {
 14 | 			type: Object as PropType<AuthorizerConfigInput>,
 15 | 			default: undefined
 16 | 		},
 17 | 		onStateChangeCallback: {
 18 | 			type: Function as PropType<(arg: AuthorizerState) => void>,
 19 | 			default: undefined
 20 | 		}
 21 | 	},
 22 | 	setup(props, { slots }) {
 23 | 		let intervalRef: ReturnType<typeof setInterval> | undefined;
 24 | 		const config = toRefs(globalConfig);
 25 | 		const context = toRefs(globalContext);
 26 | 		config.authorizerURL.value = props?.config?.authorizerURL || '';
 27 | 		config.redirectURL.value = props?.config?.redirectURL
 28 | 			? props.config.redirectURL
 29 | 			: hasWindow()
 30 | 			? window.location.origin
 31 | 			: '/';
 32 | 		config.client_id.value = props?.config?.clientID || '';
 33 | 		context.authorizerRef.value = new Authorizer({
 34 | 			authorizerURL: props?.config?.authorizerURL || '',
 35 | 			redirectURL: props?.config?.redirectURL
 36 | 				? props.config.redirectURL
 37 | 				: hasWindow()
 38 | 				? window.location.origin
 39 | 				: '/',
 40 | 			clientID: props?.config?.clientID || ''
 41 | 		});
 42 | 		const dispatch = ({ type, payload }: AuthorizerProviderAction) => {
 43 | 			switch (type) {
 44 | 				case AuthorizerProviderActionType.SET_USER:
 45 | 					context.user.value = payload.user;
 46 | 					break;
 47 | 				case AuthorizerProviderActionType.SET_TOKEN:
 48 | 					context.token.value = payload.token;
 49 | 					break;
 50 | 				case AuthorizerProviderActionType.SET_LOADING:
 51 | 					context.loading.value = payload.loading;
 52 | 					break;
 53 | 				case AuthorizerProviderActionType.SET_CONFIG:
 54 | 					Object.assign(globalConfig, payload.config);
 55 | 					break;
 56 | 				case AuthorizerProviderActionType.SET_AUTH_DATA:
 57 | 					const { config, ...rest } = payload;
 58 | 					Object.assign(globalConfig, { ...globalConfig, ...config });
 59 | 					Object.assign(globalContext, { ...globalContext, ...rest });
 60 | 					break;
 61 | 				default:
 62 | 					throw new Error();
 63 | 			}
 64 | 		};
 65 | 		const getToken = async () => {
 66 | 			const metaRes = await context.authorizerRef.value.getMetaData();
 67 | 			try {
 68 | 				const res = await context.authorizerRef.value.getSession();
 69 | 				if (res.access_token && res.user) {
 70 | 					const token = {
 71 | 						access_token: res.access_token,
 72 | 						expires_in: res.expires_in,
 73 | 						id_token: res.id_token,
 74 | 						refresh_token: res.refresh_token || ''
 75 | 					};
 76 | 					dispatch({
 77 | 						type: AuthorizerProviderActionType.SET_AUTH_DATA,
 78 | 						payload: {
 79 | 							token,
 80 | 							user: res.user,
 81 | 							config: metaRes,
 82 | 							loading: false
 83 | 						}
 84 | 					});
 85 | 					if (intervalRef) clearInterval(intervalRef);
 86 | 					intervalRef = setInterval(() => {
 87 | 						getToken();
 88 | 					}, res.expires_in * 1000);
 89 | 				} else {
 90 | 					dispatch({
 91 | 						type: AuthorizerProviderActionType.SET_AUTH_DATA,
 92 | 						payload: {
 93 | 							token: null,
 94 | 							user: null,
 95 | 							config: metaRes,
 96 | 							loading: false
 97 | 						}
 98 | 					});
 99 | 				}
100 | 			} catch (err) {
101 | 				dispatch({
102 | 					type: AuthorizerProviderActionType.SET_AUTH_DATA,
103 | 					payload: {
104 | 						token: null,
105 | 						user: null,
106 | 						config: metaRes,
107 | 						loading: false
108 | 					}
109 | 				});
110 | 			}
111 | 		};
112 | 		context.setToken.value = (token: AuthToken | null) => {
113 | 			dispatch({
114 | 				type: AuthorizerProviderActionType.SET_TOKEN,
115 | 				payload: {
116 | 					token
117 | 				}
118 | 			});
119 | 			if (token?.access_token) {
120 | 				if (intervalRef) clearInterval(intervalRef);
121 | 				intervalRef = setInterval(() => {
122 | 					getToken();
123 | 				}, token.expires_in * 1000);
124 | 			}
125 | 		};
126 | 		context.setAuthData.value = (data: AuthorizerState) => {
127 | 			dispatch({
128 | 				type: AuthorizerProviderActionType.SET_AUTH_DATA,
129 | 				payload: data
130 | 			});
131 | 			if (data.token?.access_token) {
132 | 				if (intervalRef) clearInterval(intervalRef);
133 | 				intervalRef = setInterval(() => {
134 | 					getToken();
135 | 				}, data.token.expires_in * 1000);
136 | 			}
137 | 		};
138 | 		context.setUser.value = (user: User | null) => {
139 | 			dispatch({
140 | 				type: AuthorizerProviderActionType.SET_USER,
141 | 				payload: {
142 | 					user
143 | 				}
144 | 			});
145 | 		};
146 | 		context.setLoading.value = (loading: boolean) => {
147 | 			dispatch({
148 | 				type: AuthorizerProviderActionType.SET_LOADING,
149 | 				payload: {
150 | 					loading
151 | 				}
152 | 			});
153 | 		};
154 | 		context.logout.value = async () => {
155 | 			dispatch({
156 | 				type: AuthorizerProviderActionType.SET_LOADING,
157 | 				payload: {
158 | 					loading: true
159 | 				}
160 | 			});
161 | 			await context.authorizerRef.value.logout();
162 | 			const loggedOutState = {
163 | 				user: null,
164 | 				token: null,
165 | 				loading: false,
166 | 				config: globalConfig
167 | 			};
168 | 			dispatch({
169 | 				type: AuthorizerProviderActionType.SET_AUTH_DATA,
170 | 				payload: loggedOutState
171 | 			});
172 | 		};
173 | 		provide('useAuthorizer', (): AuthorizerContextOutputType => {
174 | 			return { ...toRefs(globalContext), config: { ...toRefs(globalConfig) } };
175 | 		});
176 | 		onMounted(() => {
177 | 			getToken();
178 | 		});
179 | 		onUnmounted(() => {
180 | 			if (intervalRef) {
181 | 				clearInterval(intervalRef);
182 | 			}
183 | 		});
184 | 		watch([globalContext, globalConfig], () => {
185 | 			if (props?.onStateChangeCallback) {
186 | 				props.onStateChangeCallback({ ...globalContext, config: globalConfig });
187 | 			}
188 | 		});
189 | 		watch(
190 | 			() => {
191 | 				return { ...props.config };
192 | 			},
193 | 			() => {
194 | 				const updatedConfig = {
195 | 					...globalConfig,
196 | 					...props.config,
197 | 					authorizerURL: props?.config?.authorizerURL || globalConfig.authorizerURL,
198 | 					redirectURL: props?.config?.redirectURL || globalConfig.redirectURL,
199 | 					clientID: props?.config?.clientID || globalConfig.client_id
200 | 				};
201 | 				Object.assign(globalConfig, updatedConfig);
202 | 				context.authorizerRef.value = new Authorizer({
203 | 					authorizerURL: config.authorizerURL.value,
204 | 					redirectURL: config.redirectURL.value,
205 | 					clientID: config.client_id.value
206 | 				});
207 | 			}
208 | 		);
209 | 		return () => {
210 | 			return slots.default ? slots.default() : null;
211 | 		};
212 | 	}
213 | };
214 | </script>
215 | 


--------------------------------------------------------------------------------
/src/components/AuthorizerResetPassword.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<styled-wrapper>
  3 | 		<template v-if="error">
  4 | 			<message :type="MessageType.Error" :text="error" @close="onErrorClose" />
  5 | 		</template>
  6 | 		<form @submit.prevent="onSubmit">
  7 | 			<!-- password -->
  8 | 			<div class="styled-form-group" :hasError="passwordError">
  9 | 				<label class="form-input-label" for="authorizer-reset-password"
 10 | 					><span>* </span>Password</label
 11 | 				>
 12 | 				<input
 13 | 					id="authorizer-reset-password"
 14 | 					v-model="password"
 15 | 					:class="`form-input-field ${passwordError ? 'input-error-content' : null}`"
 16 | 					placeholder="********"
 17 | 					type="password"
 18 | 				/>
 19 | 				<div v-if="passwordError" class="form-input-error">
 20 | 					{{ passwordError }}
 21 | 				</div>
 22 | 			</div>
 23 | 
 24 | 			<!-- confirm password -->
 25 | 			<div class="styled-form-group" :hasError="confirmPasswordError">
 26 | 				<label class="form-input-label" for="authorizer-reset-confirm-password"
 27 | 					><span>* </span>Confirm Password</label
 28 | 				>
 29 | 				<input
 30 | 					id="authorizer-reset-confirm-password"
 31 | 					v-model="confirmPassword"
 32 | 					:class="`form-input-field ${confirmPasswordError ? 'input-error-content' : null}`"
 33 | 					placeholder="********"
 34 | 					type="password"
 35 | 				/>
 36 | 				<div v-if="confirmPasswordError" class="form-input-error">
 37 | 					{{ confirmPasswordError }}
 38 | 				</div>
 39 | 			</div>
 40 | 			<template v-if="config.is_strong_password_enabled.value">
 41 | 				<password-strength-indicator
 42 | 					:value="password || undefined"
 43 | 					:set-disable-button="setDisableButton"
 44 | 				/>
 45 | 				<br />
 46 | 			</template>
 47 | 			<styled-button
 48 | 				:appearance="ButtonAppearance.Primary"
 49 | 				:disabled="
 50 | 					!!passwordError ||
 51 | 					!!confirmPasswordError ||
 52 | 					!password ||
 53 | 					!confirmPassword ||
 54 | 					loading ||
 55 | 					disableContinueButton
 56 | 				"
 57 | 			>
 58 | 				<template v-if="loading">Processing ...</template>
 59 | 				<template v-else>Continue</template>
 60 | 			</styled-button>
 61 | 		</form>
 62 | 	</styled-wrapper>
 63 | </template>
 64 | 
 65 | <script lang="ts">
 66 | import { reactive, toRefs, computed, type PropType } from 'vue';
 67 | import globalConfig from '../state/globalConfig';
 68 | import globalContext from '../state/globalContext';
 69 | import { StyledButton, StyledWrapper } from '../styledComponents/index';
 70 | import { MessageType, ButtonAppearance } from '../constants/index';
 71 | import Message from './Message.vue';
 72 | import PasswordStrengthIndicator from './PasswordStrengthIndicator.vue';
 73 | import { getSearchParams } from '../utils/url';
 74 | export default {
 75 | 	name: 'AuthorizerResetPassword',
 76 | 	components: {
 77 | 		'styled-wrapper': StyledWrapper,
 78 | 		'styled-button': StyledButton,
 79 | 		'password-strength-indicator': PasswordStrengthIndicator,
 80 | 		message: Message
 81 | 	},
 82 | 	props: {
 83 | 		onReset: {
 84 | 			type: Function as PropType<(arg: unknown) => void>,
 85 | 			default: undefined
 86 | 		}
 87 | 	},
 88 | 	setup(props) {
 89 | 		const { token, redirect_uri } = getSearchParams();
 90 | 		const config = toRefs(globalConfig);
 91 | 		const { authorizerRef } = toRefs(globalContext);
 92 | 		const componentState: {
 93 | 			error: null | string;
 94 | 			loading: boolean;
 95 | 			disableContinueButton: boolean;
 96 | 		} = reactive({
 97 | 			error: !token ? 'Invalid token' : null,
 98 | 			loading: false,
 99 | 			disableContinueButton: false
100 | 		});
101 | 		const formData: {
102 | 			password: null | string;
103 | 			confirmPassword: null | string;
104 | 		} = reactive({
105 | 			password: null,
106 | 			confirmPassword: null
107 | 		});
108 | 		const passwordError = computed((): string | null => {
109 | 			if (formData.password === '') {
110 | 				return 'Password is required';
111 | 			}
112 | 			if (
113 | 				formData.password &&
114 | 				formData.confirmPassword &&
115 | 				formData.confirmPassword !== formData.password
116 | 			) {
117 | 				return `Password and confirm passwords don't match`;
118 | 			}
119 | 			return null;
120 | 		});
121 | 		const confirmPasswordError = computed((): string | null => {
122 | 			if (formData.confirmPassword === '') {
123 | 				return 'Confirm password is required';
124 | 			}
125 | 			if (
126 | 				formData.password &&
127 | 				formData.confirmPassword &&
128 | 				formData.confirmPassword !== formData.password
129 | 			) {
130 | 				return `Password and confirm passwords don't match`;
131 | 			}
132 | 			return null;
133 | 		});
134 | 		const onSubmit = async () => {
135 | 			componentState.loading = true;
136 | 			try {
137 | 				const res = await authorizerRef.value.resetPassword({
138 | 					token,
139 | 					password: formData.password || '',
140 | 					confirm_password: formData.confirmPassword || ''
141 | 				});
142 | 				componentState.loading = false;
143 | 				componentState.error = null;
144 | 				if (props.onReset) {
145 | 					props.onReset(res);
146 | 				} else {
147 | 					window.location.href = redirect_uri || config.redirectURL.value || window.location.origin;
148 | 				}
149 | 			} catch (error: unknown) {
150 | 				componentState.loading = false;
151 | 				componentState.error = error instanceof Error ? error.message : 'Internal error!';
152 | 			}
153 | 		};
154 | 		const setDisableButton = (value: boolean) => {
155 | 			componentState.disableContinueButton = value;
156 | 		};
157 | 		const onErrorClose = () => {
158 | 			componentState.error = null;
159 | 		};
160 | 		return {
161 | 			...toRefs(componentState),
162 | 			...toRefs(formData),
163 | 			config,
164 | 			passwordError,
165 | 			confirmPasswordError,
166 | 			onSubmit,
167 | 			MessageType,
168 | 			ButtonAppearance,
169 | 			setDisableButton,
170 | 			onErrorClose
171 | 		};
172 | 	}
173 | };
174 | </script>
175 | 
176 | <style scoped>
177 | @import '../styles/default.css';
178 | </style>
179 | 


--------------------------------------------------------------------------------
/src/components/AuthorizerRoot.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<styled-wrapper>
  3 | 		<authorizer-social-login :url-props="urlProps" :roles="roles" />
  4 | 		<authorizer-basic-auth-login
  5 | 			v-if="
  6 | 				view === Views.Login &&
  7 | 				config.is_basic_authentication_enabled.value &&
  8 | 				!config.is_magic_link_login_enabled.value
  9 | 			"
 10 | 			:set-view="setView"
 11 | 			:on-login="onLogin"
 12 | 			:url-props="urlProps"
 13 | 			:roles="roles"
 14 | 		/>
 15 | 		<authorizer-signup
 16 | 			v-if="
 17 | 				view === Views.Signup &&
 18 | 				config.is_basic_authentication_enabled.value &&
 19 | 				!config.is_magic_link_login_enabled.value &&
 20 | 				config.is_sign_up_enabled.value
 21 | 			"
 22 | 			:set-view="setView"
 23 | 			:on-signup="onSignup"
 24 | 			:url-props="urlProps"
 25 | 			:roles="roles"
 26 | 		/>
 27 | 		<authorizer-magic-link-login
 28 | 			v-if="view === Views.Login && config.is_magic_link_login_enabled.value"
 29 | 			:on-magic-link-login="onMagicLinkLogin"
 30 | 			:url-props="urlProps"
 31 | 			:roles="roles"
 32 | 		/>
 33 | 		<authorizer-forgot-password
 34 | 			v-if="view === Views.ForgotPassword"
 35 | 			:set-view="setView"
 36 | 			:on-forgot-password="onForgotPassword"
 37 | 			:url-props="urlProps"
 38 | 		/>
 39 | 	</styled-wrapper>
 40 | </template>
 41 | 
 42 | <script lang="ts">
 43 | import { reactive, toRefs, type PropType } from 'vue';
 44 | import type { AuthToken } from '@authorizerdev/authorizer-js';
 45 | import { StyledWrapper } from '../styledComponents/index';
 46 | import { Views } from '../constants/index';
 47 | import { hasWindow } from '../utils/window';
 48 | import { createRandomString } from '../utils/common';
 49 | import AuthorizerSocialLogin from './AuthorizerSocialLogin.vue';
 50 | import AuthorizerSignup from './AuthorizerSignup.vue';
 51 | import AuthorizerMagicLinkLogin from './AuthorizerMagicLinkLogin.vue';
 52 | import AuthorizerForgotPassword from './AuthorizerForgotPassword.vue';
 53 | import AuthorizerBasicAuthLogin from './AuthorizerBasicAuthLogin.vue';
 54 | import globalConfig from '../state/globalConfig';
 55 | import type { URLPropsType } from '../types';
 56 | export default {
 57 | 	name: 'AuthorizerRoot',
 58 | 	components: {
 59 | 		'styled-wrapper': StyledWrapper,
 60 | 		'authorizer-social-login': AuthorizerSocialLogin,
 61 | 		'authorizer-signup': AuthorizerSignup,
 62 | 		'authorizer-magic-link-login': AuthorizerMagicLinkLogin,
 63 | 		'authorizer-forgot-password': AuthorizerForgotPassword,
 64 | 		'authorizer-basic-auth-login': AuthorizerBasicAuthLogin
 65 | 	},
 66 | 	props: {
 67 | 		onLogin: {
 68 | 			type: Function as PropType<(arg: AuthToken | void) => void>,
 69 | 			default: undefined
 70 | 		},
 71 | 		onSignup: {
 72 | 			type: Function as PropType<(arg: AuthToken | void) => void>,
 73 | 			default: undefined
 74 | 		},
 75 | 		onMagicLinkLogin: {
 76 | 			type: Function as PropType<(arg: unknown) => void>,
 77 | 			default: undefined
 78 | 		},
 79 | 		onForgotPassword: {
 80 | 			type: Function as PropType<(arg: unknown) => void>,
 81 | 			default: undefined
 82 | 		},
 83 | 		roles: {
 84 | 			type: Object as PropType<string[]>,
 85 | 			default: undefined
 86 | 		}
 87 | 	},
 88 | 	setup() {
 89 | 		const state: {
 90 | 			view: Views;
 91 | 		} = reactive({
 92 | 			view: Views.Login
 93 | 		});
 94 | 		const setView = (viewType: Views) => {
 95 | 			if (viewType) state.view = viewType;
 96 | 		};
 97 | 		const searchParams = new URLSearchParams(hasWindow() ? window.location.search : ``);
 98 | 		const paramsState = searchParams.get('state') || createRandomString();
 99 | 		const scope = searchParams.get('scope')
100 | 			? searchParams.get('scope')?.toString().split(' ')
101 | 			: ['openid', 'profile', 'email'];
102 | 		const urlProps: URLPropsType = {
103 | 			state: paramsState,
104 | 			scope
105 | 		};
106 | 		const redirectURL = searchParams.get('redirect_uri') || searchParams.get('redirectURL');
107 | 		if (redirectURL) {
108 | 			urlProps.redirectURL = redirectURL;
109 | 		} else {
110 | 			urlProps.redirectURL = hasWindow() ? window.location.origin : undefined;
111 | 		}
112 | 		urlProps.redirect_uri = urlProps.redirectURL;
113 | 		return {
114 | 			...toRefs(state),
115 | 			config: toRefs(globalConfig),
116 | 			setView,
117 | 			urlProps,
118 | 			Views
119 | 		};
120 | 	}
121 | };
122 | </script>
123 | 


--------------------------------------------------------------------------------
/src/components/AuthorizerSignup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div v-if="successMessage">
  3 | 		<message :type="MessageType.Success" :text="successMessage" />
  4 | 	</div>
  5 | 	<div v-else>
  6 | 		<template v-if="error">
  7 | 			<message :type="MessageType.Error" :text="error" @close="onErrorClose" />
  8 | 		</template>
  9 | 		<form @submit.prevent="onSubmit">
 10 | 			<!-- Email -->
 11 | 			<div class="styled-form-group" :hasError="emailError">
 12 | 				<label class="form-input-label" for="authorizer-sign-up-email"><span>* </span>Email</label>
 13 | 				<input
 14 | 					id="authorizer-sign-up-email"
 15 | 					v-model="email"
 16 | 					:class="`form-input-field ${emailError ? 'input-error-content' : null}`"
 17 | 					placeholder="eg. foo@bar.com"
 18 | 					type="email"
 19 | 				/>
 20 | 				<div v-if="emailError" class="form-input-error">{{ emailError }}</div>
 21 | 			</div>
 22 | 
 23 | 			<!-- password -->
 24 | 			<div class="styled-form-group" :hasError="passwordError">
 25 | 				<label class="form-input-label" for="authorizer-sign-up-password"
 26 | 					><span>* </span>Password</label
 27 | 				>
 28 | 				<input
 29 | 					id="authorizer-sign-up-password"
 30 | 					v-model="password"
 31 | 					:class="`form-input-field ${passwordError ? 'input-error-content' : null}`"
 32 | 					placeholder="********"
 33 | 					type="password"
 34 | 				/>
 35 | 				<div v-if="passwordError" class="form-input-error">
 36 | 					{{ passwordError }}
 37 | 				</div>
 38 | 			</div>
 39 | 
 40 | 			<!-- confirm password -->
 41 | 			<div class="styled-form-group" :hasError="confirmPasswordError">
 42 | 				<label class="form-input-label" for="authorizer-sign-up-confirm-password"
 43 | 					><span>* </span>Confirm Password</label
 44 | 				>
 45 | 				<input
 46 | 					id="authorizer-sign-up-confirm-password"
 47 | 					v-model="confirmPassword"
 48 | 					:class="`form-input-field ${confirmPasswordError ? 'input-error-content' : null}`"
 49 | 					placeholder="********"
 50 | 					type="password"
 51 | 				/>
 52 | 				<div v-if="confirmPasswordError" class="form-input-error">
 53 | 					{{ confirmPasswordError }}
 54 | 				</div>
 55 | 			</div>
 56 | 			<template v-if="config.is_strong_password_enabled.value">
 57 | 				<password-strength-indicator
 58 | 					:value="password || undefined"
 59 | 					:set-disable-button="setDisableButton"
 60 | 				/>
 61 | 				<br />
 62 | 			</template>
 63 | 			<styled-button
 64 | 				:appearance="ButtonAppearance.Primary"
 65 | 				:disabled="
 66 | 					!!emailError ||
 67 | 					!!passwordError ||
 68 | 					!!confirmPasswordError ||
 69 | 					!email ||
 70 | 					!password ||
 71 | 					!confirmPassword ||
 72 | 					loading ||
 73 | 					disableSignupButton
 74 | 				"
 75 | 			>
 76 | 				<template v-if="loading">Processing ...</template>
 77 | 				<template v-else>Sign Up</template>
 78 | 			</styled-button>
 79 | 		</form>
 80 | 		<template v-if="setView">
 81 | 			<styled-footer>
 82 | 				<div>
 83 | 					Already have an account?
 84 | 					<styled-link @click="() => setView(Views.Login)">Log In</styled-link>
 85 | 				</div>
 86 | 			</styled-footer>
 87 | 		</template>
 88 | 	</div>
 89 | </template>
 90 | 
 91 | <script lang="ts">
 92 | import { reactive, toRefs, computed, type PropType } from 'vue';
 93 | import type { AuthToken, SignupInput } from '@authorizerdev/authorizer-js';
 94 | import globalConfig from '../state/globalConfig';
 95 | import globalContext from '../state/globalContext';
 96 | import { StyledButton, StyledFooter, StyledLink } from '../styledComponents/index';
 97 | import { Views, MessageType, ButtonAppearance } from '../constants/index';
 98 | import { isValidEmail } from '../utils/common';
 99 | import Message from './Message.vue';
100 | import PasswordStrengthIndicator from './PasswordStrengthIndicator.vue';
101 | import type { URLPropsType } from '../types';
102 | export default {
103 | 	name: 'AuthorizerSignup',
104 | 	components: {
105 | 		'password-strength-indicator': PasswordStrengthIndicator,
106 | 		'styled-button': StyledButton,
107 | 		'styled-footer': StyledFooter,
108 | 		'styled-link': StyledLink,
109 | 		message: Message
110 | 	},
111 | 	props: {
112 | 		setView: {
113 | 			type: Function as PropType<(arg: Views) => void>,
114 | 			default: (_v: Views) => undefined
115 | 		},
116 | 		onSignup: {
117 | 			type: Function as PropType<(arg: AuthToken | void) => void>,
118 | 			default: undefined
119 | 		},
120 | 		urlProps: {
121 | 			type: Object as PropType<URLPropsType>,
122 | 			default: undefined
123 | 		},
124 | 		roles: {
125 | 			type: Object as PropType<string[]>,
126 | 			default: undefined
127 | 		}
128 | 	},
129 | 	setup(props) {
130 | 		const config = toRefs(globalConfig);
131 | 		const { setAuthData, authorizerRef } = toRefs(globalContext);
132 | 		const componentState: {
133 | 			error: null | string;
134 | 			successMessage: null | string;
135 | 			loading: boolean;
136 | 			disableSignupButton: boolean;
137 | 		} = reactive({
138 | 			error: null,
139 | 			successMessage: null,
140 | 			loading: false,
141 | 			disableSignupButton: false
142 | 		});
143 | 		const formData: {
144 | 			email: null | string;
145 | 			password: null | string;
146 | 			confirmPassword: null | string;
147 | 		} = reactive({
148 | 			email: null,
149 | 			password: null,
150 | 			confirmPassword: null
151 | 		});
152 | 		const emailError = computed((): string | null => {
153 | 			if (formData.email === '') {
154 | 				return 'Email is required';
155 | 			}
156 | 			if (formData.email && !isValidEmail(formData.email)) {
157 | 				return 'Please enter valid email';
158 | 			}
159 | 			return null;
160 | 		});
161 | 		const passwordError = computed((): string | null => {
162 | 			if (formData.password === '') {
163 | 				return 'Password is required';
164 | 			}
165 | 			if (
166 | 				formData.password &&
167 | 				formData.confirmPassword &&
168 | 				formData.confirmPassword !== formData.password
169 | 			) {
170 | 				return `Password and confirm passwords don't match`;
171 | 			}
172 | 			return null;
173 | 		});
174 | 		const confirmPasswordError = computed((): string | null => {
175 | 			if (formData.confirmPassword === '') {
176 | 				return 'Confirm password is required';
177 | 			}
178 | 			if (
179 | 				formData.password &&
180 | 				formData.confirmPassword &&
181 | 				formData.confirmPassword !== formData.password
182 | 			) {
183 | 				return `Password and confirm passwords don't match`;
184 | 			}
185 | 			return null;
186 | 		});
187 | 		const onSubmit = async () => {
188 | 			try {
189 | 				componentState.loading = true;
190 | 				const data: SignupInput = {
191 | 					email: formData.email || '',
192 | 					password: formData.password || '',
193 | 					confirm_password: formData.confirmPassword || ''
194 | 				};
195 | 				if (props.urlProps?.scope) {
196 | 					data.scope = props.urlProps.scope;
197 | 				}
198 | 				if (props.urlProps?.roles) {
199 | 					data.roles = props.urlProps.roles;
200 | 				}
201 | 				if (props.urlProps?.redirect_uri) {
202 | 					data.redirect_uri = props.urlProps.redirect_uri;
203 | 				}
204 | 				if (props.urlProps?.state) {
205 | 					data.state = props.urlProps.state;
206 | 				}
207 | 				if (props.roles && props.roles.length) {
208 | 					data.roles = [...(data.roles || []), ...props.roles];
209 | 				}
210 | 				const res = await authorizerRef.value.signup(data);
211 | 				if (res) {
212 | 					componentState.error = null;
213 | 					if (res.access_token) {
214 | 						componentState.error = null;
215 | 						setAuthData.value({
216 | 							user: res.user || null,
217 | 							token: {
218 | 								access_token: res.access_token,
219 | 								expires_in: res.expires_in,
220 | 								refresh_token: res.refresh_token,
221 | 								id_token: res.id_token
222 | 							},
223 | 							config: globalConfig,
224 | 							loading: false
225 | 						});
226 | 					} else {
227 | 						componentState.error = null;
228 | 						componentState.successMessage = res?.message ? res.message : null;
229 | 					}
230 | 					if (props.onSignup) {
231 | 						props.onSignup(res);
232 | 					}
233 | 				}
234 | 			} catch (error: unknown) {
235 | 				componentState.loading = false;
236 | 				componentState.error = error instanceof Error ? error.message : 'Internal error!';
237 | 			}
238 | 		};
239 | 		const onErrorClose = () => {
240 | 			componentState.error = null;
241 | 		};
242 | 		const setDisableButton = (value: boolean) => {
243 | 			componentState.disableSignupButton = value;
244 | 		};
245 | 		return {
246 | 			...toRefs(componentState),
247 | 			...toRefs(formData),
248 | 			config,
249 | 			onSubmit,
250 | 			onErrorClose,
251 | 			MessageType,
252 | 			ButtonAppearance,
253 | 			Views,
254 | 			emailError,
255 | 			passwordError,
256 | 			confirmPasswordError,
257 | 			setDisableButton
258 | 		};
259 | 	}
260 | };
261 | </script>
262 | <style scoped>
263 | @import '../styles/default.css';
264 | </style>
265 | 


--------------------------------------------------------------------------------
/src/components/AuthorizerSocialLogin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<div v-if="config.is_apple_login_enabled.value" id="appleid-signin">
  4 | 			<styled-button
  5 | 				:appearance="ButtonAppearance.Default"
  6 | 				@click="
  7 | 					() =>
  8 | 						window
  9 | 							? (window.location.href = `${config.authorizerURL.value}/oauth_login/apple?${queryParams}`)
 10 | 							: null
 11 | 				"
 12 | 			>
 13 | 				<apple />
 14 | 				Sign in with Apple
 15 | 			</styled-button>
 16 | 			<br />
 17 | 		</div>
 18 | 		<template v-if="config.is_google_login_enabled.value">
 19 | 			<styled-button
 20 | 				:appearance="ButtonAppearance.Default"
 21 | 				@click="
 22 | 					() =>
 23 | 						window
 24 | 							? (window.location.href = `${config.authorizerURL.value}/oauth_login/google?${queryParams}`)
 25 | 							: null
 26 | 				"
 27 | 			>
 28 | 				<google />
 29 | 				Sign in with Google
 30 | 			</styled-button>
 31 | 			<br />
 32 | 		</template>
 33 | 		<template v-if="config.is_github_login_enabled.value">
 34 | 			<styled-button
 35 | 				:appearance="ButtonAppearance.Default"
 36 | 				@click="
 37 | 					() =>
 38 | 						window
 39 | 							? (window.location.href = `${config.authorizerURL.value}/oauth_login/github?${queryParams}`)
 40 | 							: null
 41 | 				"
 42 | 			>
 43 | 				<github />
 44 | 				Sign in with Github
 45 | 			</styled-button>
 46 | 			<br />
 47 | 		</template>
 48 | 		<template v-if="config.is_facebook_login_enabled.value">
 49 | 			<styled-button
 50 | 				:appearance="ButtonAppearance.Default"
 51 | 				@click="
 52 | 					() =>
 53 | 						window
 54 | 							? (window.location.href = `${config.authorizerURL.value}/oauth_login/facebook?${queryParams}`)
 55 | 							: null
 56 | 				"
 57 | 			>
 58 | 				<facebook />
 59 | 				Sign in with Facebook
 60 | 			</styled-button>
 61 | 			<br />
 62 | 		</template>
 63 | 		<template v-if="config.is_linkedin_login_enabled.value">
 64 | 			<styled-button
 65 | 				:appearance="ButtonAppearance.Default"
 66 | 				@click="
 67 | 					() =>
 68 | 						window
 69 | 							? (window.location.href = `${config.authorizerURL.value}/oauth_login/linkedin?${queryParams}`)
 70 | 							: null
 71 | 				"
 72 | 			>
 73 | 				<linkedin />
 74 | 				Sign in with Linkedin
 75 | 			</styled-button>
 76 | 			<br />
 77 | 		</template>
 78 | 		<template v-if="config.is_twitter_login_enabled.value">
 79 | 			<styled-button
 80 | 				:appearance="ButtonAppearance.Default"
 81 | 				@click="
 82 | 					() =>
 83 | 						window
 84 | 							? (window.location.href = `${config.authorizerURL.value}/oauth_login/twitter?${queryParams}`)
 85 | 							: null
 86 | 				"
 87 | 			>
 88 | 				<twitter />
 89 | 				Sign in with Twitter
 90 | 			</styled-button>
 91 | 			<br />
 92 | 		</template>
 93 | 		<template v-if="config.is_microsoft_login_enabled.value">
 94 | 			<styled-button
 95 | 				:appearance="ButtonAppearance.Default"
 96 | 				@click="
 97 | 					() =>
 98 | 						window
 99 | 							? (window.location.href = `${config.authorizerURL.value}/oauth_login/microsoft?${queryParams}`)
100 | 							: null
101 | 				"
102 | 			>
103 | 				<microsoft />
104 | 				Sign in with Microsoft
105 | 			</styled-button>
106 | 			<br />
107 | 		</template>
108 | 		<template v-if="config.is_discord_login_enabled.value">
109 | 			<styled-button
110 | 				:appearance="ButtonAppearance.Default"
111 | 				@click="
112 | 					() => 
113 | 						window
114 | 							? (window.location.href = `${config.authorizerURL.value}/oauth_login/discord?${queryParams}`)
115 | 							: null
116 | 				"
117 | 			>
118 | 				<discord />
119 | 			</styled-button>
120 | 			<br />
121 | 		</template>
122 | 		<template v-if="config.is_roblox_login_enabled.value">
123 | 			<styled-button
124 | 				:appearance="ButtonAppearance.Default"
125 | 				@click="
126 | 					() =>
127 | 						window
128 | 							? (window.location.href = `${config.authorizerURL.value}/oauth_login/roblox?${queryParams}`)
129 | 							: null
130 | 				"
131 | 			>
132 | 				<roblox />
133 | 			</styled-button>
134 | 			<br />
135 | 		</template>
136 | 		<styled-separator
137 | 			v-if="
138 | 				hasSocialLogin &&
139 | 				(config.is_basic_authentication_enabled.value || config.is_magic_link_login_enabled.value)
140 | 			"
141 | 		>
142 | 			OR
143 | 		</styled-separator>
144 | 	</div>
145 | </template>
146 | 
147 | <script lang="ts">
148 | import { hasWindow } from '../utils/window';
149 | import { createQueryParams } from '../utils/common';
150 | import { StyledButton, StyledSeparator } from '../styledComponents/index';
151 | import { ButtonAppearance } from '../constants/index';
152 | import globalConfig from '../state/globalConfig';
153 | import { computed, toRefs, type PropType, toRef } from 'vue';
154 | import Google from '../icons/Google.vue';
155 | import Facebook from '../icons/Facebook.vue';
156 | import Github from '../icons/Github.vue';
157 | import Linkedin from '../icons/Linkedin.vue';
158 | import Apple from '../icons/Apple.vue';
159 | import Twitter from '../icons/Twitter.vue';
160 | import Microsoft from '../icons/Microsoft.vue';
161 | import Discord from '../icons/Discord.vue';
162 | import Roblox from '../icons/Roblox.vue';
163 | import type { URLPropsType } from '../types';
164 | export default {
165 | 	name: 'AuthorizerSocialLogin',
166 | 	components: {
167 | 		'styled-button': StyledButton,
168 | 		'styled-separator': StyledSeparator,
169 | 		google: Google,
170 | 		github: Github,
171 | 		facebook: Facebook,
172 | 		linkedin: Linkedin,
173 | 		apple: Apple,
174 | 		twitter: Twitter,
175 | 		microsoft: Microsoft,
176 | 		discord: Discord,
177 | 		roblox: Roblox
178 | 	},
179 | 	props: {
180 | 		urlProps: {
181 | 			type: Object as PropType<URLPropsType>,
182 | 			default: undefined
183 | 		},
184 | 		roles: {
185 | 			type: Object as PropType<string[]>,
186 | 			default: undefined
187 | 		}
188 | 	},
189 | 	setup(props) {
190 | 		const roles = toRef(props, 'roles');
191 | 		const config = toRefs(globalConfig);
192 | 		const hasSocialLogin = computed(function () {
193 | 			return (
194 | 				config.is_google_login_enabled.value ||
195 | 				config.is_github_login_enabled.value ||
196 | 				config.is_facebook_login_enabled.value ||
197 | 				config.is_linkedin_login_enabled.value ||
198 | 				config.is_apple_login_enabled.value ||
199 | 				config.is_twitter_login_enabled.value ||
200 | 				config.is_microsoft_login_enabled.value ||
201 | 				config.is_discord_login_enabled.value ||
202 | 				config.is_roblox_login_enabled.value
203 | 			);
204 | 		});
205 | 		const data: {
206 | 			scope?: string;
207 | 			roles?: string[];
208 | 		} = { ...props.urlProps, scope: props.urlProps?.scope?.join(' ') };
209 | 		if (props.roles && props.roles.length) {
210 | 			data.roles = roles.value;
211 | 		}
212 | 		const queryParams = createQueryParams(data);
213 | 		const windowObject = hasWindow() ? window : null;
214 | 		return {
215 | 			config,
216 | 			hasSocialLogin,
217 | 			queryParams,
218 | 			ButtonAppearance,
219 | 			window: windowObject
220 | 		};
221 | 	}
222 | };
223 | </script>
224 | 


--------------------------------------------------------------------------------
/src/components/AuthorizerVerifyOtp.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<template v-if="successMessage">
  4 | 			<message :type="MessageType.Success" :text="successMessage" @close="onSuccessClose" />
  5 | 		</template>
  6 | 		<template v-if="error">
  7 | 			<message :type="MessageType.Error" :text="error" @close="onErrorClose" />
  8 | 		</template>
  9 | 		<p :style="{ textAlign: 'center', margin: '10px 0px' }">
 10 | 			Please enter the OTP you received on your email address.
 11 | 		</p>
 12 | 		<br />
 13 | 		<form @submit.prevent="onSubmit">
 14 | 			<!-- OTP -->
 15 | 			<div class="styled-form-group" :hasError="otpError">
 16 | 				<label class="form-input-label" for="authorizer-verify-otp"
 17 | 					><span>* </span>OTP (One Time Password)</label
 18 | 				>
 19 | 				<input
 20 | 					id="authorizer-verify-otp"
 21 | 					v-model="otp"
 22 | 					:class="`form-input-field ${otpError ? 'input-error-content' : null}`"
 23 | 					placeholder="eg. AB123C"
 24 | 					type="password"
 25 | 				/>
 26 | 				<div v-if="otpError" class="form-input-error">{{ otpError }}</div>
 27 | 			</div>
 28 | 			<br />
 29 | 			<styled-button :appearance="ButtonAppearance.Primary" :disabled="!!otpError || !otp">
 30 | 				<template v-if="loading">Processing ...</template>
 31 | 				<template v-else>Submit</template>
 32 | 			</styled-button>
 33 | 		</form>
 34 | 		<template v-if="setView">
 35 | 			<styled-footer>
 36 | 				<div v-if="sendingOtp" :style="{ marginBottom: '10px' }">Sending ...</div>
 37 | 				<styled-link v-else :style="{ marginBottom: '10px' }" @click="resendOtp">
 38 | 					Resend OTP
 39 | 				</styled-link>
 40 | 				<div v-if="config.is_sign_up_enabled.value">
 41 | 					Don't have an account?
 42 | 					<styled-link @click="() => setView(Views.Signup)">Sign Up</styled-link>
 43 | 				</div>
 44 | 			</styled-footer>
 45 | 		</template>
 46 | 	</div>
 47 | </template>
 48 | 
 49 | <script lang="ts">
 50 | import { computed, reactive, toRefs, type PropType } from 'vue';
 51 | import type { AuthToken, VerifyOtpInput } from '@authorizerdev/authorizer-js';
 52 | import globalConfig from '../state/globalConfig';
 53 | import globalContext from '../state/globalContext';
 54 | import { StyledButton, StyledFooter, StyledLink } from '../styledComponents/index';
 55 | import { isValidOtp } from '../utils/common';
 56 | import { MessageType, ButtonAppearance, Views } from '../constants/index';
 57 | import Message from './Message.vue';
 58 | import type { URLPropsType } from '../types';
 59 | export default {
 60 | 	name: 'AuthorizerVerifyOtp',
 61 | 	components: {
 62 | 		'styled-button': StyledButton,
 63 | 		'styled-footer': StyledFooter,
 64 | 		'styled-link': StyledLink,
 65 | 		message: Message
 66 | 	},
 67 | 	props: {
 68 | 		setView: {
 69 | 			type: Function as PropType<(arg: Views) => void>,
 70 | 			default: (_v: Views) => undefined
 71 | 		},
 72 | 		onLogin: {
 73 | 			type: Function as PropType<(arg: AuthToken | void) => void>,
 74 | 			default: undefined
 75 | 		},
 76 | 		email: {
 77 | 			type: String,
 78 | 			required: true
 79 | 		},
 80 | 		urlProps: {
 81 | 			type: Object as PropType<URLPropsType>,
 82 | 			default: undefined
 83 | 		}
 84 | 	},
 85 | 	setup(props) {
 86 | 		const config = toRefs(globalConfig);
 87 | 		const { setAuthData, authorizerRef } = toRefs(globalContext);
 88 | 		const componentState: {
 89 | 			error: null | string;
 90 | 			successMessage: null | string;
 91 | 			loading: boolean;
 92 | 			sendingOtp: boolean;
 93 | 			otp: null | string;
 94 | 		} = reactive({
 95 | 			error: null,
 96 | 			successMessage: null,
 97 | 			loading: false,
 98 | 			sendingOtp: false,
 99 | 			otp: null
100 | 		});
101 | 		const otpError = computed((): string | null => {
102 | 			if (componentState.otp === '') {
103 | 				return 'OTP is required';
104 | 			}
105 | 			if (componentState.otp && !isValidOtp(componentState.otp)) {
106 | 				return 'Please enter valid OTP';
107 | 			}
108 | 			return null;
109 | 		});
110 | 		const onSubmit = async () => {
111 | 			componentState.successMessage = null;
112 | 			try {
113 | 				componentState.loading = true;
114 | 				const data: VerifyOtpInput = {
115 | 					email: props.email,
116 | 					otp: componentState.otp || ''
117 | 				};
118 | 				if (props.urlProps?.state) {
119 | 					data.state = props.urlProps.state;
120 | 				}
121 | 				const res = await authorizerRef.value.verifyOtp(data);
122 | 				componentState.loading = false;
123 | 				if (res) {
124 | 					componentState.error = null;
125 | 					setAuthData.value({
126 | 						user: res.user || null,
127 | 						token: {
128 | 							access_token: res.access_token,
129 | 							expires_in: res.expires_in,
130 | 							refresh_token: res.refresh_token,
131 | 							id_token: res.id_token
132 | 						},
133 | 						config: globalConfig,
134 | 						loading: false
135 | 					});
136 | 				}
137 | 				if (props.onLogin) {
138 | 					props.onLogin(res);
139 | 				}
140 | 			} catch (error: unknown) {
141 | 				componentState.loading = false;
142 | 				componentState.error = error instanceof Error ? error.message : 'Internal error!';
143 | 			}
144 | 		};
145 | 		const onSuccessClose = () => {
146 | 			componentState.successMessage = null;
147 | 		};
148 | 		const onErrorClose = () => {
149 | 			componentState.error = null;
150 | 		};
151 | 		const resendOtp = async () => {
152 | 			componentState.successMessage = null;
153 | 			try {
154 | 				componentState.sendingOtp = true;
155 | 				const res = await authorizerRef.value.resendOtp({
156 | 					email: props.email
157 | 				});
158 | 				componentState.sendingOtp = false;
159 | 				if (res && res?.message) {
160 | 					componentState.error = null;
161 | 					componentState.successMessage = res.message;
162 | 					if (props.onLogin) {
163 | 						props.onLogin(res as AuthToken);
164 | 					}
165 | 				}
166 | 			} catch (error: unknown) {
167 | 				componentState.loading = false;
168 | 				componentState.error = error instanceof Error ? error.message : 'Internal error!';
169 | 			}
170 | 		};
171 | 		return {
172 | 			...toRefs(componentState),
173 | 			config,
174 | 			otpError,
175 | 			onSubmit,
176 | 			MessageType,
177 | 			onSuccessClose,
178 | 			onErrorClose,
179 | 			ButtonAppearance,
180 | 			resendOtp,
181 | 			Views
182 | 		};
183 | 	}
184 | };
185 | </script>
186 | <style scoped>
187 | @import '../styles/default.css';
188 | </style>
189 | 


--------------------------------------------------------------------------------
/src/components/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<styled-message-wrapper :type="type">
 3 | 		<styled-flex align-items="center" justify-content="space-between">
 4 | 			<div :style="{ flex: 1 }">{{ capitalizeFirstLetter(text) }}</div>
 5 | 			<span v-if="onClose" :style="{ cursor: 'pointer' }" @click="onClose">
 6 | 				<close />
 7 | 			</span>
 8 | 		</styled-flex>
 9 | 	</styled-message-wrapper>
10 | </template>
11 | 
12 | <script lang="ts">
13 | import { StyledFlex, StyledMessageWrapper } from '../styledComponents/index';
14 | import Close from '../icons/Close.vue';
15 | import { capitalizeFirstLetter } from '../utils/common';
16 | import { MessageType } from '../constants';
17 | import type { PropType } from 'vue';
18 | export default {
19 | 	name: 'Message',
20 | 	components: {
21 | 		'styled-message-wrapper': StyledMessageWrapper,
22 | 		'styled-flex': StyledFlex,
23 | 		close: Close
24 | 	},
25 | 	props: {
26 | 		type: {
27 | 			type: String,
28 | 			default: MessageType.Success
29 | 		},
30 | 		text: {
31 | 			type: String,
32 | 			default: ''
33 | 		},
34 | 		onClose: {
35 | 			type: Function as PropType<(arg: unknown) => void>,
36 | 			default: undefined
37 | 		}
38 | 	},
39 | 	setup() {
40 | 		return {
41 | 			capitalizeFirstLetter
42 | 		};
43 | 	}
44 | };
45 | </script>
46 | 


--------------------------------------------------------------------------------
/src/components/PasswordStrengthIndicator.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<styled-password-strength-wrapper>
  4 | 			<styled-flex align-items="center" justify-content="center" wrap="nowrap">
  5 | 				<styled-password-strength :strength="score > 2 ? 'weak' : 'default'" />
  6 | 				<styled-password-strength :strength="score > 3 ? 'good' : 'default'" />
  7 | 				<styled-password-strength :strength="score > 4 ? 'strong' : 'default'" />
  8 | 				<styled-password-strength :strength="score > 5 ? 'veryStrong' : 'default'" />
  9 | 				<div>{{ strength }}</div>
 10 | 			</styled-flex>
 11 | 			<p>
 12 | 				<b>Criteria for a strong password:</b>
 13 | 			</p>
 14 | 			<styled-flex flex-direction="column">
 15 | 				<styled-flex justify-content="flex-start" align-items="center">
 16 | 					<input
 17 | 						readOnly
 18 | 						type="checkbox"
 19 | 						:checked="hasSixChar"
 20 | 						@click="eventHandler"
 21 | 						@keydown="eventHandler"
 22 | 					/>
 23 | 					<div class="styled-check-box-label">At least 6 characters</div>
 24 | 				</styled-flex>
 25 | 				<styled-flex justify-content="flex-start" align-items="center">
 26 | 					<input
 27 | 						readOnly
 28 | 						type="checkbox"
 29 | 						:checked="hasLowerCase"
 30 | 						@click="eventHandler"
 31 | 						@keydown="eventHandler"
 32 | 					/>
 33 | 					<div class="styled-check-box-label">At least 1 lowercase letter</div>
 34 | 				</styled-flex>
 35 | 				<styled-flex justify-content="flex-start" align-items="center">
 36 | 					<input
 37 | 						readOnly
 38 | 						type="checkbox"
 39 | 						:checked="hasUpperCase"
 40 | 						@click="eventHandler"
 41 | 						@keydown="eventHandler"
 42 | 					/>
 43 | 					<div class="styled-check-box-label">At least 1 uppercase letter</div>
 44 | 				</styled-flex>
 45 | 				<styled-flex justify-content="flex-start" align-items="center">
 46 | 					<input
 47 | 						readOnly
 48 | 						type="checkbox"
 49 | 						:checked="hasNumericChar"
 50 | 						@click="eventHandler"
 51 | 						@keydown="eventHandler"
 52 | 					/>
 53 | 					<div class="styled-check-box-label">At least 1 numeric character</div>
 54 | 				</styled-flex>
 55 | 				<styled-flex justify-content="flex-start" align-items="center">
 56 | 					<input
 57 | 						readOnly
 58 | 						type="checkbox"
 59 | 						:checked="hasSpecialChar"
 60 | 						@click="eventHandler"
 61 | 						@keydown="eventHandler"
 62 | 					/>
 63 | 					<div class="styled-check-box-label">At least 1 special character</div>
 64 | 				</styled-flex>
 65 | 				<styled-flex justify-content="flex-start" align-items="center">
 66 | 					<input
 67 | 						readOnly
 68 | 						type="checkbox"
 69 | 						:checked="maxThirtySixChar"
 70 | 						@click="eventHandler"
 71 | 						@keydown="eventHandler"
 72 | 					/>
 73 | 					<div class="styled-check-box-label">Maximum 36 characters</div>
 74 | 				</styled-flex>
 75 | 			</styled-flex>
 76 | 		</styled-password-strength-wrapper>
 77 | 	</div>
 78 | </template>
 79 | 
 80 | <script lang="ts">
 81 | import { reactive, toRefs, watch, type PropType } from 'vue';
 82 | import {
 83 | 	StyledFlex,
 84 | 	StyledPasswordStrength,
 85 | 	StyledPasswordStrengthWrapper
 86 | } from '../styledComponents/index';
 87 | import { validatePassword } from '../utils/common';
 88 | export default {
 89 | 	name: 'PasswordStrengthIndicator',
 90 | 	components: {
 91 | 		'styled-password-strength-wrapper': StyledPasswordStrengthWrapper,
 92 | 		'styled-password-strength': StyledPasswordStrength,
 93 | 		'styled-flex': StyledFlex
 94 | 	},
 95 | 	props: {
 96 | 		value: {
 97 | 			type: String,
 98 | 			default: ''
 99 | 		},
100 | 		setDisableButton: {
101 | 			type: Function as PropType<(arg: boolean) => void>,
102 | 			default: (_status: boolean) => undefined
103 | 		}
104 | 	},
105 | 	setup(props) {
106 | 		const componentState: {
107 | 			strength: string;
108 | 			score: number;
109 | 			hasSixChar: boolean;
110 | 			hasLowerCase: boolean;
111 | 			hasNumericChar: boolean;
112 | 			hasSpecialChar: boolean;
113 | 			hasUpperCase: boolean;
114 | 			maxThirtySixChar: boolean;
115 | 		} = reactive({
116 | 			strength: '',
117 | 			score: 0,
118 | 			hasSixChar: false,
119 | 			hasLowerCase: false,
120 | 			hasNumericChar: false,
121 | 			hasSpecialChar: false,
122 | 			hasUpperCase: false,
123 | 			maxThirtySixChar: false
124 | 		});
125 | 		const eventHandler = (e: { preventDefault: () => void }) => {
126 | 			e.preventDefault();
127 | 		};
128 | 		watch(
129 | 			() => props.value,
130 | 			(newValue) => {
131 | 				const validationData = validatePassword(newValue);
132 | 				Object.assign(componentState, validationData);
133 | 				if (!validationData.isValid) {
134 | 					props.setDisableButton(true);
135 | 				} else {
136 | 					props.setDisableButton(false);
137 | 				}
138 | 			}
139 | 		);
140 | 		return {
141 | 			...toRefs(componentState),
142 | 			eventHandler
143 | 		};
144 | 	}
145 | };
146 | </script>
147 | 
148 | <style scoped>
149 | @import '../styles/default.css';
150 | </style>
151 | 


--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
 1 | export enum AuthorizerProviderActionType {
 2 | 	SET_USER = 'SET_USER',
 3 | 	SET_TOKEN = 'SET_TOKEN',
 4 | 	SET_LOADING = 'SET_LOADING',
 5 | 	SET_AUTH_DATA = 'SET_AUTH_DATA',
 6 | 	SET_CONFIG = 'SET_CONFIG'
 7 | }
 8 | 
 9 | export enum Views {
10 | 	Login = 'Login',
11 | 	Signup = 'Signup',
12 | 	ForgotPassword = 'ForgotPassword'
13 | }
14 | 
15 | export const ButtonAppearance: Record<string, string> = {
16 | 	Primary: 'Primary',
17 | 	Default: 'Default'
18 | };
19 | 
20 | export const MessageType: Record<string, string> = {
21 | 	Error: 'Error',
22 | 	Success: 'Success'
23 | };
24 | 
25 | // TODO use based on theme primary color
26 | export const passwordStrengthIndicatorOpacity: Record<string, number> = {
27 | 	default: 0.15,
28 | 	weak: 0.4,
29 | 	good: 0.6,
30 | 	strong: 0.8,
31 | 	veryStrong: 1
32 | };
33 | 


--------------------------------------------------------------------------------
/src/icons/Apple.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div
 3 | 		:style="{
 4 | 			position: 'absolute',
 5 | 			left: '10px',
 6 | 			top: '10px',
 7 | 			display: 'flex'
 8 | 		}"
 9 | 	>
10 | 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 315" width="24px" height="24px">
11 | 			<path
12 | 				d="M213.803 167.03c.442 47.58 41.74 63.413 42.197 63.615-.35 1.116-6.599 22.563-21.757 44.716-13.104 19.153-26.705 38.235-48.13 38.63-21.05.388-27.82-12.483-51.888-12.483-24.061 0-31.582 12.088-51.51 12.871-20.68.783-36.428-20.71-49.64-39.793-27-39.033-47.633-110.3-19.928-158.406 13.763-23.89 38.36-39.017 65.056-39.405 20.307-.387 39.475 13.662 51.889 13.662 12.406 0 35.699-16.895 60.186-14.414 10.25.427 39.026 4.14 57.503 31.186-1.49.923-34.335 20.044-33.978 59.822M174.24 50.199c10.98-13.29 18.369-31.79 16.353-50.199-15.826.636-34.962 10.546-46.314 23.828-10.173 11.763-19.082 30.589-16.678 48.633 17.64 1.365 35.66-8.964 46.64-22.262"
13 | 			/>
14 | 		</svg>
15 | 	</div>
16 | </template>
17 | 
18 | <script lang="ts">
19 | export default {
20 | 	name: 'Apple'
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/icons/Close.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="10px" height="10px">
 3 | 		<g>
 4 | 			<path
 5 | 				fill="#ffffff"
 6 | 				d="M617.2,495.8l349.1,350.9c31.7,31.8,31.7,83.5,0,115.3c-31.7,31.9-83.1,31.9-114.8,0L502.4,611.2L149.8,965.6c-32,32.2-83.8,32.2-115.8,0c-32-32.1-32-84.3,0-116.4l352.6-354.5L48.2,154.6c-31.7-31.9-31.7-83.5,0-115.4c31.7-31.9,83.1-31.9,114.7,0l338.4,340.2l343.3-345c32-32.1,83.8-32.1,115.8,0c32,32.2,32,84.3,0,116.4L617.2,495.8z"
 7 | 			/>
 8 | 		</g>
 9 | 	</svg>
10 | </template>
11 | 
12 | <script lang="ts">
13 | export default {
14 | 	name: 'Close'
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/icons/Discord.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div
 3 |         :style="{
 4 |             position: 'absolute',
 5 |             left: '10px',
 6 |             top: '10px',
 7 |             display: 'flex'
 8 | 
 9 |         }"
10 |     >
11 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 315" width="24px" height="24px">
12 | 			<path 
13 |                 d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#5865F2" fill-rule="nonzero">
14 |             </path>
15 | 		</svg>
16 |     </div>
17 | 
18 | </template>
19 | 
20 | <script lang="ts">
21 | export default {
22 | 	name: 'Discord'
23 | };
24 | </script>


--------------------------------------------------------------------------------
/src/icons/Facebook.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div
 3 | 		:style="{
 4 | 			position: 'absolute',
 5 | 			left: '10px',
 6 | 			top: '12px',
 7 | 			display: 'flex'
 8 | 		}"
 9 | 	>
10 | 		<svg
11 | 			xmlns="http://www.w3.org/2000/svg"
12 | 			viewBox="0 0 50 50"
13 | 			width="24px"
14 | 			height="24px"
15 | 			fill="#1877f2"
16 | 		>
17 | 			<path
18 | 				d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M37,19h-2c-2.14,0-3,0.5-3,2 v3h5l-1,5h-4v15h-5V29h-4v-5h4v-3c0-4,2-7,6-7c2.9,0,4,1,4,1V19z"
19 | 			/>
20 | 		</svg>
21 | 	</div>
22 | </template>
23 | 
24 | <script lang="ts">
25 | export default {
26 | 	name: 'Facebook'
27 | };
28 | </script>
29 | 


--------------------------------------------------------------------------------
/src/icons/Github.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div
 3 | 		:style="{
 4 | 			position: 'absolute',
 5 | 			left: '10px',
 6 | 			top: '12px',
 7 | 			display: 'flex'
 8 | 		}"
 9 | 	>
10 | 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.32 291.32" width="24px" height="24px">
11 | 			<path
12 | 				d="M145.66 0C65.219 0 0 65.219 0 145.66c0 80.45 65.219 145.66 145.66 145.66s145.66-65.21 145.66-145.66C291.319 65.219 226.1 0 145.66 0zm40.802 256.625c-.838-11.398-1.775-25.518-1.83-31.235-.364-4.388-.838-15.549-11.434-22.677 42.068-3.523 62.087-26.774 63.526-57.499 1.202-17.497-5.754-32.883-18.107-45.3.628-13.282-.401-29.023-1.256-35.941-9.486-2.731-31.608 8.949-37.79 13.947-13.037-5.062-44.945-6.837-64.336 0-13.747-9.668-29.396-15.64-37.926-13.974-7.875 17.452-2.813 33.948-1.275 35.914-10.142 9.268-24.289 20.675-20.447 44.572 6.163 35.04 30.816 53.94 70.508 58.564-8.466 1.73-9.896 8.048-10.606 10.788-26.656 10.997-34.275-6.791-37.644-11.425-11.188-13.847-21.23-9.832-21.849-9.614-.601.218-1.056 1.092-.992 1.511.564 2.986 6.655 6.018 6.955 6.263 8.257 6.154 11.316 17.27 13.2 20.438 11.844 19.473 39.374 11.398 39.638 11.562.018 1.702-.191 16.032-.355 27.184C64.245 245.992 27.311 200.2 27.311 145.66c0-65.365 52.984-118.348 118.348-118.348S264.008 80.295 264.008 145.66c0 51.008-32.318 94.332-77.546 110.965z"
13 | 				fill="#2b414d"
14 | 			/>
15 | 		</svg>
16 | 	</div>
17 | </template>
18 | 
19 | <script lang="ts">
20 | export default {
21 | 	name: 'Github'
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/icons/Google.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div
 3 | 		:style="{
 4 | 			position: 'absolute',
 5 | 			left: '10px',
 6 | 			top: '12px',
 7 | 			display: 'flex'
 8 | 		}"
 9 | 	>
10 | 		<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
11 | 			<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
12 | 				<path
13 | 					fill="#4285F4"
14 | 					d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
15 | 				/>
16 | 				<path
17 | 					fill="#34A853"
18 | 					d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
19 | 				/>
20 | 				<path
21 | 					fill="#FBBC05"
22 | 					d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
23 | 				/>
24 | 				<path
25 | 					fill="#EA4335"
26 | 					d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
27 | 				/>
28 | 			</g>
29 | 		</svg>
30 | 	</div>
31 | </template>
32 | 
33 | <script lang="ts">
34 | export default {
35 | 	name: 'Google'
36 | };
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/icons/Linkedin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div
 3 | 		:style="{
 4 | 			position: 'absolute',
 5 | 			left: '8px',
 6 | 			top: '7.5px',
 7 | 			display: 'flex'
 8 | 		}"
 9 | 	>
10 | 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="32px" height="32px">
11 | 			<path
12 | 				fill="#0288D1"
13 | 				d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"
14 | 			/>
15 | 			<path
16 | 				fill="#FFF"
17 | 				d="M12 19H17V36H12zM14.485 17h-.028C12.965 17 12 15.888 12 14.499 12 13.08 12.995 12 14.514 12c1.521 0 2.458 1.08 2.486 2.499C17 15.887 16.035 17 14.485 17zM36 36h-5v-9.099c0-2.198-1.225-3.698-3.192-3.698-1.501 0-2.313 1.012-2.707 1.99C24.957 25.543 25 26.511 25 27v9h-5V19h5v2.616C25.721 20.5 26.85 19 29.738 19c3.578 0 6.261 2.25 6.261 7.274L36 36 36 36z"
18 | 			/>
19 | 		</svg>
20 | 	</div>
21 | </template>
22 | 
23 | <script lang="ts">
24 | export default {
25 | 	name: 'Linkedin'
26 | };
27 | </script>
28 | 


--------------------------------------------------------------------------------
/src/icons/Microsoft.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div
 3 | 		:style="{
 4 | 			position: 'absolute',
 5 | 			left: '10px',
 6 | 			top: '12px',
 7 | 			display: 'flex'
 8 | 		}"
 9 | 	>
10 | 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px">
11 | 			<path fill="#ff5722" d="M6 6H22V22H6z" transform="rotate(-180 14 14)" />
12 | 			<path fill="#4caf50" d="M26 6H42V22H26z" transform="rotate(-180 34 14)" />
13 | 			<path fill="#ffc107" d="M26 26H42V42H26z" transform="rotate(-180 34 34)" />
14 | 			<path fill="#03a9f4" d="M6 26H22V42H6z" transform="rotate(-180 14 34)" />
15 | 		</svg>
16 | 	</div>
17 | </template>
18 | 
19 | <script lang="ts">
20 | export default {
21 | 	name: 'Microsoft'
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/icons/Roblox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div
 3 |         :style="{
 4 |             position: 'absolute',
 5 |             left: '10px',
 6 |             top: '10px',
 7 |             display: 'flex'
 8 | 
 9 |         }"
10 |     >
11 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 315" width="24px" height="24px">
12 | 			<path class="a" d="M41.2648,12.6719,14.7123,5.5572a1.666,1.666,0,0,0-2.04,1.178L5.5572,33.2877a1.666,1.666,0,0,0,1.178,2.04l26.5525,7.1147a1.666,1.666,0,0,0,2.04-1.178l7.1147-26.5525a1.666,1.666,0,0,0-1.178-2.04Z"/><path class="a" d="M29.3193,20.51l-8.1808-2.192a.5133.5133,0,0,0-.6287.3629l-2.192,8.1808a.5133.5133,0,0,0,.3629.6287l8.1808,2.192a.5133.5133,0,0,0,.6287-.3629l2.192-8.1808A.5133.5133,0,0,0,29.3193,20.51Z"
13 |             />
14 | 		</svg>
15 |     </div>
16 | 
17 | </template>
18 | 
19 | <script lang="ts">
20 | export default {
21 | 	name: 'Roblox'
22 | };
23 | </script>


--------------------------------------------------------------------------------
/src/icons/Twitter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div
 3 | 		:style="{
 4 | 			position: 'absolute',
 5 | 			left: '10px',
 6 | 			top: '12px',
 7 | 			display: 'flex'
 8 | 		}"
 9 | 	>
10 | 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px">
11 | 			<path
12 | 				fill="#03A9F4"
13 | 				d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
14 | 			/>
15 | 		</svg>
16 | 	</div>
17 | </template>
18 | 
19 | <script lang="ts">
20 | export default {
21 | 	name: 'Twitter'
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import AuthorizerProvider from './components/AuthorizerProvider.vue';
 2 | import AuthorizerSignup from './components/AuthorizerSignup.vue';
 3 | import AuthorizerBasicAuthLogin from './components/AuthorizerBasicAuthLogin.vue';
 4 | import AuthorizerMagicLinkLogin from './components/AuthorizerMagicLinkLogin.vue';
 5 | import AuthorizerForgotPassword from './components/AuthorizerForgotPassword.vue';
 6 | import AuthorizerSocialLogin from './components/AuthorizerSocialLogin.vue';
 7 | import AuthorizerResetPassword from './components/AuthorizerResetPassword.vue';
 8 | import AuthorizerVerifyOtp from './components/AuthorizerVerifyOtp.vue';
 9 | import AuthorizerRoot from './components/AuthorizerRoot.vue';
10 | 
11 | export {
12 | 	AuthorizerProvider,
13 | 	AuthorizerSignup,
14 | 	AuthorizerBasicAuthLogin,
15 | 	AuthorizerMagicLinkLogin,
16 | 	AuthorizerForgotPassword,
17 | 	AuthorizerSocialLogin,
18 | 	AuthorizerResetPassword,
19 | 	AuthorizerVerifyOtp,
20 | 	AuthorizerRoot
21 | };
22 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // bridge between TypeScript and Vue, providing type definitions and declarations
3 | // that help TypeScript understand Vue's components and syntax
4 | declare module '*.vue' {
5 | 	import { DefineComponent } from 'vue';
6 | 	const component: DefineComponent;
7 | 	export default component;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/state/globalConfig.ts:
--------------------------------------------------------------------------------
 1 | import type { AuthorizerConfig } from '../types';
 2 | import { reactive } from 'vue';
 3 | export default reactive({
 4 | 	authorizerURL: '',
 5 | 	redirectURL: '',
 6 | 	client_id: '',
 7 | 	is_google_login_enabled: false,
 8 | 	is_github_login_enabled: false,
 9 | 	is_facebook_login_enabled: false,
10 | 	is_linkedin_login_enabled: false,
11 | 	is_apple_login_enabled: false,
12 | 	is_discord_login_enabled: false,
13 | 	is_roblox_login_enabled: false,
14 | 	is_email_verification_enabled: false,
15 | 	is_basic_authentication_enabled: false,
16 | 	is_magic_link_login_enabled: false,
17 | 	is_sign_up_enabled: false,
18 | 	is_strong_password_enabled: true,
19 | 	is_twitter_login_enabled: false,
20 | 	is_microsoft_login_enabled: false
21 | }) as AuthorizerConfig;
22 | 


--------------------------------------------------------------------------------
/src/state/globalContext.ts:
--------------------------------------------------------------------------------
 1 | import { reactive } from 'vue';
 2 | import { Authorizer } from '@authorizerdev/authorizer-js';
 3 | import type { AuthorizerContextPropsType } from '../types';
 4 | import { hasWindow } from '../utils/window';
 5 | export default reactive({
 6 | 	user: null,
 7 | 	token: null,
 8 | 	loading: false,
 9 | 	setLoading: () => undefined,
10 | 	setToken: () => undefined,
11 | 	setUser: () => undefined,
12 | 	setAuthData: () => undefined,
13 | 	authorizerRef: new Authorizer({
14 | 		authorizerURL: `http://localhost:8080`,
15 | 		redirectURL: hasWindow() ? window.location.origin : '/',
16 | 		clientID: ''
17 | 	}),
18 | 	logout: async () => undefined
19 | }) as AuthorizerContextPropsType;
20 | 


--------------------------------------------------------------------------------
/src/styledComponents/StyledButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<button class="styled-button" :style="style" :disabled="disabled">
 3 | 		<slot></slot>
 4 | 	</button>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import type { CSSProperties } from 'vue';
 9 | import { ButtonAppearance } from '../constants/index';
10 | 
11 | export default {
12 | 	name: 'StyledButton',
13 | 	props: {
14 | 		appearance: {
15 | 			type: String,
16 | 			default: ButtonAppearance.Primary
17 | 		},
18 | 		disabled: Boolean
19 | 	},
20 | 	setup(props) {
21 | 		return {
22 | 			...props,
23 | 			style: {
24 | 				width: '100%',
25 | 				'background-color': props.disabled
26 | 					? 'var(--authorizer-primary-disabled-color)'
27 | 					: props.appearance === ButtonAppearance.Primary
28 | 					? 'var(--authorizer-primary-color)'
29 | 					: 'var(--authorizer-white-color)',
30 | 				color:
31 | 					props.appearance === ButtonAppearance.Default
32 | 						? 'var(--authorizer-text-color)'
33 | 						: 'var(--authorizer-white-color)',
34 | 				border: props.appearance === ButtonAppearance.Primary ? '0px' : '1px'
35 | 			} as CSSProperties
36 | 		};
37 | 	}
38 | };
39 | </script>
40 | 
41 | <style scoped>
42 | @import '../styles/default.css';
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/styledComponents/StyledFlex.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div :style="style">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import type { CSSProperties } from 'vue';
 9 | 
10 | export default {
11 | 	name: 'StyledFlex',
12 | 	props: {
13 | 		flexDirection: {
14 | 			type: String,
15 | 			default: 'row'
16 | 		},
17 | 		alignItems: {
18 | 			type: String,
19 | 			default: 'center'
20 | 		},
21 | 		justifyContent: {
22 | 			type: String,
23 | 			default: 'center'
24 | 		},
25 | 		wrap: {
26 | 			type: String,
27 | 			default: 'wrap'
28 | 		},
29 | 		width: {
30 | 			type: String,
31 | 			default: '100%'
32 | 		}
33 | 	},
34 | 	setup(props) {
35 | 		return {
36 | 			...props,
37 | 			style: {
38 | 				display: 'flex',
39 | 				'flex-direction': props.flexDirection,
40 | 				'align-items': props.alignItems,
41 | 				'justify-content': props.justifyContent,
42 | 				'flex-wrap': props.wrap,
43 | 				width: props.width
44 | 			} as CSSProperties
45 | 		};
46 | 	}
47 | };
48 | </script>
49 | 


--------------------------------------------------------------------------------
/src/styledComponents/StyledFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="styled-footer">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | export default {
 9 | 	name: 'StyledFooter'
10 | };
11 | </script>
12 | 
13 | <style scoped>
14 | @import '../styles/default.css';
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/styledComponents/StyledLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<span class="styled-link" :style="style">
 3 | 		<slot></slot>
 4 | 	</span>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import type { CSSProperties } from 'vue';
 9 | 
10 | export default {
11 | 	name: 'StyledLink',
12 | 	props: {
13 | 		marginBottom: {
14 | 			type: String,
15 | 			default: '0px'
16 | 		}
17 | 	},
18 | 	setup(props) {
19 | 		return {
20 | 			...props,
21 | 			style: {
22 | 				'margin-bottom': props.marginBottom
23 | 			} as CSSProperties
24 | 		};
25 | 	}
26 | };
27 | </script>
28 | 
29 | <style scoped>
30 | @import '../styles/default.css';
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/styledComponents/StyledMessageWrapper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="styled-message-wrapper" :style="style">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import type { CSSProperties } from 'vue';
 9 | import { MessageType } from '../constants/index';
10 | 
11 | export default {
12 | 	name: 'StyledMessageWrapper',
13 | 	props: {
14 | 		type: {
15 | 			type: String,
16 | 			default: MessageType.Success
17 | 		}
18 | 	},
19 | 	setup(props) {
20 | 		return {
21 | 			...props,
22 | 			style: {
23 | 				'background-color':
24 | 					props.type === MessageType.Error
25 | 						? 'var(--authorizer-danger-color)'
26 | 						: 'var(--authorizer-success-color)'
27 | 			} as CSSProperties
28 | 		};
29 | 	}
30 | };
31 | </script>
32 | 
33 | <style scoped>
34 | @import '../styles/default.css';
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/styledComponents/StyledPasswordStrength.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div
 3 | 		class="styled-password-strength"
 4 | 		:style="{ opacity: passwordStrengthIndicatorOpacity[strength] }"
 5 | 	>
 6 | 		<slot></slot>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import { passwordStrengthIndicatorOpacity } from '../constants/index';
12 | 
13 | export default {
14 | 	name: 'StyledPasswordStrength',
15 | 	props: {
16 | 		strength: {
17 | 			type: String,
18 | 			default: 'default'
19 | 		}
20 | 	},
21 | 	setup(props) {
22 | 		return {
23 | 			...props,
24 | 			passwordStrengthIndicatorOpacity
25 | 		};
26 | 	}
27 | };
28 | </script>
29 | 
30 | <style scoped>
31 | @import '../styles/default.css';
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/styledComponents/StyledPasswordStrengthWrapper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="styled-password-strength-wrapper">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | export default {
 9 | 	name: 'StyledPasswordStrengthWrapper'
10 | };
11 | </script>
12 | 
13 | <style scoped>
14 | @import '../styles/default.css';
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/styledComponents/StyledSeparator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="styled-separator">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | export default {
 9 | 	name: 'StyledSeparator'
10 | };
11 | </script>
12 | 
13 | <style scoped>
14 | @import '../styles/default.css';
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/styledComponents/StyledWrapper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="styled-wrapper">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | export default {
 9 | 	name: 'StyledWrapper'
10 | };
11 | </script>
12 | 
13 | <style scoped>
14 | @import '../styles/default.css';
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/styledComponents/index.ts:
--------------------------------------------------------------------------------
 1 | import StyledWrapper from './StyledWrapper.vue';
 2 | import StyledButton from './StyledButton.vue';
 3 | import StyledLink from './StyledLink.vue';
 4 | import StyledSeparator from './StyledSeparator.vue';
 5 | import StyledFooter from './StyledFooter.vue';
 6 | import StyledMessageWrapper from './StyledMessageWrapper.vue';
 7 | import StyledFlex from './StyledFlex.vue';
 8 | import StyledPasswordStrength from './StyledPasswordStrength.vue';
 9 | import StyledPasswordStrengthWrapper from './StyledPasswordStrengthWrapper.vue';
10 | 
11 | export {
12 | 	StyledWrapper,
13 | 	StyledButton,
14 | 	StyledLink,
15 | 	StyledSeparator,
16 | 	StyledFooter,
17 | 	StyledMessageWrapper,
18 | 	StyledFlex,
19 | 	StyledPasswordStrength,
20 | 	StyledPasswordStrengthWrapper
21 | };
22 | 


--------------------------------------------------------------------------------
/src/styles/default.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	--authorizer-primary-color: #3b82f6;
  3 | 	--authorizer-primary-disabled-color: #60a5fa;
  4 | 	--authorizer-gray-color: #d1d5db;
  5 | 	--authorizer-white-color: #ffffff;
  6 | 	--authorizer-danger-color: #dc2626;
  7 | 	--authorizer-success-color: #10b981;
  8 | 	--authorizer-text-color: #374151;
  9 | 	--authorizer-fonts-font-stack: -apple-system, system-ui, sans-serif;
 10 | 	--authorizer-fonts-large-text: 18px;
 11 | 	--authorizer-fonts-medium-text: 14px;
 12 | 	--authorizer-fonts-small-text: 12px;
 13 | 	--authorizer-fonts-tiny-text: 10px;
 14 | 	--authorizer-radius-card: 5px;
 15 | 	--authorizer-radius-button: 5px;
 16 | 	--authorizer-radius-input: 5px;
 17 | }
 18 | .styled-form-group {
 19 | 	width: 100%;
 20 | 	border: 0px;
 21 | 	background-color: var(--authorizer-white-color);
 22 | 	padding: 0 0 15px;
 23 | }
 24 | .form-input-label {
 25 | 	padding: 2.5px;
 26 | }
 27 | .form-input-label > span {
 28 | 	color: var(--authorizer-danger-color);
 29 | }
 30 | .form-input-field {
 31 | 	width: 100%;
 32 | 	margin-top: 5px;
 33 | 	padding: 10px;
 34 | 	display: flex;
 35 | 	flex-direction: column;
 36 | 	align-items: center;
 37 | 	border-radius: var(--authorizer-radius-input);
 38 | 	border: 1px;
 39 | 	border-style: solid;
 40 | 	border-color: var(--authorizer-text-color);
 41 | }
 42 | .input-error-content {
 43 | 	border-color: var(--authorizer-danger-color) !important;
 44 | }
 45 | .input-error-content:hover {
 46 | 	outline-color: var(--authorizer-danger-color);
 47 | }
 48 | .input-error-content:focus {
 49 | 	outline-color: var(--authorizer-danger-color);
 50 | }
 51 | .form-input-error {
 52 | 	font-size: 12px;
 53 | 	font-weight: 400;
 54 | 	color: red;
 55 | 	border-color: var(--authorizer-danger-color);
 56 | }
 57 | .styled-check-box-label {
 58 | 	margin-left: 5px;
 59 | }
 60 | .styled-button {
 61 | 	padding: 15px 10px !important;
 62 | 	display: flex;
 63 | 	justify-content: center;
 64 | 	align-items: center;
 65 | 	min-width: 375px;
 66 | 	max-height: 64px;
 67 | 	border-radius: var(--authorizer-radius-button);
 68 | 	border-color: var(--authorizer-text-color) !important;
 69 | 	border-style: solid !important;
 70 | 	cursor: pointer;
 71 | 	position: relative;
 72 | }
 73 | .styled-button:disabled {
 74 | 	cursor: not-allowed;
 75 | 	background-color: var(--authorizer-primary-disabled-color);
 76 | }
 77 | .styled-footer {
 78 | 	display: flex;
 79 | 	flex-direction: column;
 80 | 	justify-content: center;
 81 | 	align-items: center;
 82 | 	margin-top: 15px;
 83 | }
 84 | .styled-link {
 85 | 	color: var(--authorizer-primary-color);
 86 | 	cursor: pointer;
 87 | }
 88 | .styled-message-wrapper {
 89 | 	padding: 10px;
 90 | 	color: white;
 91 | 	border-radius: var(--authorizer-radius-card);
 92 | 	margin: 10px 0px;
 93 | 	font-size: var(--authorizer-fonts-small-text);
 94 | }
 95 | .styled-password-strength {
 96 | 	width: 100%;
 97 | 	height: 10px;
 98 | 	flex: 0.75;
 99 | 	border-radius: 5px;
100 | 	margin-right: 5px;
101 | 	background-color: var(--authorizer-primary-color);
102 | }
103 | .styled-password-strength-wrapper {
104 | 	margin: 2% 0 0;
105 | }
106 | .styled-separator {
107 | 	display: flex;
108 | 	align-items: center;
109 | 	text-align: center;
110 | 	margin: 10px 0px;
111 | }
112 | .styled-separator::before {
113 | 	content: '';
114 | 	flex: 1;
115 | 	border-bottom: 1px solid var(--authorizer-gray-color);
116 | }
117 | .styled-separator::after {
118 | 	content: '';
119 | 	flex: 1;
120 | 	border-bottom: 1px solid var(--authorizer-gray-color);
121 | }
122 | .styled-separator:not(:empty)::before {
123 | 	margin-right: 0.25em;
124 | }
125 | .styled-separator:not(:empty)::after {
126 | 	margin-left: 0.25em;
127 | }
128 | .styled-wrapper {
129 | 	font-family: var(--authorizer-fonts-font-stack);
130 | 	color: var(--authorizer-text-color);
131 | 	font-size: var(--authorizer-fonts-medium-text);
132 | 	box-sizing: border-box;
133 | 	width: 100%;
134 | }
135 | .styled-wrapper *,
136 | *:before,
137 | *:after {
138 | 	box-sizing: inherit;
139 | }
140 | 


--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
 1 | import { type AuthToken, type User, type Authorizer } from '@authorizerdev/authorizer-js';
 2 | import { AuthorizerProviderActionType } from '../constants';
 3 | import type { Ref } from 'vue';
 4 | 
 5 | export type AuthorizerConfig = {
 6 | 	authorizerURL: string;
 7 | 	redirectURL: string;
 8 | 	client_id: string;
 9 | 	is_google_login_enabled: boolean;
10 | 	is_github_login_enabled: boolean;
11 | 	is_facebook_login_enabled: boolean;
12 | 	is_linkedin_login_enabled: boolean;
13 | 	is_apple_login_enabled: boolean;
14 | 	is_twitter_login_enabled: boolean;
15 | 	is_microsoft_login_enabled: boolean;
16 | 	is_discord_login_enabled: boolean;
17 | 	is_roblox_login_enabled: boolean;
18 | 	is_email_verification_enabled: boolean;
19 | 	is_basic_authentication_enabled: boolean;
20 | 	is_magic_link_login_enabled: boolean;
21 | 	is_sign_up_enabled: boolean;
22 | 	is_strong_password_enabled: boolean;
23 | };
24 | 
25 | export type AuthorizerConfigInput = {
26 | 	authorizerURL: string;
27 | 	redirectURL?: string;
28 | 	clientID?: string;
29 | };
30 | 
31 | export type AuthorizerState = {
32 | 	user: User | null;
33 | 	token: AuthToken | null;
34 | 	loading: boolean;
35 | 	config: AuthorizerConfig;
36 | };
37 | 
38 | export type AuthorizerProviderAction = {
39 | 	type: AuthorizerProviderActionType;
40 | 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
41 | 	payload: any;
42 | };
43 | 
44 | export type AuthorizerContextPropsType = {
45 | 	user: null | User;
46 | 	token: null | AuthToken;
47 | 	loading: boolean;
48 | 	logout: () => Promise<void>;
49 | 	setLoading: (data: boolean) => void;
50 | 	setUser: (data: null | User) => void;
51 | 	setToken: (data: null | AuthToken) => void;
52 | 	setAuthData: (data: AuthorizerState) => void;
53 | 	authorizerRef: Authorizer;
54 | };
55 | 
56 | export type AuthorizerContextOutputType = {
57 | 	user: Ref<null | User>;
58 | 	token: Ref<null | AuthToken>;
59 | 	loading: Ref<boolean>;
60 | 	logout: Ref<() => Promise<void>>;
61 | 	setLoading: Ref<(data: boolean) => void>;
62 | 	setUser: Ref<(data: null | User) => void>;
63 | 	setToken: Ref<(data: null | AuthToken) => void>;
64 | 	setAuthData: Ref<(data: AuthorizerState) => void>;
65 | 	authorizerRef: Ref<Authorizer>;
66 | 	config?: {
67 | 		authorizerURL: Ref<string>;
68 | 		redirectURL: Ref<string>;
69 | 		client_id: Ref<string>;
70 | 		is_google_login_enabled: Ref<boolean>;
71 | 		is_github_login_enabled: Ref<boolean>;
72 | 		is_facebook_login_enabled: Ref<boolean>;
73 | 		is_linkedin_login_enabled: Ref<boolean>;
74 | 		is_apple_login_enabled: Ref<boolean>;
75 | 		is_twitter_login_enabled: Ref<boolean>;
76 | 		is_microsoft_login_enabled: Ref<boolean>;
77 | 		is_discord_login_enabled: Ref<boolean>;
78 | 		is_roblox_login_enabled: Ref<boolean>;
79 | 		is_email_verification_enabled: Ref<boolean>;
80 | 		is_basic_authentication_enabled: Ref<boolean>;
81 | 		is_magic_link_login_enabled: Ref<boolean>;
82 | 		is_sign_up_enabled: Ref<boolean>;
83 | 		is_strong_password_enabled: Ref<boolean>;
84 | 	};
85 | };
86 | 
87 | export type OtpDataType = {
88 | 	isScreenVisible: boolean;
89 | 	email: string;
90 | };
91 | 
92 | export type URLPropsType = {
93 | 	redirectURL?: string;
94 | 	scope?: string[];
95 | 	state?: string;
96 | 	redirect_uri?: string;
97 | 	roles?: string[];
98 | };
99 | 


--------------------------------------------------------------------------------
/src/utils/common.ts:
--------------------------------------------------------------------------------
  1 | import { hasWindow } from './window';
  2 | 
  3 | export const getIntervalDiff = (accessTokenExpiresAt: number) => {
  4 | 	const expiresAt = accessTokenExpiresAt * 1000 - 300000;
  5 | 	const currentDate = new Date();
  6 | 
  7 | 	const millisecond = new Date(expiresAt).getTime() - currentDate.getTime();
  8 | 	return millisecond;
  9 | };
 10 | 
 11 | export const getCrypto = () => {
 12 | 	//ie 11.x uses msCrypto
 13 | 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 14 | 	// @ts-expect-error
 15 | 	return hasWindow() ? window.crypto || window.msCrypto : null;
 16 | };
 17 | 
 18 | export const createRandomString = () => {
 19 | 	const charset = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_~.';
 20 | 	let random = '';
 21 | 	const crypto = getCrypto();
 22 | 	if (crypto) {
 23 | 		const randomValues = Array.from(crypto.getRandomValues(new Uint8Array(43)));
 24 | 		randomValues.forEach((v: number) => (random += charset[v % charset.length]));
 25 | 	}
 26 | 	return random;
 27 | };
 28 | 
 29 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
 30 | export const createQueryParams = (params: any) => {
 31 | 	return Object.keys(params)
 32 | 		.filter((k) => typeof params[k] !== 'undefined')
 33 | 		.map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
 34 | 		.join('&');
 35 | };
 36 | 
 37 | export const isValidEmail = (email: string) => {
 38 | 	return String(email)
 39 | 		.toLowerCase()
 40 | 		.match(
 41 | 			/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 42 | 		);
 43 | };
 44 | 
 45 | export const capitalizeFirstLetter = (data: string) => {
 46 | 	return data ? data.charAt(0).toUpperCase() + data.slice(1) : null;
 47 | };
 48 | 
 49 | export const isValidOtp = (otp: string) => {
 50 | 	const re = /^([A-Z0-9]{6})$/;
 51 | 	return otp && re.test(String(otp.trim()));
 52 | };
 53 | 
 54 | export const formatErrorMessage = (message: string) => {
 55 | 	return message.replace(`[GraphQL] `, '');
 56 | };
 57 | 
 58 | export const hasSpecialChar = (char: string) => {
 59 | 	const re = /[`!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/;
 60 | 	return re.test(char);
 61 | };
 62 | 
 63 | export const validatePassword = (value = '') => {
 64 | 	const res: {
 65 | 		strength: string;
 66 | 		score: number;
 67 | 		hasSixChar: boolean;
 68 | 		hasLowerCase: boolean;
 69 | 		hasNumericChar: boolean;
 70 | 		hasSpecialChar: boolean;
 71 | 		hasUpperCase: boolean;
 72 | 		maxThirtySixChar: boolean;
 73 | 	} = {
 74 | 		score: 0,
 75 | 		strength: '',
 76 | 		hasSixChar: false,
 77 | 		hasLowerCase: false,
 78 | 		hasUpperCase: false,
 79 | 		hasNumericChar: false,
 80 | 		hasSpecialChar: false,
 81 | 		maxThirtySixChar: false
 82 | 	};
 83 | 
 84 | 	if (value.length >= 6) {
 85 | 		res.score = res.score + 1;
 86 | 		res.hasSixChar = true;
 87 | 	}
 88 | 
 89 | 	if (value.length > 0 && value.length <= 36) {
 90 | 		res.score = res.score + 1;
 91 | 		res.maxThirtySixChar = true;
 92 | 	}
 93 | 
 94 | 	Array.from(value).forEach((char) => {
 95 | 		if (char >= 'A' && char <= 'Z' && !res.hasUpperCase) {
 96 | 			res.score = res.score + 1;
 97 | 			res.hasUpperCase = true;
 98 | 		} else if (char >= 'a' && char <= 'z' && !res.hasLowerCase) {
 99 | 			res.score = res.score + 1;
100 | 			res.hasLowerCase = true;
101 | 		} else if (char >= '0' && char <= '9' && !res.hasNumericChar) {
102 | 			res.score = res.score + 1;
103 | 			res.hasNumericChar = true;
104 | 		} else if (hasSpecialChar(char) && !res.hasSpecialChar) {
105 | 			res.score = res.score + 1;
106 | 			res.hasSpecialChar = true;
107 | 		}
108 | 	});
109 | 
110 | 	if (res.score <= 2) {
111 | 		res.strength = 'Weak';
112 | 	} else if (res.score <= 4) {
113 | 		res.strength = 'Good';
114 | 	} else if (res.score <= 5) {
115 | 		res.strength = 'Strong';
116 | 	} else {
117 | 		res.strength = 'Very Strong';
118 | 	}
119 | 
120 | 	const isValid = Object.values(res).every((i) => Boolean(i));
121 | 	return { ...res, isValid };
122 | };
123 | 


--------------------------------------------------------------------------------
/src/utils/url.ts:
--------------------------------------------------------------------------------
 1 | import { hasWindow } from './window';
 2 | 
 3 | export const getSearchParams = (search = '') => {
 4 | 	let searchPrams = search;
 5 | 	if (!searchPrams && hasWindow()) {
 6 | 		searchPrams = window.location.search;
 7 | 	}
 8 | 	const urlSearchParams = new URLSearchParams(`${searchPrams}`);
 9 | 	const params = Object.fromEntries(urlSearchParams.entries());
10 | 	return params;
11 | };
12 | 


--------------------------------------------------------------------------------
/src/utils/window.ts:
--------------------------------------------------------------------------------
1 | export const hasWindow = () => typeof window !== 'undefined';
2 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | // tsconfig.app.json
 2 | {
 3 | 	"extends": ["@vue/tsconfig/tsconfig.json", "@vue/tsconfig/tsconfig.dom.json"],
 4 | 	"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "example/**/*", "example/**/*.vue"],
 5 | 	"exclude": ["src/**/__tests__/*", "src/**/*.cy.ts"],
 6 | 	"compilerOptions": {
 7 | 		"composite": true,
 8 | 		"baseUrl": ".",
 9 | 		"noEmit": true
10 | 	}
11 | }
12 | 


--------------------------------------------------------------------------------
/tsconfig.build-types.json:
--------------------------------------------------------------------------------
1 | // tsconfig.build-types.json
2 | {
3 | 	"include": ["src/**/*"],
4 | 	"exclude": ["node_modules", "**/*.cy.ts", "**/*.spec.ts", "**/__tests__/**/*"]
5 | }
6 | 


--------------------------------------------------------------------------------
/tsconfig.config.json:
--------------------------------------------------------------------------------
 1 | // tsconfig.config.json
 2 | {
 3 | 	"extends": ["@tsconfig/node18/tsconfig.json", "@vue/tsconfig/tsconfig.json"],
 4 | 	"include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
 5 | 	"compilerOptions": {
 6 | 		"composite": true,
 7 | 		"types": ["node"],
 8 | 		"noEmit": true
 9 | 	}
10 | }
11 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | // tsconfig.json
2 | {
3 | 	"files": [],
4 | 	"references": [{ "path": "./tsconfig.config.json" }, { "path": "./tsconfig.app.json" }]
5 | }
6 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'node:path';
 2 | import { defineConfig } from 'vite';
 3 | import Vue from '@vitejs/plugin-vue';
 4 | 
 5 | export default defineConfig({
 6 | 	// If our .vue files have a style, it will be compiled as a single `.css` file under /dist.
 7 | 	plugins: [Vue()],
 8 | 
 9 | 	build: {
10 | 		// Output compiled files to /dist.
11 | 		outDir: './dist',
12 | 		lib: {
13 | 			// Set the entry point (file that contains our components exported).
14 | 			entry: resolve(__dirname, 'src/index.ts'),
15 | 			// Name of the library.
16 | 			name: 'authorizer-vue',
17 | 			// We are building for CJS and ESM, use a function to rename automatically files.
18 | 			// Example: my-component-library.esm.js
19 | 			fileName: (format) => `${'@authorizerdev/authorizer-vue'}.${format}.js`
20 | 		},
21 | 		rollupOptions: {
22 | 			// Vue is provided by the parent project, don't compile Vue source-code inside our library.
23 | 			external: ['vue', '@authorizerdev/authorizer-js'],
24 | 			output: {
25 | 				globals: {
26 | 					vue: 'Vue',
27 | 					'@authorizerdev/authorizer-js': 'authorizer-js'
28 | 				}
29 | 			},
30 | 			watch: {
31 | 				include: './src/**',
32 | 				clearScreen: false
33 | 			}
34 | 		}
35 | 	}
36 | });
37 | 


--------------------------------------------------------------------------------