How to Configure Firebase Cloud Storage bucket for cross-origin access (CORS)

If you have ever tried to download data stored in Firebase Cloud Storage directly in your browser you may have come across this error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access

In order to fix this error you will need to run through a couple of steps to configure Firebase Cloud Storage for CORS. The following steps can be taken in order to do this:

GSUtil

There are at least two approaches to configure the cloud storage with GSUtil:

Cloud shell within Google Cloud Platform

You can manage Compute Engine resources like virtual machine instances using the gcloud command-line tool in a Cloud Shell session.

• The following instructions outline how to start the session
• Google Cloud Shell is free for customers of Google Cloud Platform which isn't free. 

Install GSUtil

Gsutil is a tool that enables you to access Google Cloud Storage from the command-line and is needed to configure Firebase Cloud Storage for CORS.

• The detailed installation instructions for this tool can be found in the google cloud website. 

• If you are behind a corporate proxy or firewall, the tool may not be able to access the internet with its default settings during installation. In this case you could use one of the self-contained versioned archives as detailed here.
• Once you have successfully run gcloud init and been authenticated you can configure CORS
• With the cors.json file created run the following command to deploy the configuration to your storage: 
• bin/gsutil.cmd -d cors set  gs://

That should be all you need to do. 

Vue.js, NUXT.js, Vuex, Firebase persisted authentication, Axios

I created the following application to demonstrate how to handle authentication with Firebase within a Nuxt (Vue) application. I wanted to make sure the application stayed logged in as long as the Firebase authentication token hadn't expired. User should not be logged out when:

• The browser is refreshed
• The browser is closed and restarted and the Firebase token is still valid (persisted sessions)

You can grab the example from Github and you can see below for a brief outline of the steps I took to setup configure the application:

Firebase Project

• Signup / Login to the Firebase console and Create a new project by clicking the Add project icon and following the instructions for creating your project. 
• Setup authentication within your new Firebase project by clicking on the authentication menu in the left navigation bar. Click on the sign-in method tab and select the Email/Password provider from the list of sign-in methods. Enable it and click save.

Create Vue+NUXT application

• Create your Vue+NUXT application by following instructions outlined in the the NUXT starter-template.

Install the necessary dependencies

• yarn add @nuxtjs/axios body-parser express express-session firebase jwt-decode vuex  

Configure and initialise Firebase

• Add Firebase configuration settings by creating a development (and production) configuration file to your application and adding your Firebase  project settings to it
• Locate your Firebase application configuration settings by logging into your Firebase console and searching for: Add Firebase to you Web Application
• Create a file that will export the instance of your Firebase application
• The example application also makes use query the Firebase realtime database. If you are wanting to run the example application be sure to create your own database in your Firebase project

Create express server API 

• Create an express server API to handle the login and logout posts for the user. On receiving a post request from the client the user ID is stored in the session and the access token is stored in a cookie
• Modify your nuxt.config.js file so that it includes a section for the serverMiddleware and also has @nuxtjs/axios module defined

Create Vuex actions and mutations

• Add Vuex to your application and choose between the classic or module mode. I opted for the module mode
• Inside your root store file define the nuxtServerInit action. This action is used to save the currently logged in user to the session
• Inside your stores users module add the necessary getters, actions and mutations needed to save the user ID to the store. We include our login and logout actions here that use axios to send a post request to the server 

Create check authentication middleware

• Create a check authentication middleware action and add the necessary configuration to nuxt.config.js so that it will be called for every route
• The middleware component will check to see if the user is stored in the session or if the access token is found in the cookie. If it finds a match the store is initialised with the user ID. 

Create protected resource

• Create a page that will only be accessible if a user has successfully been authenticated
• Create the authenticated middleware action that will be called for every protected page. This action checks to see if a user is authenticated, if not the user is redirected to the sign in page

Create SignIn and SignUp pages

• Create a page to allow the user to sign in to the application
• Create a page to allow a user to register as a new user to the application

Run your Application

• npm run dev
• If all was configured successfully you should be able to sign up, sign in, reload page and still be signed in, close browser and reopen browser and still be logged in (as long as access token is still valid) and finally be able to sign out of the application

Offline web application with Angular

Last month I wrote a blog about a Progressive Web Application in Vue.js and subsequently I investigated how one could do this all in Angular (version 5.0.1). I am new to Angular and have just started to learn it. I like Vue very much but for an existing work project already using Angular I hope to learn the framework. This doesn't mean I am going to throw Vue out the window, on the contrary I just signed up for the online Vue Master Class just starting out on vueschool.io. I think learning Angular on top of it will only improve my skills in Javascript and and increase my understanding of modern web frameworks.

Angular PWA Example

