marketredesign / mrd-auth0-spa-vue

Vue.js wrapper for auth0-spa-js

MRD Auth0 SPA Vue

Vue wrapper for auth0-spa-js. As seen in Auth0's Vue: Login Tutorial.

Usage

1. Make sure an application in the Auth0 dashboard has been created.
2. Install this package, using npm install @marketredesign/auth0-spa-vue.
3. Import the Auth0Plugin Vue plugin, and optionally the authGuard into your application, using import { Auth0Plugin, authGuard } from "@marketredesign/auth0-spa-vue";
4. Register the plugin with Vue:

Vue.use(Auth0Plugin, {
  domain: 'The Auth0 login domain',
  clientId: 'Auth0 client ID for this application',
  onRedirectCallback: appState => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : 'default redirect'
    );
  }
});

Log in to the App

Example template providing a login button:

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />

    <!-- Check that the SDK client is not currently loading before accessing is methods -->
    <div v-if="!$auth.state.loading">
      <!-- show login when not authenticated -->
      <button v-if="!$auth.state.isAuthenticated" @click="login">Login</button>
      <!-- show logout when authenticated -->
      <button v-if="$auth.state.isAuthenticated" @click="logout">Logout</button>
    </div>
  </div>
</template>

Define the login and logout functions for instance as follows.

login() {
  this.$auth.loginWithRedirect();
}

logout() {
  this.$auth.logout({
    returnTo: window.location.origin
  });
}

User profile information

Once the user authenticates, the SDK extracts the user's profile information and stores it in memory. It can be accessed using this.$auth.state.user from inside a Vue component.

Protecting routes

Routes can be protected by specifying beforeEnter: authGuard.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project to NPM.

Prerequisites

• NodeJS >= 10

Installing

1. Clone the repository
2. Execute npm install

Deployment

1. Make sure you are logged into NPM using npm adduser
2. Verify the version is correct using npm version
3. Publish the package using npm publish

Authors

• Marijn van der Horst - Initial work

See also the list of contributors who participated in this project.

License

This project is licensed under the MRD License - see the LICENSE file for details

mrd-auth0-spa-vue's Issues

Make compatible with excel addin

Is your feature request related to a problem? Please describe.
It seems that this package cannot be used directly in the marketredesign/pricecypher_excel_addin application, even though that is technically just a SPA using Vue 2. (this is what Kadir concluded so we should check first if this is actually the case)

Describe the solution you'd like
Figure out why (if at all) it's not working in the excel addin and fix it.
NB: make sure to include the onAuthenticatedCallback functionality that was added in the excel addin (src/auth/index.js)

Describe alternatives you've considered
Excel addin currently just has a copy of these files, which does work technically.

Additional context
n/a