@laimoon/auth

Auth UI/UX for Laimoon's projects

Usage no npm install needed!

<script type="module">
  import laimoonAuth from 'https://cdn.skypack.dev/@laimoon/auth';
</script>

README

Laimoon Auth UI Package

This JS package provides an easy way to integrate auth popup inside any laimoon's project.

The back-end logic is handled by profiles.laimoon.com.

Get Started

  1. Install the pacakge via npm:
npm i @laimoon/auth --save
  1. Install webpack or any bundler you want, I suggest using Laravel Mix since it wraps webpack's complixity and let you focus on work:
npm install cross-env laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./
  1. Update your webpack.mix.js to the following:
const mix = require('laravel-mix');
mix.js('src/js/auth.js','webroot/js');
  1. Create a JS file under src/js/auth.js and put the following:
require('@laimoon/auth');
  1. Add the following scrips into your package.json:
{
  ...
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  ...
}
  1. Compile your JS file auth.js for production:
npm run prod
  1. Add the generated webroot/js/auth.js into your HTML and then add the following VueJs component into the first element od the body:
<body>
    <div id="app">
        <laimoon-auth referal-code="<?php echo $this->Session->read(‘referalCode’); ?>"
                        source="courses"
                        linkedin-redirect="<?php echo Configure::read(‘Urls.profiles’); ?>/profiles/linkedin"
                        back-end-url="<?php echo Configure::read(‘Urls.profiles’); ?>"
                        manage-profile-url="<?php echo Configure::read(‘Urls.job’); ?>/manage"
                        ></laimoon-auth>
    </div>
    ...
</body>
  1. Once done, you'll have a global object Auth you can consume to open and close the auth popup whenever you want:

The available methods:

Auth.login();    // will open the login UI
Auth.register(); // will open the register UI
Auth.close();    // will close the current open auth popup

Development

This projects uses webpack with the help of Laravel mix, you can refer to webpack config inside webpack.mix.js for more details.

To rebuild the project during development with watcher:

npm run watch

To rebuild the project with minification for production:

npm run prod

To test your work locally while developing it, you can link the package using npm link:

This step is helpful instead of pushing your developemnt work to npm and then pull it back to any project so that you can save time.

  1. In thus repo, run:
npm link
  1. In your test projects, use:
npm link laimoon-auth

Testing

npm run test