After reading the quick start documentation on the Angular website in order to get familiar with Angular I went about searching the web for information on how to build PWA application with Angular. I found the following article really useful and built the sample Angular project based on the information I found here:

A new Angular Service Worker — creating automatic progressive web apps. 

• Part 1: theory

• Part 2: practice

The example application they have is called PWAtter and you can find it on GitHub. The example I created and have on GitHub is a very basic Angular application with SW configuration and support based on the articles mentioned in the links above. 

A short note on running the application, to run it in dev you can run the "npm run start" command line. Running in Dev doesn't enable Service Worker support. To run it with the Service Worker support you need to run in production mode and with a http server, the command for the project is "npm run serve-prod-ngsw".

Storytellers - a Vue, NUXT, SSR, Vuetify, Firebase [Auth, Firestore, Storage, Functions] application

I am trying to develop an web application from the ground up in order for me to really learn and understand modern web development. I wrote a blog entry when I first started out and I have continued to work on the sample application.

There is very little you can do with the application but it covers a lot of ground already. I have managed to covers all the tiers I am trying to learn:

• Vue.js
• NUXT.js with SSR
• Vuetify.js
• Firebase
• Authentication
• Firestore database
• Storage
• Firebase functions

Hopefully, if I have time, I can add more functionality to it so that it looks and feels like a proper functional application.

What is the web application about? Well at the moment it allows a user to upload images to Firebase storage and displays thumbnails on the home screen. Sounds amazing. Ultimately I would like to 'expand' on that :-) and end up with a community driven application providing a platform for the creative and artistic to share and collaborate their stories and ideas with one another.

Yeah so arguably that idea is pointless and ... yeah it might be ... but it allows me to try many different things and covers many different technology stacks so I am going to learn a lot by doing this.

I don't expect anyone to be interested in "collaborating" with me in development but I want to keep this opensource and invite anyone out there who is keen and able to contribute to the development of this project. Feel free to fork the repository, raise issues and submit pull requests.

Offline web application with Vue.js

I have recently been learning Vue and in so doing a million other things, it seems, to do with modern web frameworks like Vue. Vue is described as:

The Progressive JavaScript Framework

So what is a Progressive Web App? Wikipedia explains it as follows:

Progressive Web App (PWA) is a term used to denote web applications that use the latest web technologies. Progressive Web Apps, also known as Installable Web Apps or Hybrid Web Apps, are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of mobile experience.

The following characteristics make up a PWA:

Progressive

Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.

Responsive

Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.

Connectivity independent

Service workers allow work offline, or on low quality networks.

App-like

Feel like an app to the user with app-style interactions and navigation.

Fresh

Always up-to-date thanks to the service worker update process.

Safe

Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.

Discoverable

Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

Re-engageable

Make re-engagement easy through features like push notifications.

Installable

Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

Linkable

Easily shared via a URL and do not require complex installation.

For me I was quite keen to see how the connectivity independent characteristic could work so that regardless of whether or not a user is online they could still work away as if they were connected. I started reading up on service workers to get an initial understanding of the concepts.

I found the following links most helpful:

• Google's Developer's guide to server workers
• Background sync with service workers
• Sample Vue PWA with service workers by Charles Bochet

Over and above that there are these two vue-cli templates designed to give you a running application with all the PWA features configured and ready to use:

• vue-pwa-boilerplate
• vuetify-pwa-boilerplate

The Vuetify example is based off the vue-pwa-boilerplate just with Vuetify semantic material components.

I took these examples and created my own vuetify-pwa application. The goal was to have some web navigation between pages and to be able to complete some forms and submit them regardless of internet connectivity. Once online the goal is to auto sync the changes with the server. This background sync hasn't been implemented yet and hopefully I can get to update this later on when it is done.

Vue.js, NUXT.js, Vuetify.js, Firebase authentication

Please note I have a more recent blog entry regarding authentication with Firebase + Nuxt that not only uses the session to store the user ID but a cookie to store the access token. It also makes use of the Nuxt Axios module to make server posts on login and logoff. 

I previously wrote a blog detailing a few steps to get a sample Vue + Vuetify + Nuxt application running on Heroku cloud platform. In this blog I want to share a sample application I did that has all of the above but also Firebase authentication.

Framework Overview

In a nutshell this is what the example application covers:

Vue.js

The sample application is built using the Vue.js framework, a progressive framework for building user interfaces.

NUXT.js

It is also built on top of NUXT.js, a framework for creating Universal Vue.js Applications. I chose NUXT.js because I wanted to build a server-rendered Vue application. I didn't need to use NUXT, there is an in-depth guide I could have followed but NUXT is supposed to make building universal web application easier. That sounds good to me.

Vuetify

For the UI components and page layouts I make use of Vuetify.js, a semantic component framework for Vue.js. Why Vuetify and not many other options that are available, like what can be seen in this comparison blog post? A lot of these frameworks are new to me, Vuetify seemed like a popular choice with a stable backing and it supported server side rendering with NUXT.

