
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
@authorizerdev/authorizer-vue
Advanced tools
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.
Get Authorizer URL by instantiating Authorizer instance and configuring it with necessary environment variables.
Install @authorizerdev/authorizer-vue
library
npm i --save @authorizerdev/authorizer-vue
OR
yarn add @authorizerdev/authorizer-vue
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>
npm run dev # or yarn dev
This starts a local dev-server with a sandbox environment.
npm run build # or yarn build
This uses Vite to build the project files to /dist
and call build:types
script.
npm run build:types # or yarn build:types
This generates TypeScript declaration files for our .vue files (using vue-tsc
).
npm run typecheck # or yarn typecheck
This runs a typecheck against our Vue components to make sure there are no type errors (using vue-tsc
).
tsconfig.json
contains a reference to all the others tsconfig files.tsconfig.app.json
will take care of compiling our Vue components inside src/
.tsconfig.build-types.json
will take care of generating the proper types declaration files of our Vue components inside src/
.tsconfig.config.json
will take care of all our tooling configuration files (we only have vite at the moment)..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..elsintrc.json
file in the project root, check the comments in each section to learn more about the configuarition details."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/pre-commit
which formats the code and checks for any linting errors.FAQs
authorizer vue sdk
The npm package @authorizerdev/authorizer-vue receives a total of 2 weekly downloads. As such, @authorizerdev/authorizer-vue popularity was classified as not popular.
We found that @authorizerdev/authorizer-vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.