@databiz/login

Web Component to simplify authentication using Google oAuth for Databiz group domains, it wraps the Google Sign-in for Websites SDK and expose custom events for its functionalities.

How to use

Install the package from NPM registry

$ npm install @databiz/login
--- or ---
$ yarn add @databiz/login

If you want to include the compiled version (no build-step needed), just load the script tag:

<script src="./node_modules/@databiz/login/component.js" async defer></script>

Or if you are working with Webpack and ES modules:

import '@databiz/login';

then in your markup add

<databiz-login
  client-id="YOUR-CLIENT-ID"
></databiz-login>

the client-id is a required parameter and you can obtain it from the Google Developer console.

This will render the Google login button, once clicked a popup will be prompted to user to choose an account and confirm.

To react to the login attempt the component fires two custom events: signin-success and signin-error.

A quick example:

const $login = document.querySelector('databiz-login');

$login.addEventListener('signin-success', 
  evt => console.log(evt.detail));

$login.addEventListener('signin-error', 
  evt => console.log(evt.detail));

The signin-success event will return an object inside the detail with the following data:

• token: the token_id returned from Google authentication
• profile: the data exposed by the googleUser.getBasicProfile() in the SDK.

To trigger the logout from the current session you must import the signOut method from the main package:

import { signOut } from '@databiz/login';

// ...some code later...

signOut().then(() => {
  // code to execute after the logout is completed
});

Browser compatibility

The component is built following the Custom Elements v1 and EcmaScript 2015 specifications.

| | Chrome | Firefox | Safari | Opera | Edge | IE11 | |--|--|--|--|--|--|--| | as-is | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |:x:|:x:| | CE polyfill | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: |

Available NPM tasks

Start the demo page in development mode (live reload)

$ yarn start

Create a static build of the main component in the root folder

$ yarn build

Create a static build of the demo page in the ./dist folder

$ yarn demo

Run the demo action and deploy to GitHub pages

$ yarn deploy

Local development

In order to have a local development environment, you must create a .env file in the project root and add your Google application's client id:

CLIENT_ID=123fake123client123id

License

Developed by Bitrock UI Engineering team, released under the MIT license.