Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@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
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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.