npmpackage.info

vue-auth0-plugin

Simple auth0 wrapper for Vue.js based on the Auth0 Single Page App SDK.

3.0.22

MIT

TypeScript

43.78 kB

54,517 4.4

Installations

npm install vue-auth0-plugin

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, UMD

Node Version

20.7.0

NPM Version

10.2.3 Pull Requests

Open

6

Total

1,002

Closed

124

Merged

872

Issues

Open

1

Total

23

Closed

22

Releases

v3.0.22

Updated on Dec 11, 2023

v3.0.21

Updated on Sep 01, 2023

v3.0.20

Updated on Aug 22, 2023

v3.0.19

Updated on Jul 19, 2023

v3.0.18

Updated on Jul 13, 2023

v3.0.17

Updated on Jun 15, 2023

View All 58 releases

Contributors

Unable to fetch Contributors

View All 3 Contributors

Languages

TypeScript

JavaScript

TypeScript (81.66%)

JavaScript (18.34%)

validate.email 🚀

Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.

Developer

jnt0r

Download Statistics

Total Downloads

54,517

Last Day

Last Week

Last Month

398

Last Year

12,815

GitHub Statistics

MIT License

21 Stars

957 Commits

5 Forks

3 Watchers

7 Branches

3 Contributors

Updated on Apr 29, 2024

Maintainers

Package Meta Information

Latest Version

3.0.22

Package Id

vue-auth0-plugin@3.0.22

Unpacked Size

43.78 kB

Size

7.59 kB

File Count

NPM Version

10.2.3

Node Version

20.7.0

Published on

Dec 11, 2023

Total Downloads

Cumulative downloads

Total Downloads

54,517

Last Day

15%

Compared to previous day

Last Week

14.9%

Compared to previous week

Last Month

53.7%

398

Compared to previous month

Last Year

-14.4%

12,815

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Vue-Auth0-Plugin

Simple Auth0 wrapper for Vue.js based on the Auth0 Single Page App SDK

:warning: Currently, only compatible with Vue 3. Support for Vue 2 is planned.

Prerequisites

You need an Auth0 tenant and a configured Auth0 application. For information about how to create these, take a look at the official documentation.

Installation

1npm install --save vue-auth0-plugin

Samples

To see some samples how to use the plugin, take a look into the samples folder in the project.

Usage

Register the plugin in your main.ts file. For a list of available options, take a look here: https://auth0.github.io/auth0-spa-js/interfaces/auth0clientoptions.html.

1import { createApp } from 'vue';
2import VueAuth0Plugin from 'vue-auth0-plugin';
3import App from './App.vue';
4
5const app = createApp(App);
6app.use(VueAuth0Plugin, {
7  domain: 'YOUR_AUTH0_DOMAIN',
8  clientId: 'YOUR_CLIENT_ID',
9  // ... other optional options ...
10});
11app.mount('#app');

Then Auth0 can be injected using the provided injectAuth function. For more information about provide/inject, take a look here https://v3.vuejs.org/guide/component-provide-inject.html. For example:

1import { injectAuth } from 'vue-auth0-plugin'
2
3const auth = injectAuth();
4
5const authenticated = auth.authenticated;
6const loading = auth.loading;
7const user = auth.user;
8
9if (!auth.authenticated) {
10    auth.loginWithRedirect();
11    
12    // If errors occurre during login, they are provided in auth.error property
13    if (auth.error != undefined) {
14        // Do something with the error
15    }
16}

Auth0 can also be injected using the Options API like the example below

1<template>
2  <div class="about">
3    <h1>You are logged in as {{ auth.user.name }} ({{ auth.user.nickname }})</h1>
4    <img :src="auth.user.picture" alt="Profile picture"/>
5    <button v-on:click="auth.logout()">Logout</button>
6  </div>
7</template>
8<script lang="ts">
9import { Options, Vue } from 'vue-class-component';
10import { injectionToken } from 'vue-auth0-plugin'
11@Options({
12  inject: [injectionToken],
13})
14export default class MyComponent extends Vue {}
15</script>

If you want to use the state of authentication when you do not have access to the Vue instance, you can use the exported AuthenticationState.

1import { AuthenticationState } from 'vue-auth0-plugin';
2
3if (!AuthenticationState.authenticated) {
4    // do something here
5}
6
7// or asynchronous using Promise
8if (!await AuthenticationState.getAuthenticatedAsPromise) {
9    // do something here
10}

INFO: The synchronous AuthenticationState.authenticated can give wrong result if used before initialization of the plugin. Then the plugin is still loading the state of authentication and returns the default value false. In this case you should use the asynchronous AuthenticationState.getAuthenticatedAsPromise that resolves when the loading has finished and then returns the state of authentication.

If you want to use the properties provided by Auth0 when you do not have access to the Vue instance, you can use the exported AuthenticationProperties.

1import { AuthenticationProperties as auth0 } from 'vue-auth0-plugin';
2
3const token = auth0.getTokenSilently();

AuthenticationGuards

The plugin implements two Vue Router NavigationGuards to secure routes with Auth0. The AuthenticationGuard has an integrated redirect to the Auth0 login when the user is not authenticated. The AuthenticationGuardWithoutLoginRedirect does not have this redirect. The example below shows how to use this AuthenticationGuards.

1import { AuthenticationGuard } from 'vue-auth0-plugin';
2// or alternative
3import { AuthenticationGuardWithoutLoginRedirect } from 'vue-auth0-plugin';
4
5let routes = [
6    ...
7    {
8        path: '/private',
9        name: 'PrivateRoute',
10        component: () => import(/* webpackChunkName: "private" */ '../views/Private.vue'),
11        beforeEnter: AuthenticationGuard, // or AuthenticationGuardWithoutLoginRedirect
12    },
13];
14
15const router = createRouter({
16  history: createWebHistory(YOUR_BASE_URL),
17  routes,
18});

Changelog

Changelog can be seen at GitHub Releases.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

If you have questions or want to provide a good idea for improvements, please open an issue.

License

MIT

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.4

/10

Last Scanned on 2025-02-17

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue-auth0-plugin

vue-cli-plugin-auth0

1.0.4

Vue CLI 4 plugin for adding Auth0 files.

vue-auth0

1.0.1

Vue plugin for auth0

auth0-etus

1.8.0

Auth0 plugin to authenticate a project using Vue.js

@mrzwick/auth0-vue-plugin

0.0.6

Plugin for Auth0 integration with a Vue application

vue-auth0-plugin

Installations

Developer Guide

Yes

CommonJS, UMD

20.7.0

10.2.3

Pull Requests

6

1,002

124

872

Issues

1

23

22

Releases

Contributors

Unable to fetch Contributors

Languages

validate.email 🚀

Developer

jnt0r

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

54,517

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Vue-Auth0-Plugin

Prerequisites

Installation

Samples

Usage

AuthenticationGuards

Changelog

Contributing

License

10

10

10

10

10

2

0

0

0

0

0

0

4.4

/10

Other packages similar to vue-auth0-plugin