Firebase Authentication 

The application integrates with Firebase in order to authenticate users.

Vue CLI Templates

Getting familiar with NUXT and Vuetify I went over the following Vue CLI templates:

• NUXT Starter Template
• Vuetify + NUXT Starter Template

They were both very useful and instrumental in getting an initial understanding into their framework. But things started to get a little less simple and a lot more fuzzy when I started to integrate Firebase authentication with my app. Of course there is a lot I need to learn (and still need to learn). GitHub issues for both these projects were quite helpful in searching for answers to questions I had:

• NUXT Issues
• Vuetify Issues

The problem

I needed a way to authenticate users through Firebase authentication and to handle state on the server as well as the client. Firebase web authentication is run on the client side. I wanted to be able to logout a user when the user logs out and also keep a user logged in when the user refreshes their browser. There seems to be a number of different approaches to this problem and I settled on the following:

1. Configure the application to run an express server so that I could handle server POSTS and  GETS if needs be (example sign in and sign out post) and store any information in the session in case I need to access it again from the server. The following link on the NUXT website helped me configure my custom server: https://nuxtjs.org/examples/auth-routes/. Oh and yeah it has an example of an auth use case except it didn't quite fit my scenario.
2. Configure a pages middleware function that gets called for every secure page, not for sign in and sign up pages. This function will be responsible to see if the user is authenticated or not by either checking the session (server) or analysing the firebaseApp variable to see if the current user exists or not. 

The above means I don't store the logged in user in any store like Vuex, Firebase seems to store the user in localStorage in a variable called "authuser". That way it can keep the user signed in.

Sample Code

The sample code for the project I did can be found here:

• https://github.com/rossma/storytellers/tree/nuxt-update

Once cloned you should be able to change into the ui folder and run the following commands to test it out:

• npm install
• npm run build
• npm run dev-custom-server

You could also just examine the code...maybe there is something useful there you will find. Like I said at the beginning this is all very new to me so most likely there are a lot of things wrong with the way I have done it. I hope not. But nevertheless I learned a lot.

Audit logging in JBoss EAP 6

A security domain in JBoss can be configured to write information to a log file or do some custom action like send an email notification all for audit purposes. You can configure the security domain via the admin console / jboss-cli / edit the standalone.xml file directly.

Open the admin console and navigate to Configuration -> Security -> Security Domains. Choose the View link from the list of domains you want to edit. Select the audit tab. For example if you want to configure the default other domain you will notice that there are no provider modules listed. Provider modules are used to provide this audit mechanism. By default JBoss uses org.jboss.security.audit.providers.LogAuditProvider. This isn't listed in the table here and is disabled by default.

Enable the LogAuditProvider for the application server 

A log appender needs to be configured, this can be done via the CLI or edit the standalone configuration file manually. 

CLI

/profile=full-ha/subsystem=logging/periodic-rotating-file-handler=AUDIT/:add(suffix=.yyyy-MM-dd,formatter=%d{HH:mm:ss,SSS} %-5p [%c] (%t) %s%E%n,level=TRACE,file={"relative-to" => "jboss.server.log.dir","path" => "audit.log"})
/profile=full-ha/subsystem=logging/logger=org.jboss.security.audit/:add(level=TRACE,category=org.jboss.security,handlers=["AUDIT"])

The above should generate the following configuration in your standalone.xml file:

<periodic-rotating-file-handler name="AUDIT" autoflush="true">
  <level name="TRACE"/>
  <formatter>
    <pattern-formatter pattern="%d{HH:mm:ss,SSS} %-5p [%c] (%t) %s%E%n"/>
  </formatter>
  <file relative-to="jboss.server.log.dir" path="audit.log"/>
  <suffix value=".yyyy-MM-dd"/>
  <append value="true"/>
</periodic-rotating-file-handler>
<logger category="org.jboss.security">
  <level name="TRACE"/>
  <handlers>
    <handler name="AUDIT"/>
  </handlers>
</logger>

Disable the LogAuditProvider for a single web application

The above log configuration applies to all applications deployed to the application server. To disable this logging for a particular application you can include a jboss-web.xml file in your WEB-INF directory that has the disable-audit element defined with a false value, example:

<?xml version="1.0" encoding="UTF-8"?>
<jboss-web>
  <security-domain>java:/jaas/other</security-domain>
  <disable-audit>false</disable-audit>
</jboss-web>

As mentioned above the auditing uses provider modules and the default is org.jboss.security.audit.providers.LogAuditProvider. You can use this one or implement your own. The LogAuditProvider can be found in the picketbox-4.1.1.Final-redhat-1.jar and extends abstract class: AbstractAuditProvider