Giter Club home page Giter Club logo

auth0-element's Introduction

<auth0-element>Published on webcomponents.org

A collection of Polymer V1.0 elements that makes it easy to declaratively use Auth0.

For Polymer V2.0, please refer to the 2.0-preview branch.
For Polymer V3.0 and litElement, they are currently under active development and will be published shortly.

<auth0-element> supports the following Auth0 features:

It also includes a JWT manager that handles expiry of ID tokens.

Demo

A live demo of the element in action can be found here.

API Doc

The API documentation can be found here.

Example - Authentication

Enabling authentication which uses Hosted Pages with JWT manager enabled by importing the <auth0-auth> element into your html and setting the properties accordingly.

<auth0-auth  
	client-id="YOUR_CLIENT_ID"
	domain="YOUR_AUTH0_DOMAIN"
	options="AUTH0.JS_OPTIONS_OBJECT" 
	logout-redirect-to="LOGOUT_URL" 
	user-profile="{{userProfile}}" 
	id-token="{{idToken}}" 
	hosted-pages 
	jwt-manager>
</auth0-auth>  

Auth0 Lock will be used if hosted-pages is omitted from the properties.

Example - Obtaining a Delegation Token

Import the <auth0-delegate> element and configure the properties accordingly. By binding the idToken property to the idToken received from Auth0, <auth0-delegate> will automatically request a delegate token from Auth0 when a valid ID Token is received.

<auth0-delegate  
 client-id="YOUR_CLIENT_ID"  
 domain="YOUR_AUTH0_DOMAIN	"  
 options="OPTIONS"  
 id-token="[[idToken]]"  
 delegate-token="{{firebaseDelegateToken}}">  
</auth0-delegate>

Obtaining a delegation token to authenticate with Firebase can be found in the accompanying demo.

Example - Account Linking

To accomplish account linking, you'll need an <auth0-auth>element included somewhere in your application that handles authentication. Import the <auth0-link-account> element and set the properties accordingly. To initiate the account linking process, set the connection property.

<auth0-link-account  
 client-id="YOUR_CLIENT_ID"  
 domain="YOUR_AUTH0_DOMAIN"  
 options="OPTIONS"  
 connection="google-oauth2">  
</auth0-link-account>

Development

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run bower install to install dependencies followed by polymer serve to serve your application locally.

Viewing the Demo and API docs

$ bower install 
$ polymer serve  

Building the element

$ bower install
$ polymer build  

This will create a build/ folder with bundled/ and unbundled/ sub-folders
containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
CSS, and JS optimizers.

You can serve the built versions by giving polymer serve a folder to serve
from:

$ polymer serve build/bundled  

Running Tests

$ polymer test  

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

auth0-element's People

Contributors

johnlim avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

auth0-element's Issues

Polymer or lit-element

Hi. How stable/complete is the version for Polymer 3? You also mention a lit version but I cannot see a related branch. Is it usable?

`idToken` from localstorage being `"undefined"`

In auth0-auth:

        // Get the user token if we've saved it in localStorage before
        var idToken = localStorage.getItem(this.localStorageKey); // <- HERE
        if (idToken) {
          // If there's a token, just redirect to "targetUrl" if any
          //window.location.href = '#/leave-types';
          this._getProfile(idToken);
          return;
        }

In the snippet above, the value of var idToken taken out from localStorage is "undefined", instead of undefined, thus cause some critical error in _getProfile.

Tried more in console about localstorage:

> localStorage
> Storage {auth0:authUser: "undefined", length: 1}
> localStorage.foo
> null

I've not dig more, though glad to help if you need more info.

Thx for the component!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.