npm package: @mbari/mbari-auth
Description: An authentication plugin used by MBARI
Author: Kevin Gomes
Latest version: 0.0.4

# @mbari/mbari-auth

[![npm](https://img.shields.io/npm/v/mbari-auth.svg) ![npm](https://img.shields.io/npm/dm/mbari-auth.svg)](https://www.npmjs.com/package/mbari-auth)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

This NPM module is a VueJS plugin that provides an authentication service utilizing the Auth0 provider.  It can be used 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](https://auth0.com/docs/libraries/auth0js/v9)
- [auth0-js API Docs](https://auth0.github.io/auth0.js/index.html)
- [@auth0/cordova npm module](https://www.npmjs.com/package/@auth0/cordova)
- [@auth0/cordova API docs](https://auth0.github.io/auth0-cordova/)
- [@auth0/cordova tutorial](https://auth0.com/docs/quickstart/native/cordova/01-login)

## Table of contents

- [Installation](#installation)
- [Prerequisites](#prerequisites)
- [Usage](#usage)
- [Example](#example)

# 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/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:

```javascript
import Vue from 'vue'
import AuthService from '@mbari/mbari-auth'

Vue.use(AuthService, {})
```

## Browser

```html
<link rel="stylesheet" href="mbari-auth/dist/mbari-auth.css"/>

<script src="vue.js"></script>
<script src="mbari-auth/dist/mbari-auth.browser.js"></script>
```

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

```javascript
Vue.use(AuthService, {})
```
# Usage

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/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 --access public
```

## Manual build

This will build the plugin into the `dist` folder in production mode.

```
npm run build
```

---

## License

[MIT](http://opensource.org/licenses/MIT)