sing both Aurelia and firebase together is exceptionally convenient for my workflow. When it comes to authentication, I have certain routes I want to protect.
The best way to add in authentication checks for routes in Aurelia is to create a router pipeline step. Specifically, an authorise pipeline step.
Because of the way Firebase uses a promise based callback for its auth state change event, we need a way to wait for Firebase to resolve its callback before checking.
It might not be immediately obvious if you read the document, but the run method in a pipeline step can return a Promise object and it will wait for it to resolve or reject before proceeding.
I am going to assume you already have Firebase installed and configured in your Aurelia application.
Inside of your src/app.ts/src/app.js file, add the following right at the bottom:
This is our authorise step which waits for Firebase to tell us the current auth state and check the current route to see if it has an auth attribute set to true.
We use the observable onAuthStateChanged method because the user might log out or their session expires between page loads. Also, you’ll experience race collisions with the timing of routes and the state not being fully resolved if you do it any other way.
You’ll notice if the user is not logged in, then we are redirecting them to the homepage. Specify any URL you want here. Don’t forget to import Redirect from the aurelia-router package as well.
Inside of your app file, inside of the configureRouter method, you want to now supply the auth step so our routes are checked.
At the bottom of the configureRouter method add the following:
config.addPipelineStep('authorize', AuthorizeStep);That’s it. Not much code to implement Firebase auth into your routes.
Returning a promise in an AuthStep is how I originally had my OAuth implemented. It’s not a good idea, it produces a poor user experience. The app stalls for several seconds with no opportunity to provide user feedback. Depending on network conditions the pause can be quite lengthy. This is not an advisable way to do things.
@Peter
Curious as to what solution you prefer to implement authorisation in your Aurelia applications? The user experience is not a problem if you split your routes into public and private using `setRoot` then you can avoid having a pipeline step for public routes and for private, have a pipeline step. I have a loader indicator which displays whenever a request is made or pipeline step is running.
In the instance of Firebase, it is quite fast and that includes testing using Chrome’s developer tools which allow you to simulate throttling the connection speed. Maybe slower for other auth implementations.
The problem with Firebase is you can check the current auth state using other means, but you’re not guaranteed to get a resolved state. The recommended approach is to use the `onAuthStateChanged` observable callback to ensure you get a properly resolved auth state. If you don’t use a pipeline step, you get instances where you might check in `canActivate` or `activate` and run into the same thing: a delay while the request is made.
Building a Firebase + Aurelia app now, and this was incredibly helpful. Thanks!