Git Product home page Git Product logo

auth-ajax's Introduction

Demo and API docs

<auth-ajax>

Build Status

<iron-ajax> with added auth header handling, token management and some convenient JWT role checks.

The aim is to allow your app to authenticate users using whatever system you want (firebase auth works great!) and then have an easy way to hook into using the auth tokens (which really should be JWT) if / when accessing your own API and also to adapt the UI based on auth state.

Why do I need this?

There are lots of examples that show how to add an auth bearer token to an <iron-ajax> request, so it's easy ... right? The problem is that many examples just stick to the simple "happy-path scenario" where the auth token is alwas valid and never expires (typically the user just signs-in for the demo, never returns to the app 6 hours later which still signed in).

But if your auth bearer tokens never expire then you have a problem! Best practice mandates that they do, otherwise access can never be revoked (for whoever gets hold of the access token) unless you als add some server-side checks ... which means you are no longer using bearer tokens, just a regular session key which can seriously impact backend scalability.

OK, so you need to use both an access token and a refresh token. Now the challenge becomes how to handle refreshing the token when required and making any AJAX requests wait until it has completed. The examples don't usually show that part.

Which is why this element might be useful ...

It adds a promise to the token refresh mechanism which the <iron-ajax> requests can wait on. It also triggers the token refresh when the access token is within a configurable threshold of its expiry time (because there's no sense sending a request that will probably fail if clocks are a few minutes askew).

What else does it do?

The other great benefit of using a JSON Web Token (JWT) as the auth bearer token is that the client can also use it. Information such as user name or avatar image can be embedded and used in the UI to show the user status. If roles are available, these can be used to show or hide certain features or options or otherwise customize the UI based on permissions.

So, there is also an <auth-role> element which acts as an auth-based dom-if template which can display content based on auth status or whether the auth token contains certain roles.

What about Firebase auth?

Firebase auth is quick and easy (and definitely recommended) and you don't need this element if you are only using the Firebase hosted services (e.g. the realtime database). But if you want to integrate Firebase auth with an existing API then you may still find it helpful.

If your API is already expecting an auth token then chances are you can't just send the firebase-issued token to it. Instead, you can authenticate using firebase but then issue a custom token which can contain any additional claims / roles your server expects. You'll also be able to take advantage of the <auth-role> element to customize the UI based on any role permissions.

Demo

I have created a separate Go library for Custom Firebase Auth which shows how to issue custom tokens on the server and a Demo which uses Firebase auth + Google signin with custom token issuing to show how roles can be added to a firebase token for use on both the server and client.

It also describes in more detail the process on the client for authenticating with Firebase auth and then using a custom token.

auth-ajax's People

Contributors

captaincodeman avatar peterlauri avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

auth-ajax's Issues

demo links broken

I get 'entity not found' for demo attempts from Github and web components site...not sure why

Polymer 2.0 rewrite?

Just curious, are you planning on doing any kind of rewrite for polymer 2? Being able to use ES6 classes might help clean up a few things.

Example of using non firebase

Hi there, been looking at this piece of code for some time now. Pretty new at this all so i don't get everything :) Firebase demo works fine, also locally. But can you show an example where you would use your own api. I have an api which wants something like this:

this.$.registerLoginAjax.body = { apiKey: 'secretkey', logonName: 'me'};

I see 2 url's in the example both are tokens, in our case we just authenticate towards a token api service (with above body) which gives us a jwt token, which we use with the bearer to do calls on another service. Any tips would be appreciated, moving from angular so its pretty different imho ;)

And indeed, as you describe in your readme. All other examples just login, no refresh! Those i have working but that is not the proper way indeed.

p.s. https://auth0.com/blog/build-your-first-app-with-polymer-and-web-components/ this is an example like that, but without refresh. If it had the refresh i would be finished, but you could use that node.js as an example perhaps?

Documentation

Would be great to get some more detailed docs. It seems there are multiple elements bundled in this package, so would be great to get a better view on what the options for each element is.

Very keen to try this element.

Provide helpful error if token isn't a valid JWT

Auth store

When I assign a token to the auth store it throws an error when it attempts to decode the token. (HTMLElement._tokenChanged (auth-store.html:139))
the token is present at this point.

Uncaught TypeError: Cannot read property 'replace' of undefined
at b.exports (jwt-decode.min.js:1)
at b.exports (jwt-decode.min.js:1)
at HTMLElement._tokenChanged (auth-store.html:139)
at HTMLElement._observerEffect (polymer.html:1662)
at HTMLElement._effectEffects (polymer.html:1507)
at HTMLElement._propertySetter (polymer.html:1491)
at HTMLElement.setter (polymer.html:1570)
at HTMLElement._formResponse (email-login-form.js:71)
at HTMLElement.handler (polymer.html:566)
at HTMLFormElement.fire (polymer.html:1343)

Polymer.AuthTokenStoreBehavior not being triggered

Safari and Firefox do not trigger the store behavior (Polymer.AuthTokenStoreBehavior), tokens are not being set when trying to call this.getAuthToken().

Authorization headers are not being set.

requestOptions._authHandler are not set.

Have not tested IE.

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.