authorizer-vue
Authorizer Vue SDK allows you to implement authentication in your Vue application quickly. It also allows you to access the user profile.
Here is a quick guide on getting started with @authorizerdev/authorizer-vue
package.
Step 1 - Create Instance
Get Authorizer URL by instantiating Authorizer instance and configuring it with necessary environment variables.
Step 2 - Install package
Install @authorizerdev/authorizer-vue
library
npm i --save @authorizerdev/authorizer-vue
OR
yarn add @authorizerdev/authorizer-vue
Step 3 - Configure Provider and use Authorizer Components
Authorizer comes with a Provider component that exposes a composable function to return a reactive context to it's children by using the useAuthorizer
injection key, internally 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.
<template>
<div :style="{ display: 'flex', justifyContent: 'center' }">
<authorizer-provider
:config="{
authorizerURL: 'http://localhost:8080',
redirectURL: window.location.origin,
clientID: 'AUTHORIZER_CLIENT_ID'
}"
:onStateChangeCallback="stateChangeCallback"
>
<router-view />
</authorizer-provider>
</div>
</template>
<script lang="ts">
import { AuthorizerProvider } from '@authorizerdev/authorizer-vue';
import type { AuthorizerState } from '@authorizerdev/authorizer-vue/dist/types/types';
export default {
components: {
'authorizer-provider': AuthorizerProvider
},
setup() {
const stateChangeCallback = (state: AuthorizerState) => {
console.log('state changed ==>> ', state);
};
return {
stateChangeCallback,
window
};
}
};
</script>
<template>
<div>
<h1 :style="{ textAlign: 'center' }">Welcome to Authorizer</h1>
<br />
<authorizer-root :onLogin="onLogin" />
</div>
</template>
<script lang="ts">
import { inject, watch } from 'vue';
import { useRouter } from 'vue-router';
import { AuthorizerRoot } from '@authorizerdev/authorizer-vue';
import type { AuthorizerContextOutputType } from '@authorizerdev/authorizer-vue/dist/types/types';
export default {
name: 'Login',
components: {
'authorizer-root': AuthorizerRoot
},
setup() {
const useAuthorizer = inject('useAuthorizer') as () => AuthorizerContextOutputType;
const { token, config } = useAuthorizer?.();
const router = useRouter();
const onLogin = () => {
console.log('test login');
};
watch(
token,
(newvalue) => {
if (newvalue) {
console.log('access token ==>> ', token?.value?.access_token);
router.push('/dashboard');
}
},
{
immediate: true
}
);
config &&
watch(config.is_basic_authentication_enabled, (newvalue, oldvalue) => {
console.log('basic auth enabled (old value) ==>> ', oldvalue);
console.log('basic auth enabled (new value) ==>> ', newvalue);
});
return {
onLogin
};
}
};
</script>
Commands
Local Development
The recommended workflow is to run authorizer in one terminal:
npm run dev
This starts a local dev-server with a sandbox environment.
npm run build
This uses Vite to build the project files to /dist
and call build:types
script.
npm run build:types
This generates TypeScript declaration files for our .vue files (using vue-tsc
).
npm run typecheck
This runs a typecheck against our Vue components to make sure there are no type errors (using vue-tsc
).
Configuration
Typescript:
- Root tsconfig:
tsconfig.json
contains a reference to all the others tsconfig files. - Components tsconfig:
tsconfig.app.json
will take care of compiling our Vue components inside src/
. - Build-types tsconfig:
tsconfig.build-types.json
will take care of generating the proper types declaration files of our Vue components inside src/
. - Tools tsconfig:
tsconfig.config.json
will take care of all our tooling configuration files (we only have vite at the moment).
Vite:
- Vite requires a configuration to compile and bundle
.vue
to .js
files that can be consumed through an npm module. It uses rollup.js under the hood, check out the comments in vite.config.ts
file in the project root to learn more about the configuarition details.
Eslint:
- 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.
Prettier:
- 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.
Husky:
- A pre-commit hook is set in
.husky/pre-commit
which formats the code and checks for any linting errors.