npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

oauth-firebase-proxy

v0.0.1

Published

Serves as an google oauth-proxy and tranfers the resulting payload to firebase as custom authentication

Downloads

3

Readme

google-firebase-auth-proxy

This project serves the purpose that the firebase google authentication provider doesn't provide stuff like email-adress etc. which restricts the possibilities to formulate security-rules.

For this to work you have to enable "custom" login in firebase.

https://www.firebase.com/docs/security/api/rule/auth.html

https://developers.google.com/identity/sign-in/web/reference

Workflow

  • Wepapp logs in at google: https://developers.google.com/identity/sign-in/web/build-button
  • Webapp sends the token from the authentication-response (success.getAuthResponse().access_token) to the auth-proxy https://developers.google.com/identity/sign-in/web/reference
  • The auth-proxy validates the token against the google service to ensure ist validity. It is important to check the audience against the own clientid (https://developers.google.com/identity/protocols/OAuth2UserAgent). additional it checks the hd-field (domain of the registered user) https://developers.google.com/identity/sign-in/web/backend-auth
  • The auth-proxy creates a firebase-token using this method https://www.firebase.com/docs/web/guide/login/custom.html and sends it to the webapp
  • the webapp validates itself against firebase with the jwt-token

Usage

The google-firebase-auth-proxy-module provides a single function which takes a config-object as first parameter and returns an express app-instance:

var config = {
  client_id: 'xxxxxxxxxxxxxxxx.apps.googleusercontent.com', //client-id of the webapp-project
  hd: 'test.de', //optional, validates whether the logged in user has a special domain
  firebase_secrect: 'abc123' //firebase-secret, needed to generate the token for the webapp
};
var authProxy = require('google-firebase-auth-proxy')(config);

//start server
authProxy.listen(8080); //the auth-proxy is now running on port 8080

The client-side usage is documented in test/index.html. You have to perform an ordinary google-login using the google signin-api:

<div id="my-signin2"></div>
<script>
  function renderButton() {
    gapi.signin2.render('my-signin2', {
      'scope': 'https://www.googleapis.com/auth/plus.login',
      'width': 200,
      'height': 50,
      'longtitle': true,
      'theme': 'dark',
      'onsuccess': onSuccess,
      'onfailure': onFailure
    });
  }
</script>
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>

In the onSuccess callback you have to obtain the id-token and send it to the auth-proxy via AJAX. The server has CORS activated, it doesn't matter where it's hosted. The auth-proxy checks whether the token is valid and is issued for the correct app and hd. If this is true, it creates a new firebase-token and returns it to the client. The format of the answer is the following json-object:

{
  valid: true,
  token: 'issuedfirebasetoken'
}
function onSuccess(googleUser) {
  console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
  $.ajax('http://localhost:8081', {
    method: 'GET',
    data: {
      id_token: googleUser.getAuthResponse().id_token
    },
    success: function(data) {
      console.log(data);
      if(data.valid) {
        //TODO login to firebase using data.token
      } else {
        //TODO error-handling
      }
    }
  });
}

You can now use data.token to validate against the firebase-service. The token contains the following values (you can use them in the auth-object in firebase rules, see https://www.firebase.com/docs/security/api/rule/auth.html):

{
  uid: 'google-id of the user',
  email: 'email-adress of the user',
  given_name: 'firstname of the user',
  family_name: 'lastname of the user'
}