mbari-auth
This NPM module is a VueJS plugin that provides an authentication service utilizing the Auth0 provider. It can be use in browser applications as well as in mobile applications. In order to use this plugin, you must have an Auth0 account and the ability to create 'Applications' in Auth0. These instructions assume that the user will want a consistent authentication process between both application that is running in a web browser and the same application running on a mobile device via Cordova. This allows the developer to use one consistent code base to deliver the application to both the browser and mobile devices. A framework like Quasar can be helpful in achieving this.
These instructions do not go into details about Auth0 as they have lots of good documentation on how to use their services. This plugin is basically a wrapper around two libraries, one for using Auth0 in a browser alone and one for using Auth0 in a mobile app using Cordova. It simplifies the storage of the user information by using local storage and can either use a Vuex store provided by your application or you can add handlers to your components to listen for login/logout events if you don't want to use Vuex.
This plugin utilizes the auth0-js and @auth0/cordova libraries to interact with Auth0 and it is helpful if you read the documentation for those services here:
- auth0-js
- auth0-js API Docs
- @auth0/cordova npm module
- @auth0/cordova API docs
- @auth0/cordova tutorial
Table of contents
Prerequisites
While beyond the scope of these instructions, you will need to create both a Single Page Application and a Native Application in Auth0.
Installation
This module is install in the standard NPM way by using:
npm install --save mbari-auth
Default import
The AuthService plugin utilizes Auth0 to provide authentication so in order to utilize this plugin, you need to have an Auth0 account and configure Auth0 to get the necessary information for this plugin.
Install all the components:
VueBrowser
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the components:
VueUsage
There are a couple of ways to use the AuthService in your application. You can use a Vuex store that has the correct state attributes to hold the user's information, or you can let the AuthService use Local Storage in the browser to hold the user's information. If you use a Vuex store, you can bind the Vuex attributes in your application to make data binding easier. If you want the AuthService to use local storage, you will need to add some methods to your components to handle event publications. The AuthService will publish user information events if it is using Local Storage and your application will be reponsible for handling those events and extracting the information from the events into data properties that are bound to your components.
Example
TODO
Plugin Development
Installation
The first time you create or clone your plugin, you need to install the default dependencies:
npm install
Watch and compile
This will run webpack in watching mode and output the compiled files in the dist folder.
npm run dev
Use it in another project
Put instructions about making sure to run:
cordova plugin add safariviewcontroller
in the src-cordova directory so that you ensure Auth0 has access to the SafariViewController which it needs. This is regardless of what WebView is being used.
While developing, you can follow the install instructions of your plugin and link it into the project that uses it.
In the plugin folder:
npm link
In the other project folder:
npm link mbari-auth
This will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.
Publish to npm
You may have to login to npm before, with npm adduser. The plugin will be built in production mode before getting published on npm.
npm publish
Manual build
This will build the plugin into the dist folder in production mode.
npm run build