Spa-auth-components NPM

Spa auth components

Installation

Installing with npm is recommended and it works seamlessly with webpack.

npm i spa-auth-components

To external usage of this library we should modify webpack config firstly:

externals: {
  spa_auth: 'SpaAuthComponents'
}

Next, we should add library source to your project page:

<!doctype html>
<html lang="en">
<head>
  ...
  <link href="{{ config("app.mixBaseAssetUrl") . mix('css/app.css') }}" type="text/css" rel="stylesheet" />
  <link href="https://unpkg.com/spa-auth-components/dist/SpaAuthComponents.css" type="text/css" rel="stylesheet" />
</head>
<body>
...
<script src="{{ config("app.mixBaseAssetUrl") . mix('js/vendor.js') }}"></script>
<script src="{{ config("app.mixBaseAssetUrl") . mix('js/manifest.js') }}"></script>
<script src="https://unpkg.com/spa-auth-components/dist/SpaAuthComponents.umd.min.js"></script>
<script src="{{ config("app.mixBaseAssetUrl") . mix('js/app.js') }}"></script>
</body>
</html>

How to use

Auth library can be inited by code presented below:

import Vue from 'vue';
import TripUpAuth from 'spa_auth';
import store from '@/store';
import router from '@/router';
import i18n from '@/lang';
Vue.use(TripUpAuth, {
  inject: {
    store: store, // required
    router: router, // required
    i18n: i18n,
    userStatusChanged: function(user) {
      // any actions
    },
  },
  pages: {
    login: {
      title: 'Sign In',
    },
    resetPassword: {
      title: 'Reset password',
    },
  },
  baseApiUrl: window.Ziggy.baseUrl + 'inventory',
});

You can change any field of default component config:

import { FakeAuthRepository } from '@/services/fake-auth-repository'
import { FakeUserRepository } from '@/services/fake-user-repository'

export default {
  inject: {
    store: null,
    router: null,
    authApi: new FakeAuthRepository(),
    userApi: new FakeUserRepository(),
    baseApiUrl: null
  },
  pages: {
    login: {
      title: 'Login Title',
      name: 'login',
      path: '/login'
    },
    resetPassword: {
      title: 'Reset password',
      path: '/reset',
      name: 'reset.password'
    },
    setPassword: {
      title: 'Set password',
      name: 'set.password',
      path: '/password/set'
    }
  }
}

#Backend configuration

First of all we should add TripUpAuthService provider to config/app.php file:

  'providers' => [
        ...
        \Tripup\Auth\TripupServiceProvider::class,
        ...
    ],

Next we should add SsoCookie middleware to App/Http/Kernal file:

use Tripup\Auth\Middlewares\SsoCookie;

class Kernel extends HttpKernel
{
    ...
    protected $middleware = [
        ...
        SsoCookie::class,
    ];
    ...
}

After we should change config/auth.php configuiration:

[
...
    'defaults' => [
        'guard' => 'chain',
        'passwords' => 'oauth2',
    ],
    'guards' => [
        "chain"=>[
            'driver' => 'chain_guard',
            'chain'=>['web', 'sso'],
        ],
        'web' => [
            'driver' => 'session',
            'provider' => 'oauth2',
        ],
        'api' => [
            'driver' => 'tripup_api_guard',
            'provider' => 'users',
            'hash' => false,
        ],
        'sso' => [
            'driver' => 'tripup_guard'
        ],
    ],

    'providers' => [
        'oauth2'=>[
            'driver'=>'oauth2'
        ]
    ],
...
]

Next we should except TRIPUP_SSO and isLogged cookies from encription:

namespace App\Http\Middleware;

use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;

class EncryptCookies extends Middleware
{
    /**
     * The names of the cookies that should not be encrypted.
     *
     * @var array
     */
    protected $except = [
        "TRIPUP_SSO",
        "isLogged"
    ];
}