• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Auth Protected Routes in Aurelia With Firebase

Aurelia 1 · May 14, 2017

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.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Peter
Peter
5 years ago

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.

0
Dwayne
Dwayne
Author
5 years ago

@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.

0
Josh
Josh
5 years ago

Building a Firebase + Aurelia app now, and this was incredibly helpful. Thanks!

0

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz