@apsel/apsel-ui-authentication v0.5.6

apsel-ui-authentication

(WORK IN PROGRESS: DO NOT USE IN PRODUCTION) Embeddable Authentication module for the Apsel Platform

Project setup

yarn install @apsel/apsel-ui-authentication

How to use

See apsel-ui-test-app for a working demo.

Pre-requisite

Your vue app must use vue-router and vuex as this components depends on creating routes and a store

Notes:

• Make sure your Vue router is in 'history' mode

Route set-up

Wherever you setup your routes you want to add a the special route to the component. (/authentication and /oauth_result)

import { Authentication, routes as login_routes } from 'apsel-ui-authentication';

// Append the authentication specific routes
myOtherRoutes.push(...login_routes);

Then you link to the component; wherever you need it.

The component expects to receive the return route as the query parameter routes. Upon successful login the user will be redirected to that route. You can add query parameters or params to pass some state information along

With a router link:

<router-link :to="{ name: 'authenticate', query: {
                    routes: JSON.stringify({
                        success: { name: 'buy_product', query: { product_id: 12 } },
                    })
                }}" >Login</router-link>

With a router.push

this.$router.push(
    { 
        name: 'authenticate', 
        query: {
            routes: JSON.stringify({
                // Up successfull login the user will be redirect to the route named
                // 'buy_product' with the query parameter '?product_id=12`
                // ==> Adapt this to your need.
                success: { name: 'buy_product', query: { product_id: 12 } },
            })
        }
    }
);

Vuex set-up

TODO()

Upon successfull login the information related to the login will be stored to the auth store. and persisted to the localStorage if available.

It can be accessed the usual way for a store:

this.$store.auth.accessToken
this.$store.auth.userId
this.$store.auth.sessionId

Troubleshooting import

The module include a Simple component that can be used to check if importing from the library works properly.

// This is just a test component to check if it works
import { Simple } from 'apsel-ui-authentication';

myOtherRoutes.push( {   name: 'simple',
                  path: '/simple',
                  component: Simple });